L'équipe Chrome accorde une grande importance à l'expérience utilisateur et à un écosystème Web florissant. Nous souhaitons que les utilisateurs bénéficient de la meilleure expérience possible sur le Web, non seulement avec des documents statiques, mais aussi lorsqu'ils utilisent des applications riches et très interactives.
Les outils et frameworks Open Source jouent un rôle important dans la création d'applications modernes pour le Web, tout en offrant une bonne expérience aux développeurs. Ces frameworks et outils permettent aux entreprises de toutes tailles, ainsi qu'aux particuliers, de créer des applications pour le Web.
Nous pensons que les frameworks peuvent également jouer un rôle important en aidant les développeurs à prendre en compte des aspects clés de qualité tels que les performances, l'accessibilité, la sécurité et la préparation aux appareils mobiles. Au lieu de demander à chaque développeur et propriétaire de site de devenir un expert dans ces domaines et de suivre les bonnes pratiques en constante évolution, le framework peut les prendre en charge avec des solutions intégrées. Cela permet aux développeurs de se concentrer sur la création de fonctionnalités de produit.
En résumé, notre vision est qu'un niveau élevé de qualité de l'expérience utilisateur devient un effet secondaire de la création pour le Web.
Aurora: collaboration entre Chrome et des outils et frameworks Web Open Source
Depuis près de deux ans, nous travaillons avec certains des frameworks les plus populaires, tels que Next.js, Nuxt et Angular, pour améliorer les performances Web. Nous avons également financé des outils et des bibliothèques populaires tels que Vue, ESLint et webpack. Aujourd'hui, nous lui donnons un nom : Aurora.
Les aurores sont un phénomène lumineux naturel qui scintille dans le ciel. Comme nous essayons d'améliorer les expériences utilisateur créées avec des frameworks, nous avons pensé que ce nom était approprié.
Au cours des prochains mois, nous vous communiquerons beaucoup plus d'informations sur Aurora. Il s'agit d'une collaboration entre une petite équipe d'ingénieurs Chrome (dont le nom de code interne est WebSDK) et les auteurs du framework. Notre objectif est de proposer la meilleure expérience utilisateur possible pour les applications de production, quel que soit le navigateur dans lequel vous effectuez le rendu.
Quelle est notre stratégie ?
Chez Google, nous avons beaucoup appris en utilisant des frameworks et des outils pour créer et gérer des applications Web à grande échelle telles que la recherche Google, Maps, la recherche d'images, Google Photos, etc. Nous avons découvert comment les frameworks peuvent jouer un rôle crucial dans la qualité prévisible des applications en fournissant des paramètres par défaut solides et des outils orientés.
Les frameworks ont un point de vue unique pour influencer à la fois l'expérience client et l'expérience utilisateur, car ils couvrent l'ensemble du système: le client et le serveur, les environnements de développement et de production, et ils intègrent des outils tels que le compilateur, le bundler, le linter, etc.
Lorsque des solutions sont intégrées au framework, les équipes de développeurs peuvent les utiliser et se concentrer sur ce qui compte le plus pour le produit : proposer des fonctionnalités de qualité aux utilisateurs.
Alors que nous nous efforçons d'améliorer les outils qui se trouvent dans chaque couche de la pile, les frameworks tels que Next.js, Nuxt et la CLI Angular gèrent chaque étape du cycle de vie d'une application. Pour cette raison, et compte tenu du fait que React est le framework d'UI le plus adopté dans l'écosystème de base, la plupart de nos optimisations ont commencé par être testées dans Next.js avant de s'étendre au reste de l'écosystème.
Aurora contribue à la réussite à grande échelle en proposant des solutions au niveau approprié des piles technologiques populaires. En comblant l'écart entre les navigateurs et les frameworks, il permet à la qualité élevée d'être un effet secondaire de la création pour le Web, tout en agissant comme une boucle de rétroaction pour améliorer la plate-forme Web.
Quel est notre processus de travail ?
Nos principes de pontage entre les navigateurs et l'écosystème des développeurs sont les suivants : humilité, curiosité, recherche scientifique et pragmatisme. Nous collaborons avec les auteurs de frameworks pour les améliorer, collaborons avec la communauté et effectuons nos diligences raisonnables avant d'apporter des modifications.
Pour résumer les étapes que nous suivons pour chaque nouvelle fonctionnalité que nous développons:
- Identifier les difficultés de l'expérience utilisateur dans une pile populaire, à l'aide d'applications représentatives.
- Créez des prototypes de solutions qui répondent à ce problème, en mettant l'accent sur les "valeurs par défaut fortes".
- Vérifiez la fonctionnalité avec une autre pile de framework pour vous assurer qu'elle est adaptable.
- Validez la fonctionnalité en effectuant des tests dans quelques applications de production, généralement avec des tests en laboratoire pour évaluer les performances.
- Pilotez la conception à l'aide du processus RFC, en tenant compte des commentaires de la communauté.
- Déployez la fonctionnalité dans une pile populaire, généralement derrière un indicateur.
- Activez la fonctionnalité dans une application de production représentative pour évaluer la qualité et l'intégration du workflow de développement.
- Mesurez l'amélioration des performances en suivant les métriques dans des applications de production représentatives qui ont adopté la fonctionnalité ou effectué une mise à niveau.
- Activez la fonctionnalité par défaut dans la pile afin que tous les utilisateurs effectuant la mise à niveau en bénéficient.
- Une fois la preuve faite, travaillez avec des frameworks supplémentaires pour implémenter la fonctionnalité.
- Identifiez les lacunes de la plate-forme Web à l'aide d'une boucle de rétroaction.
- Passez aux problèmes suivants.
Les outils et plug-ins sous-jacents (webpack, Babel, ESLint, TypeScript, etc.) sont partagés entre de nombreux frameworks. Cela permet de créer des effets d'entraînement, même lorsque vous contribuez à une seule pile de framework.
De plus, le Fonds Chrome Framework finance des outils et des bibliothèques Open Source. Nous espérons que les couches de problèmes et de solutions de nos efforts ci-dessus se chevauchent suffisamment pour être transposées dans d'autres frameworks et outils, mais nous savons que nous pouvons faire mieux. À cette fin, nous souhaitons faire notre part pour nous assurer que les bibliothèques et les frameworks qui aident les développeurs à réussir peuvent prospérer. C'est pourquoi nous allons continuer à investir dans le fonds Chrome Framework. À ce jour, il a permis de travailler sur Webpack 5, Nuxt, les performances et les améliorations d'ESLint.
Qu'avons-nous accompli jusqu'à présent ?
Notre travail s'est concentré sur les optimisations de base pour les ressources telles que les images, le code JavaScript, le code CSS et les polices. Nous avons publié un certain nombre d'optimisations pour améliorer les valeurs par défaut de plusieurs frameworks, y compris les suivantes:
- Un composant Image dans Next.js qui encapsule les bonnes pratiques de chargement d'images, suivi d'une collaboration avec Nuxt sur le même sujet. L'utilisation de ce composant a permis d'améliorer considérablement les temps de peinture et le décalage de mise en page (par exemple, une réduction de 57% de la plus grande peinture avec contenu et une réduction de 100% du décalage de mise en page cumulé sur nextjs.org/give).
- Insérer automatiquement du CSS pour les déclarations de polices Web au moment de la compilation Cette fonctionnalité est disponible dans Angular (Google Fonts) et Next.js (Google Fonts et Adobe Fonts), ce qui améliore considérablement Largest Contentful Paint et First Contentful Paint (exemple).
- Intégration du CSS critique à l'aide de Critters dans Angular et Next.js pour réduire les temps de peinture. Amélioration de 20 à 30 points des scores de performances Lighthouse dans une application Angular typique à grande échelle lorsque cette fonctionnalité était combinée à la fonctionnalité d'intégration de CSS de police.
- Compatibilité avec ESLint prête à l'emploi dans Next.js, qui comprend un plug-in personnalisé et une configuration partageable pour faciliter la détection des problèmes courants spécifiques au framework au moment de la compilation, ce qui améliore les performances de chargement.
- Introduction d'un relais de performances intégré dans Create React App et Next.js pour obtenir des insights plus faciles sur les performances des pages via les métriques Web Vitals et d'autres métriques personnalisées.
- Le découpage granulaire est disponible dans Next.js et Gatsby, ce qui permet de réduire de 30 à 70 % la taille des bundles tout en améliorant les performances de mise en cache. Il s'agit de la valeur par défaut dans Webpack 5.
- Un bloc de polyfill distinct pour les anciens navigateurs, en collaboration avec l'équipe Next.js, afin d'améliorer la taille du bundle dans les navigateurs modernes.
Chacune de ces fonctionnalités a été automatisée pour être activée par défaut ou ne nécessite qu'une simple activation. Cela est essentiel pour que les développeurs puissent facilement en profiter sans ajouter de complexité à leur workflow.
Que prévoyons-nous pour 2021 ?
D'ici la fin de l'année, nous nous concentrerons sur l'amélioration de l'expérience utilisateur et des performances des piles de frameworks sur des métriques telles que les Core Web Vitals. Ce travail comprendra les éléments suivants:
- Conformité pour appliquer les bonnes pratiques Pour en savoir plus, consultez cet article de blog.
- Optimisation des performances de chargement initial en s'appuyant sur nos collaborations pour optimiser les images, les polices et le CSS critique.
- Chargement de scripts tiers (3P) avec un impact minimal sur les performances en s'appuyant sur notre travail de base sur un composant Script et en effectuant des recherches approfondies sur la meilleure façon d'organiser et de séquencer les 3P.
- Performances JavaScript à grande échelle (par exemple, prise en charge des composants de serveur React dans Next.js).
Notre équipe s'efforcera de publier des informations plus régulières sur les RFC et les documents de conception de ces idées afin que tout framework ou développeur qui souhaite suivre puisse le faire.
Conclusion
L'équipe Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) a hâte de continuer à travailler en étroite collaboration avec la communauté du framework open source pour améliorer les valeurs par défaut de l'expérience utilisateur dans Next.js, Nuxt et Angular. Nous allons renforcer notre engagement pour couvrir encore plus de frameworks et d'outils au fil du temps. Consultez régulièrement cette page pour découvrir d'autres articles de blog, conférences et RFC de notre équipe au cours de l'année à venir.