Alcuni mesi fa, ho iniziato a lavorare su un progetto di sviluppo di applicazioni web della durata di un anno, e mi sono reso conto di come molti sviluppatori non siano del tutto consapevoli delle migliori pratiche industriali nello sviluppo front-end delle applicazioni web. Anche io non ero a conoscenza di alcune pratiche. Così ho deciso di scrivere questo articolo per condividere quello che so e quello che ho imparato sulle migliori pratiche da seguire quando si sviluppa un’applicazione web.

Questo articolo si concentrerà sulle migliori pratiche nello sviluppo front-end perché la qualità del codice front-end è il fattore più decisivo di una grande applicazione web nella mia esperienza, ma la maggior parte degli sviluppatori non riesce a seguire queste pratiche e sviluppa i propri singoli componenti. Se gli sviluppatori front-end non seguono queste pratiche, sarà davvero difficile gestire il codice, non ci sarà coerenza nel design, e anche la velocità della web app avrà un impatto negativo. Seguire queste pratiche renderà il codice più pulito e facile da gestire, e aumenterà la produttività di tutti gli sviluppatori.

In questo articolo, parlerò delle migliori pratiche da seguire quando si struttura l’architettura front-end del progetto, si scrive il codice front-end e si prepara il deployment. Quindi iniziamo.

Quando si inizia il progetto, la prima cosa è strutturare correttamente l’architettura del codice front-end. E queste sono le migliori pratiche che ogni sviluppatore front-end del progetto deve seguire.

Strutturare il codice di stile

All’interno della cartella styles, creare cartelle separate per configurazioni, base, layout, componenti e pagine a seconda della vostra applicazione web. Usa un file di tipografia separato per definire dimensioni e colori per tutti i tag di testo HTML (come h1, h2,…) usati nell’applicazione web. I colori dovrebbero essere definiti in un file di variabili e assegnare i colori alle variabili con nomi appropriati e usare quelle variabili quando i colori devono essere applicati in tutto il sito web. Includi questi file di stile all’interno delle cartelle create in modo simile all’immagine sottostante.

Puoi poi importare questi file nel file di stile principale. Se stai usando scss nella tua applicazione web allora il file main.scss sarebbe simile al codice qui sotto.

Strutturare il codice JS

Fondamentalmente, strutturare il tuo JavaScript significa dividere i tuoi file e separare il tuo JavaScript da quello che viene da altri posti. Plugin, vendor e script sono le tre principali cartelle in cui possiamo dividere i file JS. I plugin includerebbero pezzi di codice utili che usiamo ovunque nella web app come i plugin jQuery, i venditori sarebbero codice JavaScript di terze parti come Frameworks e Librerie come la libreria slick, e la cartella scripts includerebbe gli script che scriviamo per la logica della nostra web app.