Chrome collabora con i framework open source per migliorare il web
Chrome contribuisce attivamente all'ecosistema dei framework web e il nostro intervento al Chrome Dev Summit 2019 ha riguardato il lavoro svolto nell'ultimo anno.
Continua a leggere per un riepilogo esteso dell'intervento con dettagli e risorse aggiuntivi.
Come possiamo migliorare il web?
L'obiettivo di tutti i membri del team di Chrome è migliorare il web. Lavoriamo per migliorare le API del browser e V8, il motore JavaScript e WebAssembly di base che alimenta Chrome, in modo che gli sviluppatori dispongano di funzionalità che li aiutino a creare pagine web di alta qualità. Inoltre, cerchiamo di migliorare i siti web già in produzione contribuendo in molti modi agli strumenti open source.
La maggior parte degli sviluppatori websi affida a strumenti open source quando possibile e preferisce non creare un'infrastruttura completamente personalizzata. I framework JavaScript lato client e le librerie UI costituiscono una parte crescente dell'utilizzo dell'open source. I dati sui tre framework e librerie lato client più diffusi, React, Angular, e Vue, mostrano che:
- Il 72% dei partecipanti al primo sondaggio annuale di MDN su sviluppatori e designer web utilizza almeno uno di questi framework e librerie.
- Oltre 320.000 siti nei primi 5 milioni di URL analizzati da HTTP Archive utilizzano almeno uno di questi framework e librerie.
- Se raggruppati in base al tempo trascorso, 30 dei primi 100 URL utilizzano almeno uno di questi framework e librerie. (La ricerca è stata eseguita su dati interni.)
Ciò significa che strumenti open source migliori possono portare direttamente a un web migliore ed è per questo che gli ingegneri di Chrome hanno iniziato a collaborare direttamente con gli autori di framework e librerie esterni.
Contributi ai framework web
I framework di uso comune per creare e strutturare le pagine web rientrano in due categorie:
- Framework UI (o librerie), come Preact, React o Vue, che forniscono il controllo sul livello di visualizzazione di un'applicazione (ad esempio tramite un modello di componenti).
- Framework web, come Next.js, Nuxt.js e Gatsby, che forniscono un sistema end-to-end con funzionalità integrate, come il rendering lato server. Questi framework in genere utilizzano un framework o una libreria UI per il livello di visualizzazione.
Gli sviluppatori possono scegliere di non utilizzare i framework, ma assemblando una libreria di livelli di visualizzazione, un router, un sistema di stili, un renderer server e così via, spesso finiscono per creare un proprio tipo di framework. Sebbene siano opinabili, i framework web si occupano di molte di queste problematiche per impostazione predefinita.
Il resto di questo post evidenzia molti miglioramenti apportati di recente a diversi framework e strumenti, inclusi i contributi del team di Chrome.
Angular
Il team di Angular ha rilasciato una serie di miglioramenti alla versione 8 del framework:
- Caricamento differenziale per impostazione predefinita per ridurre al minimo i polyfill non necessari per i browser più recenti.
- Supporto della sintassi di importazione dinamica standard per le route a caricamento lento.
- Supporto dei web worker per eseguire le operazioni in un thread in background separato dal thread principale.
- Ivy, il nuovo motore di rendering di Angular che offre prestazioni di ricompilazione migliori e una riduzione delle dimensioni dei pacchetti, è disponibile in modalità di anteprima per i progetti esistenti.
Puoi scoprire di più su questi miglioramenti in "Versione 8 di Angular" e il team di Chrome non vede l'ora di collaborare strettamente con loro nel prossimo anno man mano che vengono rilasciate altre funzionalità.
Next.js
Next.js è un framework web che utilizza React come livello di visualizzazione. Oltre a un modello di componenti UI che molti sviluppatori si aspettano da un framework lato client, Next.js fornisce una serie di funzionalità predefinite integrate:
- Routing con suddivisione del codice predefinita
- Compilazione e creazione di pacchetti (utilizzando Babel e webpack)
- Rendering lato server
- Meccanismi per recuperare i dati a livello di pagina
- Stili incapsulati (con styled-jsx)
Next.js è ottimizzato per ridurre le dimensioni dei pacchetti e il team di Chrome ha contribuito a identificare le aree in cui potevamo contribuire a migliorare ulteriormente le prestazioni. Puoi scoprire di più su ciascuno di essi visualizzando le richieste di commenti (RFC) e le richieste di pull (PR):
- Una strategia di suddivisione dei blocchi webpack migliorata che genera pacchetti più granulari, riducendo la quantità di codice duplicato recuperato tramite più route (RFC, PR).
- Caricamento differenziale con il pattern module/nomodule che può ridurre la quantità totale di JavaScript nelle app Next.js fino al 20% senza modifiche al codice (RFC, PR).
- Monitoraggio delle metriche sul rendimento migliorato che utilizza l'API User Timing (PR).
Stiamo anche esplorando altre funzionalità per migliorare l'esperienza utente e sviluppatore di Next.js, ad esempio:
- Abilitazione della modalità simultanea per sbloccare l'idratazione progressiva o parziale dei componenti.
- Un sistema di conformità basato su webpack che analizza tutti i file di origine e gli asset generati per mostrare errori e avvisi migliori (RFC).
Nuxt.js
Nuxt.js è un framework web che combina Vue.js con diverse librerie per fornire una configurazione opinabile. Analogamente a Next.js, include molte funzionalità predefinite:
- Routing con suddivisione del codice predefinita
- Compilazione e creazione di pacchetti (utilizzando Babel e webpack)
- Rendering lato server
- Recupero asincrono dei dati per ogni pagina
- Datastore predefinito (Vuex)
Oltre a lavorare direttamente per migliorare le prestazioni di diversi strumenti, abbiamo ampliato il fondo per i framework per fornire supporto monetario a un numero maggiore di framework e librerie open source. Con il nostro recente supporto a Nuxt.js, alcune funzionalità dovrebbero essere rilasciate a breve, tra cui il rendering lato server più intelligente e le ottimizzazioni delle immagini.
Babel
Abbiamo anche fatto progressi nel miglioramento delle prestazioni di uno strumento sottostante importante in quasi tutti i framework menzionati: Babel.
Babel compila il codice che contiene una sintassi più recente in codice che i diversi browser possono comprendere.
È diventato comune utilizzare @babel/preset-env per scegliere come target
i browser moderni in cui è possibile specificare diversi target di browser per fornire il polyfill necessario
per tutti gli ambienti scelti. Un modo per specificare i target è utilizzare <script
type="module"> per scegliere come target tutti i browser che supportano i moduli ES.
Per ottimizzare questo caso, abbiamo lanciato un nuovo preset:
@babel/preset-modules. Invece di convertire la sintassi moderna in sintassi precedente per evitare bug del browser, preset-modules corregge ogni bug specifico trasformando la sintassi moderna non interrotta più vicina possibile. Il risultato è un codice moderno che può essere fornito quasi senza modifiche alla maggior parte dei browser.
Anche gli sviluppatori che utilizzano già preset-env trarranno vantaggio da queste ottimizzazioni senza dover fare nulla, in quanto verranno presto incorporate anche in preset-env.
Passaggi successivi
La stretta collaborazione con i framework e le librerie open source per offrire esperienze migliori aiuta il team di Chrome a capire cosa è fondamentalmente importante per utenti e sviluppatori.
Se lavori su un framework web, una libreria UI o qualsiasi forma di strumento web (bundler, compilatore, linter), fai domanda per il fondo per i framework!