Il frontend non dorme mai! Ecco alcuni aggiornamenti, best practice e risorse degne di nota che sicuramente susciteranno il tuo interesse e miglioreranno i tuoi sforzi nello sviluppo.
Abbiamo assistito alla straordinaria presentazione di Tejas Kumar durante la Codemotion Conference 2023 a Milano, dove ha condiviso alcune delle ultime tendenze che caratterizzeranno il calendario dello sviluppo per il frontend nel 2024.
Questo articolo si basa in parte sul suo intervento e su alcune altre considerazioni condivise dalla community di Codemotion.
CSS Not Dead
CSS sta sfidando i detrattori ed emerge come un tool sempre più robusto. Nonostante le sue limitazioni intrinseche, CSS sta entrando in una nuova era con l’introduzione di funzionalità e framework all’avanguardia, in particolare Tailwind CSS.
Nuove funzionalità e risorse CSS
- Container Queries
La personalizzazione degli stili in base alle dimensioni del ‘contenitore’ apre possibilità dinamiche per design responsivi. Le container query forniscono un controllo più dettagliato, consentendo agli sviluppatori di regolare finemente l’aspetto degli elementi all’interno di contenitori specifici.
- Nesting
L’introduzione del nesting nei CSS semplifica la struttura dei fogli di stile, migliorandone la leggibilità e l’organizzazione. Il nesting consente agli sviluppatori di racchiudere gli stili all’interno di contesti specifici, semplificando la lettura del codice.
- Viewport Units
Con le viewport units, i CSS implementano uno strumento potente per il design responsivo. Gli sviluppatori possono specificare lunghezze e dimensioni relative alle dimensioni del viewport, garantendo un’esperienza utente fluida e adattabile su vari dispositivi.
- Tailwind CSS Toolkit
Nato nel 2017 ma cresciuto rapidamente in popolarità, Tailwind CSS sta facendo sempre più parlare di sé con promesse di miglioramento delle prestazioni, migliore esperienza dello sviluppatore e dimensioni di bundle ridotte. Tailwind è open-source e consente agli sviluppatori di utilizzare classi di utility preesistenti direttamente nel codice HTML.
Backend for the Frontend (BFF): una nuova dimensione nello sviluppo frontend
La distinzione tra frontend e backend è diventata più sfumata con l’introduzione dei pattern Backend for the Frontend (BFF). Questo approccio innovativo aggiunge uno strato di controllo per gli sviluppatori frontend, cercando di colmare il divario tra i due mondi. Vediamolo più da vicino.
Cos’è un modello BFF?
Il modello BFF (Backend for the Frontend) è un approccio di design per cui viene creato un servizio backend dedicato specificamente per soddisfare le esigenze di un’applicazione frontend. Invece di avere un backend “uno per tutti ” che serve più applicazioni frontend, ogni frontend ha a disposizione un suo backend personalizzato.
Qui alcune caratteristiche del pattern BFF.
- Data Fetching
- Il BFF fornisce agli sviluppatori frontend un controllo diretto sul recupero dei dati, consentendo una efficiente acquisizione e manipolazione dei dati per esperienze utente senza soluzione di continuità..
- Server-Side Rendering (SSR)
- Il concetto di BFF estende la sua influenza al rendering lato server, consentendo agli sviluppatori frontend di modellare come il contenuto viene generato e presentato, migliorando le prestazioni e le interazioni utente.
- Edge Computing
- Con il BFF, gli sviluppatori frontend possono sfruttare l’edge computing, avvicinando i processi di calcolo all’utente. Ciò si traduce in tempi di risposta più veloci e miglioramenti complessivi delle prestazioni..
Backend for the Frontend introduce un cambiamento di paradigma, concedendo agli sviluppatori frontend un controllo senza precedenti su aspetti tradizionalmente associati allo sviluppo backend. Questa nuova sinergia consente un approccio più coeso e efficiente alla costruzione delle moderne applicazioni web.
Progressive Web Apps (PWAs): il nuovo standard
Le Progressive Web Apps hanno ufficialmente consolidato il loro status di standard, ridisegnando il panorama delle applicazioni web.
Ma perchè le PWA sono destinate a spopolare? Ecco alcune ragioni :
Enhanced Reactivity: Gli utenti moderni richiedono applicazioni web altamente interattive e reattive. La reattività delle PWA gioca un ruolo cruciale nel soddisfare queste aspettative, garantendo aggiornamenti senza soluzione di continuità in tempo reale durante l’interazione degli utenti con i contenuti.
Funzionalità Cross Platform
Le Progressive Web Apps (PWA) sono progettate per funzionare in modo fluido su una vasta gamma di dispositivi e piattaforme, garantendo un’esperienza coerente e user-friendly sia che vengano utilizzate su desktop, tablet o altri dispositivi mobile. Questo favorisce anche l’accessibilità!
Miglioramento delle prestazioni
Al solito le prestazioni sono cruciali. Attraverso l’ottimizzazione delle tecniche di caricamento e l’implementazione di efficienti strategie di caching, le PWA migliorano le prestazioni complessive per un’esperienza utente più fluida.
Funzionalità offline
Una delle caratteristiche distintive delle PWA è la loro capacità di funzionare senza una connessione internet o in condizioni di rete scadenti. Attraverso l’uso di service worker ed di un caching efficace, poter funzionare anche senza connettività potenzia l’interazione dell’utente consentendogli di accedere ai contenuti e lavorare senza interruzioni.
Nuova generazione di framework e librerie
Framework leggeri o che scompaiono. Cosa significa? Questi nuovi framework cercano di semplificare le cose diventando più leggeri e intuitivi da usare. Frameworks come Qwik, Astro, SolidJS, e Svelte cercano di facilitare lo sviluppo offrendo soluzioni intuitive e leggere , riflettendo il trend del mercato sempre più orientato ad una ‘efficienza estrema
Questa nuova generazione di framework si concentra sulle prestazioni (una tendenza globale nello sviluppo software che va oltre il frontend) e permette di costruire siti web ricchi di contenuti ad alte prestazioni.
Questo è fondamentale perché la velocità del sito web non influisce solo sull’esperienza utente, ma sempre più studi dimostrano che le prestazioni del sito web influiscono notevolmente sulle vendite e sulle conversioni.
Sì, JavaScript continuerà a dettar legge anche nel 2024
Possiamo scommettere che JavaScript rimarrà sul trono del linguaggio più utilizzato nello sviluppo frontend. Secondo un sondaggio di Stack Overflow (link), il dominio di JavaScript rimarrà indiscusso anche nel 2024.
Mentre esploriamo le complessità dello sviluppo frontend nel 2024, un aspetto rimane invariato: il dominio indiscusso di JavaScript. Non siamo per niente prossimi alla fine di JavaScript, poiché i suoi punti di forza fondamentali (compatibilità con il browser, la sua potenza asincrona e la vasta comunità di sviluppatori) sembrano essere più forti che mai.
Scegliere gli strumenti frontend nel 2024
È impossibile avere il tempo di provare ogni nuovo framework, libreria o risorsa che appare ogni anno, tuttavia, questi sono gli aspetti più importanti che dovremmo considerare quando si è davanti a scelte per lo stack tecnologico nel frontend::
Aspetti chiave da considerare
- Le prestazioni sono fondamentali
- Occorre dare priorità agli strumenti che contribuiscono a prestazioni ottimali, garantendo esperienze utente rapide ed efficienti..
- Dimensione del bundle
- Minimizzare le dimensioni del bundle è cruciale per tempi di caricamento più veloci e prestazioni complessivamente migliori.
- Proprie necessità
- Scegliamo strumenti che migliorano l’esperienza dello sviluppatore e di conseguenza quella dell’intero team aziendale. Non inseguire mai tutte le novità senza aver prima fatto delle considerazioni ponderate
