Chrome collabore avec des frameworks Open Source pour améliorer le Web
Chrome contribue activement à l'écosystème du framework Web, et notre discussion lors du Chrome Dev Summit 2019 revient sur les points sur lesquels nous avons travaillé l'année dernière.
Poursuivez votre lecture pour un résumé détaillé de la présentation, ainsi que des informations et des ressources supplémentaires.
Comment pouvons-nous améliorer le Web ?
L'objectif de tous les membres de l'équipe Chrome est d'améliorer le Web. Nous travaillons à l'amélioration des API de navigateur et de V8 (le moteur JavaScript et WebAssembly principal sur lequel repose Chrome) afin que les développeurs disposent des 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 nombreuses façons aux outils Open Source.
La plupart des développeurs Web s'appuient autant que possible sur des outils Open Source, et ils préfèrent ne pas créer d'infrastructure entièrement personnalisée. Les frameworks JavaScript côté client et les bibliothèques d'UI représentent une part croissante de l'utilisation Open Source. Les données disponibles 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 pour les développeurs Web et les concepteurs du MN utilisent au moins l'un de ces frameworks et bibliothèques.
- Plus de 320 000 sites parmi les cinq millions d'URL les plus 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 URL les plus visitées utilisent au moins l'un de ces frameworks et bibliothèques. (Les recherches ont été effectuées sur des données internes.)
En d'autres termes, de meilleurs outils Open Source peuvent directement améliorer le Web. C'est pourquoi les ingénieurs Chrome ont commencé à travailler directement avec des auteurs de frameworks et de bibliothèques externes.
Contributions aux frameworks Web
Les cadres couramment utilisés pour créer et structurer des pages Web se divisent en deux catégories:
- Des frameworks d'UI (ou bibliothèques), tels que Preact, React ou Vue, qui permettent de contrôler la couche d'affichage 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 intégrées, telles que le rendu côté serveur. Ces frameworks s'appuient généralement sur un framework d'UI ou une bibliothèque pour la couche de vue.
Les développeurs peuvent choisir de ne pas utiliser de frameworks, mais en assemblant une bibliothèque de couche de vue, un routeur, un système de style, un moteur de rendu de serveur, etc., ils finissent souvent par créer leur propre type de framework. Bien qu'ils soient clairement définis, les frameworks Web s'occupent par défaut d'un grand nombre de ces préoccupations.
Le reste de cet article met en avant de nombreuses améliorations qui ont récemment été introduites dans 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 nœuds de calcul Web 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 Aperçu pour les projets existants.
Pour en savoir plus sur ces améliorations, consultez la version 8 d'Angular. L'équipe Chrome espère travailler en étroite collaboration avec elle l'année prochaine, à mesure que de nouvelles fonctionnalités seront disponibles.
Next.js
Next.js est un framework Web qui utilise React en tant que couche de vue. En plus d'un modèle de composant d'UI que de nombreux développeurs attendent d'un framework côté client, Next.js fournit un certain nombre de fonctionnalités intégrées par défaut:
- Routage avec division du code par défaut
- Compilation et regroupement (à l'aide de Babel et du webpack)
- Rendu côté serveur
- Mécanismes d'extraction 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 nous a aidés à identifier les domaines dans lesquels nous pourrions encore améliorer les performances. Pour en savoir plus sur chacun d'eux, consultez les requêtes de commentaires (RFC) et les demandes d'extraction (PR):
- Stratégie de fragmentation Webpack améliorée qui émet des groupes plus précis, ce qui réduit la quantité de code en double extrait via plusieurs routes (RFC, PR).
- Chargement différentiel avec le modèle module/nomodule, qui peut réduire jusqu'à 20% la quantité totale de code JavaScript dans les applications Next.js sans modification du code (RFC, PR).
- Amélioration du suivi des métriques de performances qui utilise l'API User Timing (PR).
Nous étudions également d'autres fonctionnalités pour améliorer l'expérience utilisateur et développeur de Next.js, par exemple:
- Activation du mode simultané pour débloquer l'hydratation progressive ou partielle des composants.
- Système de conformité basé sur Webpack qui analyse tous les fichiers sources et les éléments générés afin de mettre en évidence les erreurs et les avertissements de meilleure qualité (RFC).
Nuxt.js
Nuxt.js est un framework Web qui combine Vue.js avec différentes bibliothèques pour fournir une configuration avisée. Semblable à Next.js, cette bibliothèque comprend de nombreuses fonctionnalités prêtes à l'emploi:
- Routage avec division du code par défaut
- Compilation et regroupement (à l'aide de Babel et du webpack)
- Rendu côté serveur
- Récupération asynchrone des données pour chaque page
- Datastore par défaut (Vuex)
En plus de travailler directement sur l'amélioration des performances de différents outils, nous avons élargi le fonds du framework afin de fournir une assistance financière à d'autres frameworks et bibliothèques Open Source. Suite à la compatibilité récente avec Nuxt.js, certaines fonctionnalités devraient être disponibles prochainement, y compris un rendu plus intelligent du serveur et une optimisation des 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 du code qui contient une syntaxe plus récente et qui est compréhensible par les différents navigateurs.
Il est devenu courant d'utiliser @babel/preset-env pour cibler les navigateurs récents dans lesquels différentes cibles de navigateur peuvent être spécifiées afin de fournir suffisamment de polyfill requis pour tous les environnements choisis. Pour spécifier des cibles, vous pouvez utiliser <script
type="module"> pour cibler tous les navigateurs compatibles avec les modules ES.
Pour optimiser ce scénario, nous avons lancé un tout nouveau préréglage : @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 passant à la syntaxe moderne non interrompue la plus proche possible. Il en résulte un code moderne qui peut être transmis presque intact à la plupart des navigateurs.
Les développeurs qui utilisent déjà preset-env bénéficieront également de ces optimisations sans intervention de votre part, car elles seront bientôt intégrées à preset-env.
Étape suivante
En collaborant étroitement avec des frameworks et des bibliothèques Open Source pour offrir une meilleure expérience utilisateur, l'équipe Chrome réalise ce qui est fondamental pour les utilisateurs comme pour les développeurs.
Si vous travaillez sur un framework Web, une bibliothèque d'UI ou toute autre forme d'outil Web (bundler, compilateur, lint), demandez à bénéficier du fonds pour le framework.