Chrome collabore avec des frameworks Open Source pour améliorer le Web
Chrome contribue activement à l'écosystème des frameworks Web. Lors du Chrome Dev Summit 2019, nous avons présenté les projets sur lesquels nous avons travaillé au cours de l'année écoulée.
Lisez la suite pour obtenir un résumé plus détaillé de la présentation, ainsi que des informations et des ressources supplémentaires.
Comment améliorer le Web ?
L'objectif de tous les membres de l'équipe Chrome est d'améliorer le Web. Nous nous efforçons d'améliorer les API du navigateur et V8, le moteur JavaScript et WebAssembly de base qui alimente Chrome, afin que les développeurs disposent de fonctionnalités qui les aident à créer des pages Web de qualité. Nous essayons également d'améliorer les sites Web déjà en production en contribuant de différentes manières aux outils Open Source.
La plupart des développeurs Web s'appuient sur des outils Open Source dans la mesure du possible et préfèrent ne pas créer d'infrastructure entièrement personnalisée. Les frameworks JavaScript côté client et les bibliothèques d'interface utilisateur représentent une part croissante de l'utilisation Open Source. Les données sur les trois frameworks et bibliothèques côté client les plus populaires, React, Angular, et Vue, montrent que :
- 72% des participants à la première enquête annuelle de MDN auprès des développeurs et concepteurs Web utilisent au moins l'un de ces frameworks et bibliothèques.
- Plus de 320 000 sites parmi les 5 millions d'URL les plus consultées analysées par HTTP Archive utilisent au moins l'un de ces frameworks et bibliothèques.
- Lorsqu'elles sont regroupées par temps passé, 30 des 100 premières URL utilisent au moins l'un de ces frameworks et bibliothèques. (Les recherches ont été effectuées sur des données internes.)
Cela signifie qu'une meilleure boîte à outils Open Source peut directement améliorer le Web. C'est pourquoi les ingénieurs Chrome ont commencé à travailler directement avec les auteurs de frameworks et de bibliothèques externes.
Contributions aux frameworks Web
Les frameworks couramment utilisés pour créer et structurer des pages Web se répartissent en deux catégories :
- Les frameworks d'interface utilisateur (ou bibliothèques), tels que Preact, React ou Vue, qui permettent de contrôler la couche de vue d'une application (via un modèle de composant, par exemple).
- Les frameworks Web, tels que Next.js, Nuxt.js et Gatsby, qui fournissent un système de bout en bout avec des fonctionnalités intégrées, telles que le rendu côté serveur. Ces frameworks utilisent généralement un framework ou une bibliothèque d'interface utilisateur pour la couche de vue.
Les développeurs peuvent choisir de ne pas utiliser de frameworks, mais en assemblant une bibliothèque de couches de vue, un routeur, un système de style, un moteur de rendu côté serveur, etc., ils finissent souvent par créer leur propre type de framework. Bien qu'ils soient subjectifs, les frameworks Web gèrent par défaut bon nombre de ces problèmes.
Le reste de cet article met en évidence de nombreuses améliorations qui ont récemment été apportées à différents frameworks et outils, y compris les contributions de l'équipe Chrome.
Angular
L'équipe Angular a apporté un certain nombre d'améliorations à la version 8 du framework :
- Chargement différentiel par défaut pour minimiser les polyfills inutiles pour les navigateurs plus récents.
- Prise en charge de la syntaxe d'importation dynamique standard pour les routes à chargement différé.
- Prise en charge des Web Workers pour exécuter des opérations dans un thread d'arrière-plan distinct du thread principal.
- Ivy, le nouveau moteur de rendu d'Angular qui offre de meilleures performances de recompilation et une réduction de la taille des bundles, est disponible en mode bêta pour les projets existants.
Pour en savoir plus sur ces améliorations, consultez la section "Version 8 d'Angular" . L'équipe Chrome se réjouit de collaborer étroitement avec elle au cours de l'année à venir, à mesure que de nouvelles fonctionnalités seront disponibles.
Next.js
Next.js est un framework Web qui utilise React comme couche de vue. En plus d'un modèle de composant d'interface utilisateur que de nombreux développeurs attendent d'un framework côté client, Next.js fournit un certain nombre de fonctionnalités par défaut intégrées :
- Routage avec fractionnement de code par défaut
- Compilation et regroupement (à l'aide de Babel et webpack)
- Affichage côté serveur
- Mécanismes permettant de récupérer des données au niveau de chaque page
- Style encapsulé (avec styled-jsx)
Next.js est optimisé pour réduire la taille des bundles, et l'équipe Chrome a identifié les domaines dans lesquels nous pourrions contribuer à améliorer les performances. Pour en savoir plus sur chacun d'eux, consultez leurs demandes de commentaires (RFC) et leurs requêtes d'extraction (PR) :
- Une stratégie améliorée de segmentation webpack qui émet des bundles plus granulaires, réduisant ainsi la quantité de code dupliqué récupéré via plusieurs routes (RFC, PR).
- Chargement différentiel avec le modèle module/nomodule qui peut réduire la quantité totale de JavaScript dans les applications Next.js jusqu'à 20% sans aucune modification de code (RFC, PR).
- Amélioration du suivi des métriques de performances à l'aide de l'API User Timing (PR).
Nous explorons également d'autres fonctionnalités pour améliorer l'expérience utilisateur et développeur de Next.js, telles que :
- Activation du mode simultané pour déverrouiller l'hydratation progressive ou partielle des composants.
- Un système de conformité basé sur webpack qui analyse tous les fichiers sources et les éléments générés pour afficher de meilleures erreurs et avertissements (RFC).
Nuxt.js
Nuxt.js est un framework Web qui combine Vue.js avec différentes bibliothèques pour fournir une configuration subjective. Comme Next.js, il inclut de nombreuses fonctionnalités prêtes à l'emploi :
- Routage avec fractionnement de code par défaut
- Compilation et regroupement (à l'aide de Babel et webpack)
- Affichage côté serveur
- Récupération asynchrone des données pour chaque page
- Datastore par défaut (Vuex)
En plus de travailler directement à l'amélioration des performances de différents outils, nous avons élargi le fonds de financement des frameworks pour fournir une aide financière à davantage de frameworks et de bibliothèques Open Source. Grâce à notre récente prise en charge de Nuxt.js, plusieurs fonctionnalités devraient être disponibles prochainement, y compris un rendu côté serveur plus intelligent et des optimisations d’images.
Babel
Nous avons également progressé dans l'amélioration des performances d'un outil sous-jacent important dans presque tous les frameworks mentionnés : Babel.
Babel compile le code contenant une syntaxe plus récente en code que différents navigateurs peuvent comprendre.
Il est devenu courant d'utiliser @babel/preset-env pour cibler
les navigateurs modernes, où différentes cibles de navigateur peuvent être spécifiées afin de fournir suffisamment de polyfills
pour tous les environnements choisis. Pour spécifier les cibles, vous pouvez utiliser <script
type="module"> pour cibler tous les navigateurs qui prennent en charge les modules
ES.
Pour optimiser ce cas, nous avons lancé un tout nouveau preset :
@babel/preset-modules. Au lieu de convertir la syntaxe moderne en syntaxe plus ancienne pour éviter les bugs du navigateur, preset-modules corrige chaque bug spécifique en transformant la syntaxe moderne la plus proche possible qui n'est pas endommagée. Le code moderne obtenu peut être diffusé presque sans modification sur la plupart des navigateurs.
Les développeurs qui utilisent déjà preset-env bénéficieront également de ces optimisations sans rien avoir à faire, car elles seront bientôt intégrées à preset-env.
Étape suivante
En collaborant étroitement avec les frameworks et bibliothèques Open Source pour offrir de meilleures expériences, l'équipe Chrome comprend ce qui est fondamentalement important pour les utilisateurs et les développeurs.
Si vous travaillez sur un framework Web, une bibliothèque d'interface utilisateur ou toute forme d'outil Web (bundleur, compilateur, linter), postulez au fonds de financement des frameworks !