Rispetto allo sviluppo del back-end, lo sviluppo del front-end non ha sempre prestato l’attenzione di cui ha bisogno.
JavaScript era precedentemente disprezzato da molti tecnologi. Tuttavia, i tempi sono cambiati. L’introduzione delle tecnologie open source ha accelerato la crescita delle app web.
Come risultato di questo progresso, praticamente ogni azienda di software ora utilizza il JavaScript e gli strumenti più recenti come Eslint, Babel e Webpack invece di jQuery.
Al giorno d’oggi, l’avantreno si muove a un ritmo vertiginoso con cui è difficile tenere il passo.
Questo articolo parla di stare al passo con le tendenze di sviluppo in questo campo nel 2022. Forse scoprirai qualcosa di utile in queste mode.
Svelte sta diventando sempre più popolare.
Svelte è una nuovissima tecnologia che, in linea di principio, è uscita troppo tardi per competere con React, Vue e Angular. Tuttavia, sta crescendo in popolarità a un ritmo senza precedenti.
È stato nominato il framework front-end più popolare dagli utenti di StackOverflow nel 2021.
Svelte, d’altra parte, è più di questo. È un compilatore che crea un front-end ottimizzato.
Svelte, a differenza di altri framework popolari, non viene importato nell’applicazione. Il codice Svelte, d’altra parte, è compilato in puro JavaScript. Ciò consente a Svelte di superare framework come React e Vue in termini di velocità.
Il framework Svelte è semplice da usare. Ecco un esempio di come potrebbero essere utilizzati i moduli stato +:
I moduli vengono gestiti in modo semplice e bello, proprio come erano prima dell’avvento delle strutture SPA. Gli oggetti di scena OnChange non devono essere collegati agli ingressi.
Il markup e la logica coesistono, incapsulando la logica e fornendo uno strato visivo.
Non sorprende che il framework stia guadagnando popolarità nella comunità. Sarà solo questione di tempo prima che Svelte veda la creazione di nuove piattaforme popolari.
React, Vue e Angular non stanno andando da nessuna parte.
Ho iniziato il mio viaggio nel front-end subito prima dell’uscita di Angular 2 circa sei anni fa. Non posso dirti quante volte ho letto da allora che Vue, React o Angular è morto.
Tuttavia, la realtà si è rivelata piuttosto diversa. Dalla loro introduzione, ciascuno di questi tre framework è cresciuto in importanza.
Vale la pena notare che la popolarità di Angular è aumentata di un fattore 10. React e Vue sono cresciuti ancora più rapidamente. I casi d’uso supportati da tutti e tre i framework sono quasi identici.
Ciò implica che uno qualsiasi dei tre framework che scegli sarà utilizzato e mantenuto per molti anni a venire.
Vale la pena notare che non ci sono state modifiche sostanziali a React nel 2021. Tuttavia, la velocità con cui si sta adattando è incredibile. È molto probabilmente a causa dell’ecologia della tecnologia. La maggior parte delle librerie e dei framework di accompagnamento sono disponibili per React.
Next e Gatsby sono due ottimi esempi. Quest’ultimo fa parte dei trasgressori della seguente tendenza.
Sia le pagine statiche che quelle dinamiche devono essere supportate da framework.
Definiamo pagine statiche e dinamiche in termini di pratica.
Quando un utente apre una pagina dinamica, recupera ed elabora il contenuto. Durante il processo di costruzione, le pagine statiche sono predefinite. Vengono creati come file indipendenti sul CD. Potrebbero sembrare dinamici, ma richiedono meno sforzo dal browser dell’utente.
Potresti avere una singola pagina di prodotto dinamica o centinaia di pagine di prodotto statiche, una per ogni prodotto, se hai un negozio.
Le pagine statiche sono più performanti per gli utenti, ma richiedono molto tempo per essere create.
La popolarità dei framework di applicazioni a pagina singola (SPA) come React e Vue ha portato all’abbandono delle pagine statiche. Li hanno anche riportati in favore.
Il materiale dinamico generato dalle SPA è spesso significativamente più lento del contenuto HTML pronto per la visualizzazione. Quando la pagina sta scaricando i dati dal server, la differenza è più evidente. Tali dati dovrebbero normalmente essere scaricati ed elaborati da una pagina dinamica.
Di conseguenza sono nate pagine statiche nelle SPA. Gatsby ha risolto questo problema creando un framework e un’infrastruttura React per le pagine statiche.
Un sito Web statico, come un blog, un portfolio o anche una piattaforma di corsi freeCodeCamp, sarà notevolmente più veloce. Anche il rendering lato server, come è comune con Next.js, non garantisce prestazioni più veloci (Fonte: Sidney Alcantara).
In altri framework, come Vue o Svelte, l’attenzione al tempo per la prima pittura di contenuto porta a una vasta gamma di metodi per la creazione di pagine statiche.
Le pagine statiche, d’altra parte, sono difficili da crescere fino a milioni di pagine. In genere dovresti utilizzare le pagine dinamiche se stai creando un’app con molto materiale modificabile, come i profili utente. Entrambi gli approcci alla gestione dei contenuti sono qui per restare.
Le piattaforme trasformano i singoli programmatori in grandi organizzazioni IT.
Le piattaforme che accelerano lo sviluppo del front-end hanno invaso il mercato negli ultimi anni. Questo è importante perché consente a piccoli gruppi di muoversi rapidamente.
Usando Twilio o Agora.io, puoi integrare rapidamente i video. Utilizzando Firebase, Amazon Cognito o Okta, puoi integrare rapidamente l’autenticazione (Okta ha anche acquisito Auth0).
È particolarmente importante discutere di come distribuire il codice front-end in modo automatico e globale. Vercel, Gatsby Cloud e Netlify sono le tre opzioni più popolari. In 5 minuti, possono trasformare un singolo ingegnere front-end con un account GitHub nel reparto DevOps completo.
Gatsby Cloud è esclusivamente per React, ma rende quasi troppo semplice gestire un gran numero di pagine statiche. È probabilmente la soluzione migliore se stai creando un’app Gatsby.
Vercel supporta tutti i principali framework, inclusi i framework lato server come Next.js, creato dai fondatori dell’azienda. Vercel renderà la tua vita molto più semplice se stai lavorando su un programma renderizzato lato server.
Netlify è un framework lato client che si concentra su React e Vue puri. Ha una serie di funzioni utili, inclusi moduli predefiniti, autenticazione e servizi serverless. Per le tipiche applicazioni lato client, ritengo che sia l’opzione migliore.
Shuffle.dev è un perdente che vale la pena evidenziare. In pochi secondi, può generare un layout di sito Web professionale in modo casuale. Offre un ampio numero di temi e framework CSS e nuove funzionalità e materiale vengono aggiunti settimanalmente. Lo usiamo molto su CodeAlly.io per accelerare la prototipazione.
L’ottimizzazione del front-end è fondamentale.
Negli ultimi anni, il front-end ha completato un cerchio completo. I siti Web leggeri diventano piattaforme pesanti con lunghi tempi di rendering. Alcuni ricorderanno quando Slack stava usando la versione di sviluppo di React (Fonte: Robert Pankowecki). La tendenza a rendere le SPA più veloci esiste da anni, ma continua a guadagnare terreno.
Le librerie che hanno un’influenza dannosa sulla velocità, come Moment.js, vengono sostituite con alternative più leggere e veloci, come Day.js. Altri vengono rifattorizzato per ridurre al minimo le dimensioni del pacchetto. Material UI e Lodash sono due esempi.
Sentry, il leader del settore nella registrazione degli errori, ha appena iniziato a concentrarsi sulla riduzione al minimo delle dimensioni dei pacchetti. C’è una crescente attenzione nell’ecosistema front-end sull’utilizzo del caricamento lento, sul rendering del front-end sul server o sull’utilizzo di file CSS invece di applicare uno stile all’applicazione utilizzando JavaScript, come nel caso dei componenti con stile, ad esempio.
Tailwind ha recentemente acquisito molta trazione e senza dubbio continuerà a farlo nel 2022. Fa un lavoro migliore di qualsiasi altro strumento CSS nel ridurre i tempi di caricamento delle applicazioni.
Tuttavia, ha una curva di apprendimento severa. Il codice di Tailwind è notoriamente difficile da decifrare.
Linaria è un’altra cosa che consiglio vivamente. Linaria unisce i vantaggi dei componenti in stile con le prestazioni dei file CSS statici.
Di conseguenza, ottieni un’esperienza di sviluppo eccezionale e un front-end fulmineo.
Conclusione
Le cose si sono mosse molto più lentamente quando ho iniziato. C’è molta innovazione in corso e il front-end sta cambiando a un ritmo rapido.
I nuovi programmatori con poca o nessuna esperienza possono anche utilizzare le sfide di codifica VSCode e Docker integrate per dimostrare le proprie capacità.
