Contenuto
- 01. Codice
- 02. Documento
- 03. Analizza
- 04. Test
- 05. Misura
- 06. Automatizza
- 07. Gestire le eccezioni
- Passi per il successo
Screencast creato da Tuts + Premium in associazione con net magazine e Creative Bloq.
Con il miglioramento delle prestazioni del browser e l'adozione costante di nuove API HTML5, il volume di JavaScript sul Web è in aumento. Tuttavia, una singola riga di codice scritta male ha il potenziale per rompere un intero sito Web, frustrando gli utenti e allontanando potenziali clienti.
Gli sviluppatori devono utilizzare tutti gli strumenti e le tecniche a loro disposizione per migliorare la qualità del loro codice per essere sicuri che ci si possa fidare di eseguirlo in modo prevedibile ogni volta. Questo è un argomento che mi sta a cuore e ho lavorato per molti anni per trovare una serie di passaggi da seguire durante lo sviluppo per garantire che venga rilasciato solo il codice della massima qualità.
Segui questi sette passaggi per migliorare notevolmente la qualità dei tuoi progetti JavaScript. Con questo flusso di lavoro, si verificheranno meno errori e qualsiasi cosa verrà gestita con garbo, lasciando agli utenti la possibilità di navigare senza frustrazione.
01. Codice
Inizia invocando la modalità rigorosa di ECMAScript 5 nelle tue funzioni con un'istruzione "usa rigorosa" e utilizza il modello di progettazione del modulo, riducendo al minimo l'uso di variabili globali mediante sandboxing di moduli di codice separati all'interno di chiusure di funzioni autoeseguenti, passando tutte le dipendenze esterne da mantenere moduli chiari e concisi. Utilizza solo librerie e framework di terze parti consolidati e ben testati e mantieni piccole le tue funzioni, separando qualsiasi logica di business o dati dalla manipolazione del DOM e da altro codice a livello di visualizzazione.
I progetti più grandi con più sviluppatori dovrebbero seguire una serie stabilita di linee guida di codifica, come la Guida allo stile JavaScript di Google, e avranno bisogno di regole di gestione del codice più rigide, inclusa una gestione delle dipendenze più rigorosa utilizzando Asynchronous Module Definition (AMD) attraverso una libreria come RequireJS, gestione dei pacchetti utilizzando Bower o Jam per fare riferimento a versioni specifiche dei file delle dipendenze e l'uso di modelli di progettazione strutturale, come il modello Observer, per facilitare la comunicazione liberamente accoppiata tra i diversi moduli di codice. È anche una saggia idea utilizzare un sistema di repository di archiviazione del codice come Git o Subversion tramite servizi come GitHub o Beanstalk per mantenere il backup del codice nel cloud, fornire la possibilità di ripristinare le versioni precedenti e, per progetti più avanzati, per creare rami di codice per implementare diverse funzionalità prima di unirle di nuovo insieme una volta completate.
02. Documento
Utilizza un formato di commento a blocchi strutturato come YUIDoc o JSDoc per documentare le funzioni in modo che qualsiasi sviluppatore possa comprenderne lo scopo senza bisogno di studiarne il codice, riducendo i malintesi. Utilizza la sintassi Markdown per commenti e descrizioni più ricchi e di lunga durata. Utilizza gli strumenti della riga di comando associati per generare automaticamente un sito Web di documentazione basato su questi commenti strutturati che si mantenga aggiornato con le modifiche apportate al codice.
03. Analizza
Esegui regolarmente uno strumento di analisi del codice statico, come JSHint o JSLint, sul tuo codice. Questi verificano le insidie di codifica note e potenziali errori, come dimenticare di utilizzare la modalità rigorosa o fare riferimento a variabili non dichiarate e individuare le parentesi graffe o i punti e virgola mancanti. Correggi eventuali problemi segnalati dallo strumento per migliorare la qualità del codice. Prova a impostare le opzioni predefinite per il tuo team di progetto per applicare gli standard di codifica, come il numero di spazi in base ai quali indentare ogni riga, dove posizionare le parentesi graffe e l'uso di virgolette singole o doppie in tutti i file di codice.
04. Test
Uno unit test è una piccola funzione autonoma che esegue una delle funzioni dalla base di codice principale con input specifici per confermare che restituisce un valore atteso. Per aumentare la sicurezza che il codice si comporterà come previsto, scrivere unit test utilizzando un framework come Jasmine o QUnit per ciascuna delle funzioni, utilizzando parametri di input previsti e imprevisti. E non dimenticare quei casi limite!
Esegui questi test in più browser su più sistemi operativi sfruttando servizi come BrowserStack o Sauce Labs che ti consentono di avviare macchine virtuali nel cloud su richiesta per i test. Entrambi i servizi forniscono un'API che consente di eseguire automaticamente gli unit test su più browser contemporaneamente, con i risultati restituiti al completamento. Come bonus, se il tuo codice è memorizzato in GitHub, puoi sfruttare BrowserSwarm, uno strumento che esegue automaticamente i tuoi unit test quando effettui il commit del tuo codice.
05. Misura
Gli strumenti di copertura del codice come Istanbul misurano quali righe di codice vengono eseguite quando i test unitari vengono eseguiti rispetto alle funzioni, riportandoli come percentuale del numero totale di righe di codice. Esegui uno strumento di copertura del codice per i tuoi test unitari e aggiungi test aggiuntivi per aumentare il punteggio di copertura al 100%, offrendoti maggiore fiducia nel tuo codice.
La complessità delle funzioni può essere misurata utilizzando le misure di complessità di Halstead: equazioni ideate dall'informatico Maurice Halstead negli anni '70 che quantificano la complessità di una funzione in base al numero di loop, rami e chiamate di funzione che contiene. Man mano che questo punteggio di complessità diminuisce, più facile diventa comprendere e mantenere la funzione, riducendo la probabilità di errori. Lo strumento da riga di comando Plato misura e genera visualizzazioni della complessità del codice JavaScript, aiutando a identificare le funzioni che potrebbero essere migliorate, mentre memorizza i risultati precedenti, consentendo di monitorare i progressi della qualità nel tempo.
06. Automatizza
Utilizza un task runner come Grunt per automatizzare i processi di documentazione, analisi, test, copertura e generazione di report di complessità, risparmiando tempo e fatica e aumentando le possibilità di affrontare eventuali problemi di qualità che si presentano. La maggior parte degli strumenti e dei framework di test evidenziati in questo articolo hanno attività di Grunt associate disponibili per aiutarti a migliorare il tuo flusso di lavoro e la qualità del codice senza che tu debba alzare un dito.
07. Gestire le eccezioni
Invariabilmente, a un certo punto, il tuo codice genererà un errore quando viene eseguito. Utilizza le istruzioni try ... catch per gestire correttamente gli errori di runtime e limitare l'impatto sul comportamento del tuo sito. Utilizzare un servizio Web per registrare gli errori di runtime generati. Usa queste informazioni per aggiungere nuovi unit test in modo da migliorare il tuo codice ed eliminare questi errori uno per uno.
Passi per il successo
Questi sette passaggi mi hanno aiutato a produrre alcuni dei codici di cui sono più orgoglioso nella mia carriera fino ad ora. Sono anche un'ottima base per il futuro. Impegnati a utilizzare questi passaggi nei tuoi progetti per produrre codice JavaScript di alta qualità e lavoriamo insieme per migliorare il Web, passo dopo passo.
Parole: Den Odell
Questo articolo è apparso originariamente nel numero 249 di net magazine.
