Développer l'écosystème du framework Web

Chrome collabore avec des frameworks Open Source pour améliorer le Web

Chrome contribue activement à l'écosystème des frameworks Web et à notre intervention lors du Chrome Dev Summit 2019 représente les points sur lesquels nous avons travaillé l'année dernière.

Lisez la suite pour découvrir un récapitulatif complet de la discussion, ainsi que des ressources et des détails 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 des navigateurs et V8, le moteur JavaScript et WebAssembly principal sur lequel repose Chrome, afin que les développeurs soient dotés de fonctionnalités qui les aident à créer des pages Web de qualité. Nous essayons également d'améliorer les sites Web qui sont déjà en production aujourd'hui en contribuant aux outils Open Source de nombreuses façons.

La plupart des sites Web développeurs s'appuient autant que possible sur des outils Open Source et préfèrent ne pas créer de de l'infrastructure. Les frameworks JavaScript et les bibliothèques d'UI côté client constituent une part croissante des Open Source. Des données sur les trois frameworks et bibliothèques côté client les plus populaires React, Angular et Vue montrent que:

  • 72% des participants au Première société de développement Web et Enquête de conception utilisez au moins l'un de ces frameworks et bibliothèques.
  • Au-dessus 320 000 sites à les 5 millions d'URL les plus analysées par HTTP Archive utilisent au moins l'un de ces frameworks et bibliothèques.
  • En fonction du 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 se traduire par un Web de qualité. C'est pourquoi Les ingénieurs Chrome ont commencé à travailler directement avec des auteurs de bibliothèques et de frameworks externes.

Contributions aux frameworks Web

Les cadres couramment utilisés pour construire et structurer des pages Web se divisent en deux catégories:

  • Les frameworks d'UI (ou bibliothèques), tels que Preact, React ou Vue, qui permettent de contrôler sur la couche d'affichage d'une application (par exemple, via un modèle de composants).
  • 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 clairement définies, comme le rendu côté serveur. Ces cadres sont généralement utiliser un framework d'UI ou une bibliothèque pour la couche de vue.

Comparaison entre les frameworks et les bibliothèques d'UI et les frameworks Web

Les développeurs peuvent choisir de ne pas utiliser de frameworks, mais en assemblant une bibliothèque de couches de vue, un routeur, d'un système de style, d'un moteur de rendu de serveur, etc., ils finissent souvent par créer leur propre type d'infrastructure. Bien qu'ils soient avisés, les frameworks Web se chargent de la plupart de ces problèmes par défaut.

Le reste de cet article met en évidence de nombreuses améliorations récemment introduites dans différents cadres. et outils, y compris les contributions de l'équipe Chrome.

Angular

L'équipe d'Angular a apporté un certain nombre d'améliorations à la version 8 du framework:

Graphique montrant la réduction de la taille du bundle d'angular.io avec et sans compilations différentielles
Réduction de la taille des bundles pour angular.io avec des compilations différentielles (à partir de la version 8 d'Angular)
  • Compatibilité avec la syntaxe d'importation dynamique standard pour les routes à chargement différé.
  • Compatibilité 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 produit Angular de rendu qui offre de meilleures performances de recompilation et une réduction du nombre toutes les tailles d'écran, est disponible en mode Aperçu pour projets existants.

Pour en savoir plus sur ces améliorations, consultez "Version 8 d'Angular" et l'équipe Chrome est impatiente de collaborer étroitement avec elles l'année prochaine, afin de proposer de nouvelles fonctionnalités sur le terrain.

Next.js

Next.js est un framework Web qui utilise React comme couche de vue. En plus d'un Next.js fournit un modèle de composant d'interface utilisateur que de nombreux développeurs attendent d'un framework côté client. Nombre de fonctionnalités intégrées par défaut:

  • Routage avec division du code par défaut
  • Compilation et regroupement (avec Babel et webpack).
  • Rendu côté serveur
  • Mécanismes d'extraction des données au niveau de la page
  • Style encapsulé (avec styled-jsx)

Next.js optimise la taille des bundles, et l'équipe Chrome nous a aidés à identifier les domaines dans lesquels nous pouvions contribuent à améliorer les performances. Pour en savoir plus sur chacun d'eux, consultez leurs demandes pour les commentaires (RFC) et les demandes d'extraction (PR):

  1. Une stratégie de fragmentation Webpack améliorée qui émet des bundles plus précis, réduisant le nombre quantité de code en double récupéré via plusieurs routes (RFC, RP).
  2. Le chargement différentiel avec Modèle module/nomodule ce qui peut réduire la quantité totale de JavaScript dans les applications Next.js de 20% sans code modifications (RFC, RP).
  3. Amélioration du suivi des métriques de performances utilisant l'API User Timing (RP).
Page d'accueil de Barnebys.com
Barnebys.com, un grand moteur de recherche pour les antiquités et les objets de collection, a constaté une réduction de 23% du nombre total de JavaScript grâce à la segmentation granulaire.

Nous étudions également d'autres fonctionnalités pour améliorer l'expérience utilisateur et celle des développeurs Next.js, par exemple:

  • Activation du mode simultané pour permettre 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 améliorer l'affichage des erreurs et des avertissements (RFC).
Exemple d'erreur de compilation de conformité dans Next.js
Exemple d'erreur de compilation de conformité dans Next.js (prototype)

Nuxt.js

Nuxt.js est un framework Web qui combine Vue.js avec différentes bibliothèques pour offrent une configuration avisée. Semblable à Next.js, il inclut de nombreuses fonctionnalités prêtes à l'emploi:

  • Routage avec division du code par défaut
  • Compilation et regroupement (avec Babel et 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 développé fonds-cadre pour soutenir financièrement des éditeurs les frameworks et les bibliothèques. Avec nos récents compatibles avec Nuxt.js, quelques d'autres fonctionnalités, comme un rendu sur serveur plus intelligent, et des optimisations.

Babel

Nous avons également amélioré les performances d'un outil sous-jacent important dans presque tous des cadres mentionnés précédemment : Babel.

Babel compile un code contenant une syntaxe plus récente, dans un code compréhensible par différents navigateurs. Il est devenu courant d'utiliser @babel/preset-env pour cibler Navigateurs modernes dans lesquels différentes cibles de navigateur peuvent être spécifiées pour fournir suffisamment de polyfill requises pour tous les environnements choisis. Une façon de spécifier les cibles consiste à utiliser <script type="module"> pour cibler tous les navigateurs compatibles avec ES Modules.

Pour optimiser ce cas, nous avons lancé un tout nouveau préréglage : @babel/preset-modules. Au lieu de convertir la syntaxe moderne à l'ancienne syntaxe pour éviter les bugs du navigateur, preset-modules corrige chaque bug spécifique en convertissant le code en la syntaxe moderne non rompue la plus proche possible. Ainsi, le code moderne peut presque jamais livré non modifiées dans la plupart des navigateurs.

Nouveau préréglage Babel pour améliorer le polyfill pour les navigateurs

Les développeurs qui utilisent déjà preset-env bénéficieront aussi de ces optimisations sans avoir à faire quoi que ce soit, car elles seront bientôt intégrées également dans preset-env.

Étape suivante

Travailler en étroite collaboration avec des frameworks et des bibliothèques Open Source pour offrir de meilleures expériences L'équipe Chrome réalise ce qui est d'une importance capitale aussi bien pour les utilisateurs que pour les développeurs.

Si vous utilisez un framework Web, une bibliothèque d'UI ou un outil Web (bundler, compilateur ou lint), demander à bénéficier du fonds-cadre.