Il team di Chrome si impegna per garantire un'esperienza utente ottimale e un ecosistema web fiorente. Vogliamo che gli utenti abbiano la migliore esperienza possibile sul web, non solo con i documenti statici, ma anche quando utilizzano applicazioni ricche e altamente interattive.
Gli strumenti e i framework open source svolgono un ruolo fondamentale nel consentire agli sviluppatori di creare app moderne per il web, supportando al contempo esperienze di sviluppo ottimali. Questi framework e strumenti consentono ad aziende di tutte le dimensioni e a privati di creare contenuti per il web.
Riteniamo che i framework possano svolgere un ruolo importante anche nell'aiutare gli sviluppatori con aspetti chiave della qualità come prestazioni, accessibilità, sicurezza e idoneità al mobile. Invece di chiedere a ogni sviluppatore e proprietario di siti di diventare un esperto in queste aree e di stare al passo con le best practice in continua evoluzione, il framework può supportarle con soluzioni integrate. In questo modo, gli sviluppatori possono concentrarsi sulla creazione delle funzionalità del prodotto.
In poche parole, la nostra visione è che un livello elevato di qualità dell'esperienza utente diventa un effetto collaterale della creazione per il web.
Aurora: una collaborazione tra Chrome e framework e strumenti web open source
Da quasi due anni collaboriamo con alcuni dei framework più popolari, come Next.js, Nuxt e Angular, per migliorare il rendimento del web. Abbiamo anche finanziato strumenti e librerie popolari come Vue, ESLint e webpack. Oggi, abbiamo scelto un nome per questo impegno: Aurora.
Un'aurora è un gioco di luci naturale che scintilla nel cielo. Dato che stiamo cercando di migliorare le esperienze utente create con i framework, abbiamo pensato che questo nome fosse una scelta appropriata.
Nei prossimi mesi condivideremo molti altri dettagli su Aurora. Si tratta di una collaborazione tra un piccolo team di ingegneri di Chrome (nome in codice interno WebSDK) e gli autori del framework. Il nostro obiettivo è offrire la migliore esperienza utente possibile per le app di produzione, indipendentemente dal browser in cui viene eseguito il rendering.
Qual è la nostra strategia?
In Google abbiamo imparato molto utilizzando framework e strumenti per creare e manutenere applicazioni web su larga scala come Ricerca Google, Maps, Ricerca immagini, Google Foto e così via. Abbiamo scoperto in che modo i framework possono svolgere un ruolo fondamentale per la qualità prevedibile delle app fornendo valori predefiniti e strumenti opinabili.
I framework hanno un punto di vista unico per influenzare sia l'esperienza utente sia quella di sviluppo, in quanto coprono l'intero sistema: il client e il server, gli ambienti di sviluppo e di produzione e integrano strumenti come compilatori, bundler, lint e così via.
Quando le soluzioni sono integrate nel framework, i team di sviluppatori possono utilizzarle e dedicare il proprio tempo a ciò che conta di più per il prodotto: offrire funzionalità di eccellenza agli utenti.
Mentre ci adoperiamo per migliorare gli strumenti presenti in ogni livello dello stack, i framework come Next.js, Nuxt e Angular CLI gestiscono ogni fase del ciclo di vita di un'applicazione. Per questo motivo e per il fatto che l'adozione di React è la più ampia nell'ecosistema del framework UI di base, la maggior parte delle nostre ottimizzazioni è iniziata con la verifica in Next.js prima di essere estesa al resto dell'ecosistema.
Aurora supporta il successo su larga scala offrendo soluzioni al livello giusto degli stack tecnologici più diffusi. Colmando il divario tra browser e framework, consente di ottenere contenuti di alta qualità come effetto collaterale della creazione per il web, fungendo al contempo da loop di feedback per migliorare la piattaforma web.
Qual è la nostra procedura di lavoro?
I nostri principi per la modalità di collegamento di Aurora tra i browser e l'ecosistema degli sviluppatori sono umiltà, curiosità, ricerca scientifica e pragmatismo. Collaboriamo con gli autori dei framework per apportare miglioramenti, collaboriamo con la community e svolgiamo la nostra due diligence prima di apportare modifiche.
Per riepilogare i passaggi che seguiamo per ogni nuova funzionalità su cui lavoriamo:
- Identifica i problemi relativi all'esperienza utente in uno stack popolare utilizzando app rappresentative.
- Crea prototipi di soluzioni che risolvano il problema, con un'enfasi sui "valori predefiniti forti".
- Verifica la funzionalità con un altro stack di framework per assicurarti che sia adattabile.
- Convalida la funzionalità con esperimenti in alcune app di produzione, in genere con test di laboratorio per il rendimento.
- Promuovi la progettazione utilizzando la procedura RFC, tenendo conto del feedback della community.
- Inserisci la funzionalità in una serie popolare, in genere dietro un flag.
- Attiva la funzionalità in un'app di produzione rappresentativa per valutare la qualità e l'integrazione del flusso di lavoro dello sviluppatore.
- Misura il miglioramento delle prestazioni monitorando le metriche nelle app di produzione rappresentative che hanno adottato la funzionalità o eseguito l'upgrade.
- Attiva la funzionalità come predefinita nello stack, in modo che tutti gli utenti che eseguono l'upgrade ne traggano vantaggio.
- Una volta dimostrata la fattibilità, utilizza altri framework per implementare la funzionalità.
- Identifica le lacune nella piattaforma web con un feedback loop.
- Vai ai problemi successivi.
Gli strumenti e i plug-in sottostanti (webpack, Babel, ESLint, TypeScript e così via) vengono condivisi tra molti framework. In questo modo, è possibile creare effetti a catena, anche se si contribuisce a un singolo stack di framework.
Inoltre, il Chrome Framework Fund supporta con finanziamenti strumenti e librerie open source. Ci auguriamo che i problemi e i livelli di soluzione che abbiamo individuato possano essere applicati anche ad altri framework e strumenti, ma sappiamo che possiamo fare di più. A tal fine, vogliamo fare la nostra parte per garantire che le librerie e i framework che aiutano gli sviluppatori a crescere possano prosperare. Questo è uno dei motivi per cui continueremo a investire nel fondo Chrome Framework. Finora ha supportato il lavoro su Webpack 5, Nuxt e sulle prestazioni e sui miglioramenti di ESLint.
Quali risultati abbiamo ottenuto finora?
Il nostro lavoro si è concentrato sulle ottimizzazioni di base per risorse come immagini, JS, CSS e caratteri. Abbiamo implementato una serie di ottimizzazioni per migliorare i valori predefiniti di più framework, tra cui:
- Un componente immagine in Next.js che incapsula le best practice per il caricamento delle immagini, seguito da una collaborazione con Nuxt sullo stesso. L'utilizzo di questo componente ha comportato miglioramenti significativi ai tempi di pittura e allo spostamento del layout (ad esempio, riduzione del 57% del Largest Contentful Paint e del 100% del spostamento cumulativo del layout su nextjs.org/give).
- Inserimento in linea automatico di CSS per le dichiarazioni dei caratteri web in fase di compilazione. Questa funzionalità è stata implementata in Angular (Google Fonts) e Next.js (Google Fonts e Adobe Fonts), con notevoli miglioramenti a Largest Contentful Paint e First Contentful Paint (esempio).
- Incorporazione di CSS fondamentale utilizzando Critters sia in Angular che in Next.js per ridurre i tempi di aggiornamento. Ha comportato un miglioramento di 20-30 punti dei punteggi di rendimento di Lighthouse in una tipica app Angular su larga scala quando questa è stata combinata con la funzionalità di incorporamento del CSS dei caratteri.
- Supporto di ESLint immediato in Next.js che include un plug-in personalizzato e una configurazione condivisibile per semplificare il rilevamento dei problemi comuni specifici del framework in fase di compilazione, con un conseguente miglioramento delle prestazioni di caricamento.
- È stata introdotta una funzionalità di inoltro del rendimento integrata in Create React App e Next.js per consentire di ottenere informazioni più facilmente sul rendimento delle pagine tramite Web Vitals e altre metriche personalizzate.
- Chunking granulare implementato in Next.js e Gatsby, che ha comportato una riduzione del 30-70% delle dimensioni dei bundle, migliorando al contempo le prestazioni della memorizzazione nella cache. Questo è diventato l'impostazione predefinita in Webpack 5.
- Un chunk di polyfill separato per i browser meno recenti, in collaborazione con il team di Next.js, per migliorare le dimensioni del bundle nei browser moderni.
Ognuna di queste funzionalità è stata automatizzata per essere attivata per impostazione predefinita o richiede solo una semplice attivazione. Questo è essenziale per garantire che gli sviluppatori possano trarne facilmente vantaggio senza aggiungere complessità al flusso di lavoro.
Quali sono i nostri piani per il 2021?
Per il resto dell'anno, ci concentreremo sull'aiutare gli stack di framework a migliorare l'esperienza utente e il loro rendimento in base a metriche come i Core Web Vitals. Questo lavoro includerà:
- Conformità per l'applicazione delle best practice. Per saperne di più, consulta il post del blog.
- Ottimizzazione delle prestazioni di caricamento iniziale grazie alle nostre collaborazioni per ottimizzare immagini, caratteri e CSS critici.
- Caricamento di script di terze parti (3P) con un impatto minimo sulle prestazioni, grazie alla nostra esperienza nel lavoro su un componente Script e a ricerche approfondite su come ordinare e sequenziare al meglio i 3P.
- Prestazioni di JavaScript su larga scala (ad es. supporto di React Server Components in Next.js).
Il nostro team cercherà di pubblicare informazioni più regolari sulle RFC e sulla documentazione di progettazione per queste idee, in modo che qualsiasi framework o sviluppatore che voglia seguirci possa farlo.
Conclusione
Il team di Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) è lieto di continuare a collaborare in modo stretto con la community del framework open source per migliorare le impostazioni predefinite dell'esperienza utente in Next.js, Nuxt e Angular. Amplieremo il nostro impegno per coprire nel tempo ancora più framework e strumenti. Continua a seguirci per altri post del blog, conferenze e RFC del nostro team nel corso del prossimo anno :)