Novità dei framework JavaScript (maggio 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Può essere difficile tenere il passo con tutto ciò che riguarda i framework JavaScript. Questo documento fornisce una breve sintesi degli eventi più recenti nell'ecosistema dei framework JavaScript nell'ultimo anno. Per una discussione più lunga su alcuni di questi argomenti, guarda l'articolo corrispondente Esplorare l'ecosistema dei framework JavaScript dell'evento Google I/O di quest'anno.

Grafico che mette a confronto le funzionalità del framework

Come mostrato nel grafico, i framework JavaScript convergono su una serie di funzionalità e architetture simili. Questi includono un'architettura basata su componenti, il routing basato su file e il supporto moderno di SSR. Questa convergenza dimostra la maturità e l'evoluzione dell'ecosistema man mano che i framework apprendono gli uni dagli altri e adottano le best practice.

Allo stesso tempo, diverse tendenze recenti (come componenti server e approcci diversi alla reattività granulare) continuano a distinguere i singoli framework. Per comprendere meglio queste tendenze, le esaminiamo un framework alla volta.

Angular

Le recenti release di Angular hanno apportato una serie di cambiamenti significativi tra cui indicatori, visualizzazioni differibili, NgOptimziedImage, idratazione non distruttiva e idratazione parziale. Alcune caratteristiche principali includono:

  • Indicatori: gli indicatori sono un approccio utilizzato da più framework (incluso Angular) per il monitoraggio dello stato in un'applicazione. Angular Signals può migliorare le prestazioni di runtime, tra cui Interaction to Next Paint (INP), riducendo il numero di calcoli che devono essere eseguiti durante il rilevamento delle modifiche.
  • Visualizzazioni differibili: le viste differibili consentono di rinviare il caricamento di componenti, direttive e tubi specifici. Ad esempio, puoi posticipare il caricamento di una dipendenza fino a quando il contenuto entra nel visualizzatore o fino a quando il thread principale non è inattivo.
  • NgOptimizedImage: NgOptimizedImage è un componente immagine per Angular che automatizza l'adozione delle best practice per il caricamento delle immagini.
  • Idratazione non distruttiva: l'idratazione non distruttiva corregge lo sfarfallio che si verificava quando il DOM delle app Angular con rendering lato server veniva ricreato sul lato client.
  • Idratazione parziale: il team di Angular rilascerà presto l'anteprima per gli sviluppatori dell'idratazione parziale. Con l'idratazione parziale, per impostazione predefinita, il browser non carica alcun codice JavaScript della pagina quando viene visualizzata. Invece, parti specifiche della pagina vengono idratate quando l'utente interagisce con la pagina.

Astrofotografia

Astro, un moderno strumento per la creazione di siti statici, ha riscosso successo con il suo approccio innovativo allo sviluppo web. Con particolare attenzione alle prestazioni e all'esperienza di sviluppo, Astro ha rilasciato diversi aggiornamenti e funzionalità interessanti:

  • Isole Astro: Astro Islands consente agli sviluppatori di creare componenti interattivi dell'interfaccia utente isolati dal resto della pagina. Questo consente aggiornamenti efficienti e prestazioni ottimali.
  • Rendering ibrido: Astro ora supporta il rendering ibrido, combinando i vantaggi della generazione di siti statici e del rendering lato server per una maggiore flessibilità.
  • Componenti Image e Picture: Astro ha introdotto nuovi componenti Image e Picture che semplificano la gestione delle immagini e forniscono un'ottimizzazione automatica.
  • Supporto della visualizzazione delle transizioni: Astro offre supporto integrato per l'API View Transiziones per ottenere transizioni di pagina fluide e senza interruzioni.
  • Barra degli strumenti di Astro Dev. La barra degli strumenti Astro Dev offre un insieme efficace di strumenti per il debug e l'ottimizzazione delle applicazioni Astro.

React

L'anno scorso, il release dei componenti del server React ha introdotto un nuovo approccio ai componenti di React. Da allora il team di React ha lavorato a una serie di nuove funzionalità, tra cui le funzionalità React Compiler e Server Actions, nonché:

  • Componenti server: i componenti server di reazione sono componenti che recuperano i dati e vengono sottoposti a rendering sul server prima di essere trasmessi al client. In questo modo le operazioni di rendering vengono trasferite al server e riduce la quantità di codice che deve essere inviata al client.
  • Compilatore di React: il compilatore di React è un compilatore in grado di memorizzare automaticamente i componenti. Ciò migliora le prestazioni riducendo le visualizzazioni non necessarie. Il team di React ha dichiarato che gli sviluppatori potranno adottare il compilatore di React senza apportare modifiche al codice.
  • Azioni del server: le azioni del server consentono la comunicazione client-server. Con Azioni server, puoi definire funzioni lato server che possono essere richiamate direttamente dai tuoi componenti React, eliminando la necessità di chiamate API manuali e di una gestione complessa dello stato. Ciò può essere particolarmente utile per operazioni come le mutazioni dei dati e l'invio di moduli.
  • Caricamento asset: React sta lavorando alle API dichiarative per il precaricamento e il caricamento di asset, come script, stili, caratteri e immagini.
  • Rendering off schermo: React sta lavorando anche al rendering fuori schermo. Il rendering offscreen è una funzionalità imminente di React per il rendering delle schermate in background, senza ulteriore overhead per le prestazioni. Puoi considerarlo come una versione della proprietà CSS di visibilità dei contenuti che funziona non solo per gli elementi DOM ma anche per i componenti React."

Remix

Remix, un framework web full stack, sta guadagnando terreno nella community degli sviluppatori. Grazie all'attenzione posta sui concetti fondamentali del web e all'esperienza migliorata degli sviluppatori, Remix ha introdotto diversi aggiornamenti degni di nota:

  • Release 2.0 di Remix: Remix 2.0, rilasciato a settembre 2023, ha apportato miglioramenti significativi e nuove funzionalità al framework.
  • Supporto stabile per Vite: Remix ora offre un supporto stabile per Vite, uno strumento di creazione veloce e leggero, che fornisce build di sviluppo più veloci e prestazioni migliorate.
  • Modalità SPA: il remix ha introdotto la modalità SPA, che consente di creare siti puramente statici senza richiedere un server JavaScript in produzione. Ciò consente agli sviluppatori di utilizzare le potenti funzionalità di Remix, come il routing basato su file, la suddivisione automatica del codice e altro, mantenendo la semplicità del deployment statico del sito.

Next.js

Il rilascio di Next.js 13.4 a maggio 2023 è stato particolarmente degno di nota in quanto ha introdotto un supporto stabile per i componenti del server React, lo streaming e Suspense. Da allora, Next.js continua a sviluppare il supporto per le nuove API React (ad esempio Server Actions) e a iterare l'esperienza degli sviluppatori attraverso iniziative come Turbopack. Altre caratteristiche principali includono:

  • App Router: il router delle app, che è diventato stabile in Next.js 13.4, è un nuovo modo di strutturare e gestire il routing nelle applicazioni Next.js. App Router è un prerequisito per l'utilizzo delle nuove funzionalità Next.js, come layout condivisi e routing nidificato, nonché nuove API React come React Server Componenti, Suspense e Azioni del server nell'app Next.js.

  • Turbopack: approccio sperimentale al rendering delle pagine basato sull'API suspense di React. Il prerendering parziale esegue il rendering di una pagina utilizzando una shell di caricamento statica. Tuttavia, la shell lascia dei "buchi" per i contenuti dinamici all'interno della pagina, che vengono caricati in modo asincrono. Questo offre i vantaggi in termini di prestazioni di una pagina statica che può essere memorizzata nella cache e al contempo può incorporare dati dinamici nei contenuti della pagina.

Vue

La release più recente di Vue, Vue 3.4, includeva una serie di miglioramenti delle prestazioni. Vue sta anche lavorando a Vue Vapor, anch'esso orientato alle prestazioni. Ecco alcuni punti salienti di ciò che accade in questo spazio:

  • Rilascio di Vue 3.4: le funzionalità includono "un parser completamente riscritto che è due volte più veloce e una compilazione SFC più veloce e un sistema di reattività refactoring che migliora l'efficienza di ricalcolo."
  • Vue Vapor Mode: Vue sta lavorando alla Vapor Mode, una strategia di compilazione con possibilità di attivazione e orientata alle prestazioni che funziona con i componenti singoli di Vue. La modalità vapore genera un codice con prestazioni migliori rispetto a quello attualmente prodotto dal compilatore Vue. Inoltre, l'utilizzo della modalità vapore con tutti i componenti elimina la necessità di utilizzare il DOM virtuale Vue (che riduce le dimensioni dei bundle).
  • Vue 2 raggiunge la fine del ciclo di vita: la fine del ciclo di vita di Vue 2 era il 31 dicembre 2023. Tuttavia, Vue 2 è ancora ampiamente utilizzato: circa il 50% dei download di pacchetti Vue npm è destinato a Vue 2.

Nuxt

Nuxt si sta avvicinando al rilascio di Nuxt 4. Oltre alle frequenti release di framework di Nuxt nell'ultimo anno, l'ecosistema dei moduli Nuxt è cresciuto fino a quasi 220 moduli. Alcuni recenti sviluppi in questo spazio includono:

Tinta unita

Solid ha lavorato per la release stabile 1.0 del loro meta-framework SolidStart. SolidStart vanta una reattività granulare, il routing isomorfico e il supporto per una serie di modalità di rendering. Le caratteristiche principali includono:

  • Reattività granulare: il sistema di reattività di Solid consente aggiornamenti precisi e prestazioni ottimali, consentendo un rendering e una gestione dello stato efficienti.
  • Routing isomorfico: SolidStart offre un approccio unificato al routing, consentendo agli sviluppatori di definire route che funzionino senza problemi sia sul client che sul server.
  • Modalità di rendering flessibili: SolidStart supporta diverse modalità di rendering, tra cui rendering lato server, generazione di siti statici e rendering lato client, offrendo agli sviluppatori la flessibilità di scegliere l'approccio migliore per la loro applicazione.

Svelto

Nell'ultimo anno, il team di Svelte si è concentrato sulla prossima release di Svelte 5, che sarà significativa. Altre caratteristiche principali includono:

  • Svelte 5 è in arrivo: Oltre a includere una "riscrittura del compilatore e del runtime Svelte", Svelte 5 introduce anche il concetto di Rune.
  • Esecuzioni annunciate: le rune sono una funzionalità imminente in Svelte 5. "Le esecuzioni sbloccano la reattività universale e granulare... Con le rune, la reattività va oltre i limiti dei tuoi file .svelte... La reattività di Svelte 5 è alimentata dagli indicatori. Tuttavia, [a differenza di altri framework], in Svelte 5 gli indicatori sono un dettaglio di implementazione approfondito piuttosto che qualcosa con cui interagisci direttamente."
  • Rilasciato SvelteKit 2: SvelteKit è il meta-framework di Svelte. Le funzionalità di questa release includono routing superficiale e supporto di Vite 5.

Aurora di Chrome

Chrome Aurora è un team di Google che collabora con vari framework web open source per migliorare l'esperienza utente, in particolare le prestazioni, sul web. Ecco alcune delle iniziative a cui abbiamo contribuito nell'ultimo anno:

Conclusione

L'ecosistema del framework JavaScript continua a evolversi a un ritmo rapido, con ogni framework che apporta il proprio insieme di innovazioni e miglioramenti. Se ti interessano le funzionalità più recenti di framework consolidati come Angular, React e Vue, o le opzioni più recenti come Astro, Remix e Solid, non mancano di certo gli entusiasmanti sviluppi a cui tieni il passo.

In qualità di sviluppatori, essere informati su questi progressi ci aiuta a prendere decisioni consapevoli al momento di scegliere un framework per i nostri progetti. Comprendendo i punti di forza e le caratteristiche uniche di ciascun framework, possiamo selezionare quello più in linea con i requisiti del progetto e le preferenze di sviluppo.

Ci auguriamo che questa panoramica ti abbia fornito un'idea dello stato attuale dei framework JavaScript. Per approfondire gli argomenti trattati in questo post, assicurati di dare un'occhiata alla conferenza Google I/O. Buona programmazione!