Au sein de l'équipe Chrome, nous nous soucions de l'expérience utilisateur et d'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 les documents statiques, mais également lorsqu'ils utilisent des applications riches et hautement interactives.
Les outils et frameworks Open Source jouent un rôle important pour permettre aux développeurs de créer des applications modernes pour le Web, tout en facilitant l'expérience des développeurs. Ces frameworks et outils équipent les entreprises de toutes tailles, ainsi que les particuliers qui développent des applications pour le Web.
Nous pensons que les frameworks peuvent également jouer un rôle important pour aider les développeurs sur des aspects essentiels de la qualité tels que les performances, l'accessibilité, la sécurité et l'aptitude mobile. Au lieu de demander à chaque développeur et propriétaire de site de devenir un expert dans ces domaines et de suivre l'évolution constante des bonnes pratiques, le framework peut les accompagner à l'aide de solutions intégrées. Cela leur permet de se concentrer sur la création de fonctionnalités produit.
En résumé, nous pensons qu'un niveau élevé de qualité de l'expérience utilisateur est un effet secondaire de la création d'une expérience pour le Web.
Aurora: une collaboration entre Chrome et des frameworks et outils 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, afin d'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 avons nommé cette initiative Aurora.
Une aurore est un éclairage naturel qui scintille dans le ciel. Alors que nous essayons de mettre en valeur les expériences utilisateur créées avec des frameworks, nous avons pensé que ce nom était approprié.
Au cours des prochains mois, nous partagerons 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 est WebSDK) et d'auteurs du framework. Notre objectif est d'offrir la meilleure expérience utilisateur possible pour les applications de production, quel que soit le navigateur utilisé.
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 que les frameworks peuvent jouer un rôle crucial dans la prévisibilité de la qualité des applications en fournissant des valeurs par défaut fortes et des outils catégorisés.
Les frameworks ont un point de vue unique pour influencer à la fois DX 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 intègrent des outils tels que le compilateur, le bundler, lint, etc.
Une fois les solutions 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 exceptionnelles aux utilisateurs.
Nous nous efforçons d'améliorer les outils présents dans chaque couche de la pile, mais des frameworks tels que Next.js, Nuxt et Angular CLI gèrent chaque étape du cycle de vie d'une application. Pour cette raison, et étant donné que l'adoption de React est la plus importante dans l'écosystème principal du framework d'UI, la plupart de nos optimisations ont commencé par se vérifier dans Next.js avant d'être étendues au reste de l'écosystème.
Aurora favorise le succès à grande échelle en apportant des solutions à la couche appropriée des piles technologiques populaires. En comblant le fossé entre les navigateurs et les frameworks, il est possible d'obtenir des résultats de haute qualité 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 ?
Voici les principes d'Aurora qui font le lien entre les navigateurs et l'écosystème des développeurs : humilité, curiosité, investigation scientifique et pragmatisme. Nous collaborons avec les auteurs des frameworks pour apporter des améliorations, collaborons avec la communauté et faisons preuve de diligence raisonnable avant d'apporter des modifications.
Voici un résumé de la procédure que nous prenons pour toute nouvelle fonctionnalité sur laquelle nous travaillons:
- Identifier les difficultés de l’expérience utilisateur dans une pile populaire, à l’aide d’applications représentatives.
- Créer des prototypes de solutions qui résolvent ce problème, en mettant l'accent sur des "valeurs par défaut fortes".
- Vérifiez la fonctionnalité avec une autre pile de framework pour vous assurer qu'elle est adaptable.
- Validez cette fonctionnalité en la testant dans quelques applications de production, généralement avec des tests de performance en laboratoire.
- Piloter la conception à l'aide du processus RFC, en tenant compte des commentaires de la communauté.
- Placez l'élément sur une pile populaire, généralement derrière un drapeau.
- Activez la fonctionnalité dans une application de production représentative afin d'évaluer la qualité et l'intégration du workflow du développeur.
- Mesurez l'amélioration des performances en suivant les métriques des applications de production représentatives ayant adopté la fonctionnalité ou mise à niveau.
- Activez cette fonctionnalité par défaut dans la pile afin que tous les utilisateurs puissent en bénéficier.
- Une fois que cela a été fait, utilisez d'autres cadres pour intégrer la fonctionnalité.
- Identifier les lacunes de la plate-forme Web, avec 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'ondulation, même lorsqu'ils contribuent à une seule pile de framework.
De plus, le Chrome Framework Fun soutient les outils et les bibliothèques Open Source de manière financée. Nous espérons que les niveaux de problèmes et de solutions s'entrecroisent dans nos efforts ci-dessus pour qu'ils se traduisent par d'autres frameworks et outils, mais nous savons que nous pouvons faire plus. À cette fin, nous voulons faire en sorte que les bibliothèques et les frameworks qui aident les développeurs à réussir puissent se développer. C'est l'une des raisons pour lesquelles nous allons continuer d'investir dans le Chrome Framework Fund. À ce jour, il a permis de travailler sur Webpack 5 et Nuxt, ainsi que sur les performances et les améliorations d'ESLint.
Qu'est-ce que notre travail a permis jusqu'à présent ?
Nous nous sommes concentrés sur les optimisations fondamentales pour des ressources telles que les images, JavaScript, CSS et les polices. Nous avons conçu un certain nombre d'optimisations pour améliorer les valeurs par défaut de plusieurs frameworks, y compris les suivantes:
- Composant Image dans Next.js qui encapsule les bonnes pratiques de chargement des images, suivies d'une collaboration avec Nuxt. L'utilisation de ce composant a permis d'améliorer considérablement les durées de rendu et le décalage de la mise en page (exemple: réduction de 57% de la métrique Largest Contentful Paint et réduction de 100% du Cumulative Layout Shift sur nextjs.org/give).
- Intégration automatisée du CSS pour les déclarations de polices Web au moment de la compilation. Cette fonctionnalité a été ajoutée à Angular (Google Fonts) et Next.js (Google Fonts et Adobe Fonts), ce qui a entraîné des améliorations notables pour Largest Contentful Paint et First Contentful Paint (exemple).
- Intégration des CSS critiques à l'aide de Critters dans Angular et Next.js pour réduire les temps de rendu. Résultats obtenus : une amélioration de 20 à 30 points des scores de performances Lighthouse dans une application Angular classique à grande échelle en combinant cette approche avec la fonctionnalité d'intégration CSS de la police.
- Compatibilité ESLint prête à l'emploi dans Next.js, qui inclut un plug-in personnalisé et une configuration partageable permettant de détecter plus facilement les problèmes courants propres au framework au moment de la compilation, ce qui se traduit par des performances de chargement plus prévisibles.
- Introduction d'un relais de performances intégré dans Créer une application React et Next.js pour faciliter les insights sur les performances des pages via Web Vitals et d'autres métriques personnalisées.
- Segmentation précise envoyée dans Next.js et Gatsby, permettant une réduction de 30 à 70 % des tailles de bundle tout en améliorant les performances de mise en cache. Cette option est devenue la valeur par défaut dans Webpack 5.
- Un segment de polyfill distinct pour les navigateurs plus anciens, 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 nécessite une simple activation. Ce point est essentiel pour permettre aux développeurs d'en profiter facilement sans compliquer leur workflow.
Quels sont nos projets pour 2021 ?
Tout au long de cette année, nous allons nous efforcer d'aider les piles de frameworks à améliorer l'expérience utilisateur et leurs performances par rapport à des métriques telles que les Core Web Vitals. Ce travail comprendra:
- Conformité pour l'application des bonnes pratiques Pour en savoir plus, consultez cet article de blog.
- Optimisation des performances de chargement initial grâce à nos collaborations pour optimiser les images, les polices et les CSS critiques
- Chargement de scripts tiers avec un impact minimal sur les performances en nous appuyant sur notre base de travail sur un composant Script et en effectuant des recherches approfondies sur la meilleure façon de commander et de séquencer les tiers.
- Performances JavaScript à grande échelle (par exemple, prise en charge des composants serveur React dans Next.js)
Notre équipe s'efforcera de publier des informations plus régulières sur les RFC et de concevoir des documents pour ces idées afin que tout framework ou développeur puisse le faire.
Conclusion
L'équipe Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen et Katie) se réjouissent de continuer à travailler sur le framework Open Source et à améliorer l'expérience utilisateur en étroite collaboration avec la communauté Open Source. Nous allons développer notre engagement pour couvrir encore davantage de cadres et d'outils au fil du temps. Consultez cette page pour découvrir d'autres articles de blog, conférences et RFC de notre équipe au cours de l'année à venir :)