# Front-End

# Introduzione

In questo capitolo, vado ad elencare tutte quelle mie competenze che riguardano l'apparenza di ciò che sviluppo: essenzialmente tutto ciò che è visibile.

# Node & NPM

Per la gestione delle dipendenze uso NPM (che è il Composer del front-end) e Node.js che è il server necessario per lo sviluppo delle apps.

# Vue.js

Il framework Javascript che impiego per il front-end è Vue.js. Inspirato da Angular, adotta un approcio più immediato nella sua comprensione e utilizzo, diventando così un eccellente alleato per quanto concerne la produttività.

TIP

Il framework (telaio), agevola e guida lo sviluppatore a costruire meglio e più in fretta, inglobando le best-practices per i problemi comuni, in modo da concentrarsi sulle effettive necessità del cliente.

E' molto utile la creazione di propri componenti. Oltre all'ovvio fatto di poter essere riutilizzati, permettono la creazione di un HTML più semantico e chiaro per chi deve mantenere il codice.

# Vuex

Vuex è il "cervello centralizzato" che uso per permettere la gestione degli stati dei componenti che impiego (ad esempio per decidere se un pop-up è visibile o meno). Tutta l'informazione dei componenti è centralizzata in Vuex (che si occupa anche di aggiornarsi connettendosi alle API), requisito obbligatorio per riuscire a gestire progetti di grandi dimensioni, lasciando ai componenti l'unico compito di mostrare le informazioni.

# Vuepress

Il "motore" che ho impiegato per la costruzione di luca-pezzino.tech è Vuepress. Abbina al codice Markdown la possibilità di utilizzare componenti di Vue ed è un eccellente strumento per implementare rapidamente piccoli progetti. Non avrebbe avuto alcun senso scomodare l'artiglieria pesante impiegata per la costruzione di Pollini by Luca Pezzino, quando basta e avanza una fionda 😉

# E6/7/8

Provenendo originariamente dal back-end, non potevo non impiegare le varie versioni di ES. Apprezzo decisamente la convergenza con i linguaggi del back-end (oltre alle classi, direi che meritano sicuramente una menzione i moduli, per un netto miglioramento della manutenzione del codice, così come le arrow functions che permettono un codice più pulito e sintetico).

# Webpack & CSS PreProcessors

Per quanto concerne infine la generazione dei CSS, mi affido a vari PreProcessors (ultimamente Stylus). Il vantaggio è sempre inerente ad eventuali cambiamenti: se volessi ad esempio passare dal rosso che caratterizza le scritte accentuate di luca-pezzino.tech in blu, mi basterebbe cambiare UNA variabile in UN singolo file. Tutto ciò è fattibile grazie a Webpack, che si occupa anche di trasformare il codice sorgente Javascript, in quello che viene poi erogato dal server all'utente che visualizza il sito.