Il team di Chrome ha per noi l'esperienza utente e un florido ecosistema web. Vogliamo che gli utenti abbiano la migliore esperienza possibile sul web, non solo con documenti statici, ma anche quando utilizzano applicazioni avanzate e altamente interattive.
Gli strumenti e i framework open source svolgono un ruolo importante nel consentire agli sviluppatori di creare app moderne per il web, supportando al contempo esperienze ottimali. Questi framework e strumenti consentono alle aziende di tutte le dimensioni e ai privati di creare soluzioni per il web.
Riteniamo che i framework possano svolgere un ruolo importante anche nell'aiutare gli sviluppatori con aspetti chiave sulla qualità come prestazioni, accessibilità, sicurezza e idoneità per i dispositivi mobili. Invece di chiedere a ogni sviluppatore e proprietario di siti di diventare esperti in queste aree e stare al passo con le best practice in continua evoluzione, il framework può supportarle con soluzioni integrate. Questo consente agli sviluppatori di concentrarsi sulla creazione delle funzionalità dei prodotti.
In poche parole, la nostra vision prevede che un livello elevato di qualità UX diventi un effetto collaterale dello sviluppo per il web.
Aurora: una collaborazione tra Chrome e strumenti e framework web open source
Per quasi due anni, abbiamo lavorato con alcuni dei framework più diffusi, come Next.js, Nuxt e Angular, al fine di migliorare le prestazioni web. Abbiamo anche finanziato strumenti e librerie popolari come Vue, ESLint e webpack. Oggi abbiamo assegnato il nome a questa iniziativa: Aurora.
L'aurora è una rappresentazione di luce naturale che brilla nel cielo. Mentre cerchiamo di far brillare le esperienze utente create con framework che risaltano e risplendono, abbiamo pensato che questo nome fosse la scelta giusta.
Nei prossimi mesi condivideremo molti più dettagli su Aurora. Si tratta di una collaborazione tra un piccolo team di tecnici di Chrome (con nome in codice WebSDK) e autori di framework. Il nostro obiettivo è offrire la migliore esperienza utente possibile per le app di produzione, indipendentemente dal browser su cui si esegue il rendering.
Qual è la nostra strategia?
In Google abbiamo imparato molto usando framework e strumenti per creare e gestire 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 cruciale per la qualità prevedibile delle app fornendo strumenti predefiniti efficaci e strumenti basati sull'opinione.
I framework hanno un punto di vista unico per influenzare sia DX che UX in quanto coprono l'intero sistema: client e server, gli ambienti di sviluppo e produzione. Inoltre, integrano strumenti come compiler, bundler, linter ecc.
Quando le soluzioni vengono integrate nel framework, i team di sviluppatori possono utilizzarle e concentrare il loro tempo su ciò che conta di più per il prodotto: offrire funzionalità straordinarie per gli utenti.
Mentre lavoriamo per migliorare gli strumenti in ogni livello dello stack, framework come Next.js, Nuxt e Angular CLI gestiscono ogni passaggio del ciclo di vita di un'applicazione. Per questo motivo, dato che l'adozione di React è la più ampia nell'ecosistema del framework dell'interfaccia utente principale, la maggior parte delle ottimizzazioni ha iniziato a essere pubblicata in Next.js prima di estenderla al resto dell'ecosistema.
Aurora supporta il successo su larga scala portando soluzioni al livello giusto degli stack tecnici più diffusi. Colmando il divario tra browser e framework, consente all'alta qualità di essere un effetto collaterale della creazione per il web e al contempo di agire come ciclo di feedback per migliorare la piattaforma web.
Qual è il nostro processo di lavoro?
I nostri principi su come Aurora collega i browser e l'ecosistema degli sviluppatori sono: umiltà, curiosità, ricerca scientifica e pragmatismo. Collaboriamo con gli autori dei framework ai miglioramenti, collaboriamo con la community e svolgiamo la nostra due diligence prima di apportare modifiche.
Per riepilogare i passaggi che adottiamo per ogni nuova funzionalità su cui lavoriamo:
- Individua le criticità dell'esperienza utente in una serie molto comune, utilizzando app rappresentative.
- Prototipare soluzioni che affrontano questo problema, con l'enfasi sui "forti valori predefiniti".
- Verifica la funzionalità con un altro stack di framework per assicurarti che sia adattabile.
- Convalida la funzionalità sperimentando in alcune app di produzione, in genere con test di laboratorio sulle prestazioni.
- Progettazione di Drive mediante la procedura RFC, in base al feedback della community.
- Fai atterrare l'elemento in una pila popolare, in genere dietro una bandiera.
- Abilitare 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.
- Abilita la funzionalità come predefinita nell'elenco, in modo che tutti gli utenti che eseguono l'upgrade ne trarranno vantaggio.
- Una volta comprovata, lavora con altri framework per ottenere la funzionalità.
- Identifica le lacune nella piattaforma web, con un ciclo di feedback.
- Passiamo ai problemi successivi.
Gli strumenti e i plug-in sottostanti (webpack, Babel, ESLint, TypeScript, ecc.) sono condivisi tra molti framework. Questo consente di creare effetti a onde, anche se contribuisci a un singolo stack del framework.
Inoltre, il Chrome Framework Fund supporta strumenti e librerie open source con finanziamenti. Anche se ci auguriamo che i livelli dei problemi e delle soluzioni si sovrappongano a quelli descritti sopra per tradurre in altri framework e strumenti, sappiamo che possiamo fare di più. A tal fine, vogliamo fare la nostra parte per garantire che le librerie e i framework che aiutino gli sviluppatori ad avere successo possano crescere. Questo è uno dei motivi per cui continueremo a investire nel Chrome Framework Fund. A oggi, ha supportato il lavoro per Webpack 5, Nuxt e le prestazioni e miglioramenti a ESLint.
Quali sono i vantaggi del nostro lavoro finora?
Il nostro lavoro è stato incentrato sulle ottimizzazioni di base per risorse come immagini, JS, CSS e caratteri. Abbiamo implementato una serie di ottimizzazioni per migliorare le impostazioni predefinite di più framework, tra cui:
- Un componente immagine in Next.js che racchiude le best practice per il caricamento delle immagini, seguite da una collaborazione con Nuxt. L'uso di questo componente ha apportato miglioramenti significativi ai tempi di visualizzazione e alla variazione del layout (ad esempio: una riduzione del 57% per Largest Contentful Paint e del 100% inCumulative Layout Shift su nextjs.org/give).
- Incorporamento automatico delle dichiarazioni CSS per i caratteri web al momento della creazione. Questa funzionalità è stata aggiunta in Angular (Google Fonts) e Next.js (Google Fonts e Adobe Fonts) e ha portato a importanti miglioramenti a Largest Contentful Paint e First Contentful Paint (esempio).
- Incorporazione di CSS critici utilizzando Critter sia in Angular sia in Next.js per ridurre i tempi di visualizzazione. Ha ottenuto un miglioramento di 20-30 punti nei punteggi delle prestazioni di Lighthouse in una tipica app Angular su larga scala quando questa è stata combinata con la funzionalità incorporata per i caratteri CSS.
- Supporto immediato di ESLint in Next.js che include un plug-in personalizzato e una configurazione condivisibile per facilitare l'individuazione di problemi comuni specifici del framework in fase di creazione, ottenendo così prestazioni di caricamento più prevedibili.
- Un'introduzione di un relayer integrato in Create React App e Next.js, per avere informazioni più semplici sulle prestazioni delle pagine tramite Web Vitals e altre metriche personalizzate.
- Suddivisione in blocchi granulari distribuita in Next.js e Gatsby, riduzione del 30-70% delle dimensioni dei bundle migliorando al contempo le prestazioni della memorizzazione nella cache. Questa è diventata l'impostazione predefinita in Webpack 5.
- Un blocco polyfill separato per i browser meno recenti, in collaborazione con il team Next.js, per migliorare le dimensioni dei bundle nei browser moderni.
Ognuna di queste funzionalità è stata automatizzata per essere abilitata per impostazione predefinita o necessita solo di una semplice attivazione. Ciò è essenziale per permettere agli sviluppatori di usufruire facilmente dei loro vantaggi senza complicare il flusso di lavoro.
Cosa abbiamo in programma 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 su metriche come Core Web Vitals. Questo lavoro includerà:
- Conformità per l'applicazione delle best practice. Leggi il post del blog per ulteriori informazioni.
- Ottimizzando le prestazioni del caricamento iniziale sviluppando le nostre collaborazioni per ottimizzare immagini, caratteri e CSS critico.
- Caricare script di terze parti (di terze parti) con un impatto minimo sulle prestazioni, basandosi sulle nostre basi per lavorare su un componente Script ed eseguendo ricerche approfondite sul modo migliore per ordinare e mettere in sequenza le terze parti.
- Prestazioni di JavaScript su larga scala (ad esempio supporto dei componenti del server di reazione in Next.js).
Il nostro team cercherà di pubblicare informazioni più regolari su RFC e documenti di progettazione per queste idee, in modo che qualsiasi framework o sviluppatore che desideri seguire possa farlo.
Conclusione
Il team di Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) non vede l'ora di migliorare l'esperienza utente del framework Next.js e di continuare a lavorare da vicino Creeremo il nostro impegno per coprire un numero ancora maggiore di framework e strumenti nel corso del tempo. Guarda questo spazio per altri blog post, dibattiti e RFC del nostro team nel corso del prossimo anno :)