Chrome collabora con framework open source per migliorare il web
Chrome contribuisce attivamente all'ecosistema del framework web e il nostro discorso al Chrome Dev Summit 2019 riguarda ciò su cui abbiamo lavorato nell'ultimo anno.
Continua a leggere per un esteso riepilogo dell'intervento con ulteriori risorse e dettagli.
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 su Chrome, in modo che gli sviluppatori possano disporre di funzionalità che li aiutino a creare ottime pagine web. Cerchiamo inoltre di migliorare i siti web già in produzione, contribuendo in molti modi agli strumenti open source.
La maggior parte degli sviluppatori web si affida a strumenti open source ove possibile e preferisce non creare un'infrastruttura completamente personalizzata. I framework JavaScript lato client e le librerie UI costituiscono una parte crescente dell'utilizzo open source. I dati sui tre framework e librerie lato client più popolari, React, Angular e Vue, mostrano che:
- Il 72% dei partecipanti al primo sondaggio annuale di MDN per sviluppatori e designer utilizza almeno uno di questi framework e librerie.
- Oltre 320.000 siti dei primi 5 milioni di URL analizzati da HTTP Archive utilizzano almeno uno di questi framework e librerie.
- Quando sono raggruppati per tempo, 30 dei primi 100 URL utilizzano almeno uno di questi framework e librerie. Sono state condotte delle ricerche 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 lavorare direttamente con gli autori di framework e librerie esterni.
Contributi ai framework web
I framework comunemente utilizzati 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 (tramite un modello di componente, ad esempio).
- Framework web, come Next.js, Nuxt.js e Gatsby, che forniscono un sistema end-to-end con funzionalità "guidate" integrate, come il rendering lato server. Questi framework di solito utilizzano una libreria o un framework UI per il livello di visualizzazione.
Gli sviluppatori possono scegliere di non utilizzare i framework ma, mettendo insieme una libreria del livello di visualizzazione, un router, un sistema di stile, un renderer del server e così via, spesso finiscono per creare il proprio tipo di framework. Per impostazione predefinita, i framework per il Web si occupano di molti di questi problemi, per impostazione predefinita.
Il resto di questo post evidenzia molti miglioramenti che di recente sono stati applicati a framework e strumenti diversi, tra cui il contributo del team di Chrome.
Angular
Il team di Angular ha apportato 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 per la sintassi di importazione dinamica standard per le route di caricamento lento.
- Supporto dei web worker per eseguire operazioni in un thread in background separato dal thread principale.
- Ivy, il nuovo motore di rendering di Angular che offre migliori prestazioni di ricompilazione e una riduzione delle dimensioni dei bundle, è disponibile in modalità di anteprima per i progetti esistenti.
Per saperne di più su questi miglioramenti, consulta la "Versione 8 di Angular" e il team di Chrome non vede l'ora di collaborare a stretto contatto con questi miglioramenti l'anno prossimo, man mano che verranno aggiunte altre funzionalità.
Next.js
Next.js è un framework web che utilizza React come livello di visualizzazione. Oltre a un modello di componente UI che molti sviluppatori si aspettano da un framework lato client, Next.js offre una serie di funzionalità predefinite integrate:
- Routing con suddivisione del codice predefinita
- Compilazione e raggruppamento (utilizzando Babel e webpack)
- Rendering lato server
- Meccanismi per recuperare i dati a livello di pagina
- Stile incapsulato (con styled-jsx)
Next.js esegue l'ottimizzazione in funzione delle dimensioni ridotte dei bundle e il team di Chrome ha aiutato a identificare le aree in cui potremmo contribuire a migliorare ulteriormente le prestazioni. Puoi scoprire di più su ciascuno di essi visualizzando le relative richieste di commenti (RFC) e richieste di pull (PR):
- Una strategia di chunking migliorata per i webpack che emette bundle più granulari, riducendo la quantità di codice duplicato recuperato tramite più route (RFC, PR).
- Caricamento differenziale con il pattern/nomodule, che può ridurre la quantità totale di JavaScript nelle app Next.js fino al 20% senza modifiche al codice (RFC, PR).
- Miglioramento del monitoraggio delle metriche di rendimento che utilizza l'API User Timing (PR).
Stiamo anche esplorando altre funzionalità per migliorare l'esperienza degli utenti e degli sviluppatori nell'utilizzo di Next.js, ad esempio:
- Attivazione 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 le risorse generate per visualizzare errori e avvisi migliori (RFC).
Nuxt.js
Nuxt.js è un framework web che combina Vue.js con diverse librerie per fornire una configurazione "guidata". Analogamente a Next.js, include molte funzionalità preconfigurate:
- Routing con suddivisione del codice predefinita
- Compilazione e raggruppamento (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 framework per fornire supporto monetario a framework e librerie più open source. Grazie al nostro recente supporto per Nuxt.js, alcune funzionalità sono previste per il prossimo futuro, tra cui un rendering più intelligente dei server e ottimizzazioni delle immagini.
Babel
Abbiamo anche fatto progressi per migliorare le prestazioni di un importante strumento sottostante in quasi tutti i framework menzionati, Babel.
Babel compila il codice contenente la sintassi più recente nel codice che i diversi browser sono in grado di comprendere.
È prassi comune utilizzare @babel/preset-env per scegliere come target browser moderni in cui è possibile specificare target dei browser diversi per fornire il polyfilling necessario per tutti gli ambienti selezionati. 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 una nuova preimpostazione:
@babel/preset-modules. Anziché convertire la sintassi moderna
in una sintassi meno recente per evitare bug del browser, preset-modules corregge ogni bug specifico trasformando
la sintassi moderna più simile possibile e senza interruzioni. Ne consegue un codice moderno che può essere fornito quasi non modificato per la maggior parte dei browser.
Anche gli sviluppatori che utilizzano già preset-env potranno usufruire di queste ottimizzazioni senza dover fare nulla, poiché presto verranno incorporate anche in preset-env.
Passaggi successivi
Lavorare a stretto contatto con framework e librerie open source per offrire esperienze migliori aiuta il team di Chrome a capire ciò che è fondamentale sia per gli utenti che per gli sviluppatori.
Se lavori su un framework web, una libreria UI o qualsiasi forma di strumenti web (bundler, compiler, linter), richiedi il fondo del framework.