CONTATTACI

Blog

Come migliorare e automatizzare il tuo flusso di lavoro da web developer

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.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.