L’automazione ha un ruolo sempre più importante in una varietà di settori, e il web development non fa eccezione. Automatizzare e snellire alcuni dei processi relativi alla creazione di siti web e applicazioni aiuta a essere web developers più efficienti, riducendo il tempo da dedicare a operazioni fondamentali che spesso si tende a trascurare, come testing e debugging. Conoscere gli strumenti giusti da utilizzare per ottimizzare il proprio flusso di lavoro non è più soltanto un miglioramento opzionale, bensì è un passaggio cruciale per svolgere le proprie mansioni in modo adeguato. Ciò permette di aumentare la soddisfazione dei clienti realizzando siti e applicazioni di ottima qualità impiegando meno tempo. In questo articolo, quindi, scopriremo alcuni flussi di lavoro che aiuteranno a rendere più rapidi programmazione, testing, debugging e distribuzione.
Sfruttare la console del browser
Gli strumenti per sviluppatori integrati nel browser, e in particolare in Google Chrome, sono una risorsa indispensabile che ogni developer dovrebbe imparare a sfruttare già durante la formazione presso un corso di coding. La console è utilissima per testare direttamente dal browser idee su come risolvere un problema con JavaScript o verificare il funzionamento di brevi sezioni di codice, il tutto prima di inserire questo codice nel nostro progetto. Per accedere alla console in Chrome si possono utilizzare diversi metodi: premere il tasto F12 e selezionare la scheda “Console” nel menu in alto, oppure premere contemporaneamente i tasti CTRL + Maiusc + J. In alternativa, è possibile aprire il menu di Chrome cliccando i tre punti in alto a destra, selezionare “Altri strumenti” e poi “Strumenti per sviluppatori”, e da lì selezionare la scheda “Console”.
La console, come abbiamo visto, consente di mettere alla prova rapidamente il funzionamento di brevi frammenti di codice, ma non di testare il sito o l’applicazione nella sua interezza. Ciò è possibile, invece, utilizzando framework o librerie come React, Angular o Vue.js, che forniscono un’infrastruttura completa per sviluppo, test, debugging e visualizzazione dell’anteprima dopo ogni modifica.
Utilizzare VS Code con integrazione Live Server
Per i progetti che non richiedono l’uso di framework o librerie, ma si avvalgono semplicemente dei linguaggi HTML, CSS e JavaScript, uno sviluppatore web ha bisogno di un’altra opzione per controllare l’anteprima in tempo reale. Chi usa Visual Studio Code, uno degli editor più popolari tra i web developer, può installare a questo scopo l’utile estensione Live Server. Questa integrazione simula l’esecuzione attraverso un server di sviluppo locale che si aggiorna in tempo reale e funziona per sia per pagine statiche che dinamiche. Dopo l’installazione basta fare clic con il tasto destro sul file index.html (o sul file HTML principale, se ha un nome diverso) e aprirlo con Live Server, oppure cliccare “Go Live” dalla barra di stato di VS Code. Questo flusso di lavoro permette di sviluppare e testare un sito o un’applicazione senza bisogno di ricaricare il browser, controllando agilmente l’anteprima dopo ogni modifica.
Test locale con il comando “npx serve”
Insieme a npm (Node Package Manager), che permette di gestire i pacchetti quando si utilizza Node.js, viene installato anche npx (Node Package Execute). Questo strumento consente, attraverso la riga di comando, di eseguire pacchetti dal registro di npm senza bisogno di installarli in locale. Per farlo si usa la utility “serve”, attraverso cui si può visualizzare localmente un sito web statico. Basta aprire la riga di comando dalla cartella principale del progetto e digitare “npx serve” per ottenere un URL che rimanda alla versione statica del sito o applicazione a cui si sta lavorando.
Integrare GitHub con un servizio di hosting cloud
I flussi di lavoro visti ora possono rendere più agili i progetti di web development, facilitando il controllo in tempo reale di modifiche in locale. Tuttavia, per uno sviluppatore di siti web non c’è incubo peggiore che accorgersi, a scadenza ormai vicina, che il risultato finale è differente rispetto all’anteprima locale. In quest’ultima sezione vedremo, quindi, come automatizzare il processo che permette di creare un’anteprima in tempo reale di un sito o applicazione su un’infrastruttura esterna, simulando il prodotto finale in modo accurato. Per farlo, ci serve un servizio di hosting su cloud come Vercel, Netlify, o Heroku da integrare a GitHub. Ciò consente di connettere il repository su GitHub che ospita il codice, che sarà distribuito automaticamente a una CDN ogni volta che eseguiamo il push. Quando si crea una pull request si ottiene un URL con l’anteprima dei cambiamenti effettuati, visualizzabili su un’infrastruttura esterna.
Prima di tutto è necessario creare un repository su GitHub, effettuando poi commit e push della prima versione del codice. Bisogna poi integrare il servizio di hosting con GitHub, solitamente un processo semplice da completare seguendo le istruzioni fornite dai diversi provider. Dopodiché si passa alla creazione di diversi branch del repository, da utilizzare per correggere bug o per introdurre altre funzioni. Il servizio di hosting, quindi, distribuirà il codice alla CDN e fornirà un URL da cui visualizzare l’anteprima di ogni branch, per verificare che tutto funzioni correttamente. L’URL può essere condiviso anche con colleghi che collaborano al progetto oppure con il cliente per ottenere feedback in corso d’opera. Non resta, infine, che approvare la pull request per includere le modifiche e le funzioni desiderate al branch principale.
Questo flusso di lavoro, efficace e facile da automatizzare, semplifica la vita di ogni programmatore informatico lasciando più tempo a disposizione per occuparsi del codice vero e proprio, senza preoccuparsi del resto.
