Faire progresser l'écosystème du cadre

Chrome está colaborando con marcos de Open source para trabajar hacia una la toile mieux

8 janvier 2020

Chrome es un colaborador activo del ecosistema de cadre web y nuestra charla en Chrome Dev Summit 2019 cubre lo que hemos trabajado durante el año pasado.

Lisez la suite pour un résumé détaillé de la conférence avec des détails et des ressources supplémentaires.

Comment pouvons-nous améliorer le Web?

le objectif de todos los miembros del equipo de Chrome es mejorar la Web. Trabajamos para mejorar las API du le navigateur y V8, el motor principal de JavaScript y WebAssembly que impulsa a Chrome, para que los desarrolladores estén equipados con funciones que les ayuden a crear excelentes páginas web. También intentamos mejorar los sitios web que ya están en producción hoy en día contribuyendo a las herramientas de código abierto de muchas formas.

La plupart des développeurs Web
confían en herramientas de código abierto siempre que être posible y prefieren no construir una infraestructura completamente personalizada. Los frameworks de JavaScript del lado del client y las bibliotecas de UI constituyen una porción creciente del uso de código abierto. Datos sobre los tres marcos y bibliotecas del lado del cliente más populares,
Réagir, Angulairey Vue, montre que:

• 72% des participants à la
  Premier sondage annuel de MDN pour les développeurs et concepteurs Web
  utilisez au moins un de ces frameworks et bibliothèques.
• Sur
  320 000 sites en los 5 millones de URL principales analizados por HTTP Archive utilizan al menos uno de estos marcos y bibliotecas.
• Lorsqu'elles sont regroupées en fonction du temps passé, 30 des 100 premières URL utilisent au moins l'un de ces frameworks et bibliothèques. (La recherche a été menée avec des données internes).

Ceci signifie que de meilleurs outils open source peuvent conduire directement à un meilleur Web Et c'est pourquoi les ingénieurs de Chrome ont commencé à travailler directement avec des auteurs de cadres 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:

• Marcos de interface utilisateur (ou bibliothèques), telles 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).
• Cadres Web, como Next.js, Nuxt.js y Gatsby, que proporcionan un sistema de un extremo a otro con características de opinión integradas, como la representación del lado del serveur. Estos marcos suelen aprovechar un marco de interfaz de Nom d'utilisateur o una biblioteca para la capa de vista.

Les développeurs peuvent choisir de ne pas utiliser de cadres, mais en rassemblant une bibliothèque de couches de vue, un routeur, un système de style, un serveur de rendu, etc., ils finissent souvent par créer leur propre type de cadre. Bien que têtus, les frameworks Web prennent en charge un grand nombre de ces problèmes par défaut.

Le reste de cet article met en évidence de nombreuses améliorations qui ont récemment abouti à différents frameworks et outils, y compris les contributions de l'équipe Chrome.

Angulaire

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

• Prise en charge de la syntaxe d'importation dynamique standard pour les chemins de chargement différé.
• Prise en charge des travailleurs Web pour exécuter des opérations sur un thread d'arrière-plan distinct du thread principal.
• Lierre, Le nouveau moteur de rendu d'Angular qui offre de meilleures performances de recompilation et une taille de paquet réduite, est disponible sur mode aperçu pour les projets existants.

Vous pouvez en savoir plus sur ces améliorations sur
"Version 8 d'Angular"
et l'équipe Chrome a hâte de travailler en étroite collaboration avec eux l'année prochaine à 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 fonctions par défaut intégrées:

• Routage avec partage de code par défaut
• Compilation et regroupement (en utilisant Babel y
  package web)
• Rendu côté serveur
• Mécanismes d'obtention de données au niveau de la page
• Style encapsulé (avec styled-jsx)

Next.js est optimisé pour les petits paquets, et l'équipe Chrome a aidé à identifier les domaines dans lesquels nous pourrions contribuer à améliorer encore les performances. Vous pouvez en savoir plus sur chacun d'eux en consultant leur demande de commentaires (RFC) et leurs demandes d'extraction (PR):

1. Ongle stratégie mejorada de fragmentación de paquetes web que emite paquetes más granulares, lo que reduce la cantidad de código duplicado obtenido a través de múltiples rutas (RFC,
   PR).
2. 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 changement de code (RFC,
   PR).
3. Amélioration du suivi des mesures de performances à l'aide de l'API de synchronisation des utilisateurs (PR).

Nous explorons également d'autres fonctionnalités pour améliorer l'expérience utilisateur et développeur lors de l'utilisation 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 les paquets Web qui analyse tous les fichiers actifs et sources générés pour afficher de meilleurs erreurs et avertissements (RFC).

Nuxt.js

Nuxt.js est un framework qui combine Vue.js avec différentes bibliothèques pour fournir une configuration têtue. Comme Next.js, il comprend de nombreuses fonctions prêtes à l'emploi:

• Routage avec partage de code par défaut
• Compilation et regroupement (en utilisant Babel y
  package web)
• Rendu côté serveur
• Obtention de données asynchrones pour chaque page
• Banque de données par défaut (Vuex)

En plus de travailler directement pour améliorer les performances de différents outils, nous avons élargi le
fond de cadre pour fournir un soutien financier pour davantage de bibliothèques et de cadres open source. Avec notre support récent Pour Nuxt.js, certaines fonctionnalités devraient arriver dans un proche avenir, notamment un rendu de serveur plus intelligent et des optimisations d'image.

Babel

Nous avons également progressé dans l'amélioration des performances d'un outil sous-jacent majeur dans presque tous les cadres mentionnés:Babel.

Babel compila código que contiene una sintaxis más nueva en un código que los diferentes navigateurs pueden entender. Se ha vuelto común de usar @ babel / preset-env pour cibler les navigateurs modernes où différentes cibles de navigateur peuvent être spécifiées pour fournir suffisamment de polyfilling requis pour tous les environnements choisis. Une façon de spécifier les objectifs consiste à utiliser pour cibler tous les navigateurs Prend en charge les modules ES.

Afin de optimiser para este caso, lanzamos un nuevo ajuste preestablecido;
@ babel / modules-presets. Au lieu de convertir la syntaxe moderne en une syntaxe plus ancienne pour éviter les erreurs du navigateur, modules préréglés corrige chaque bogue spécifique en le transformant en la syntaxe ininterrompue moderne la plus proche possible. Il en résulte un code moderne qui peut être livré presque inchangé pour la plupart des navigateurs.

Les développeurs utilisent déjà preset-env ils bénéficieront également de ces optimisations sans avoir à faire quoi que ce soit, puisqu'ils seront bientôt intégrés preset-env aussi.

Suivant?

Travailler en étroite collaboration avec des bibliothèques et des frameworks open source pour offrir de meilleures expériences aide l'équipe Chrome à réaliser ce qui est fondamentalement important pour les utilisateurs et les développeurs.

Si trabaja en un framework, biblioteca de interfaz de usuario o cualquier forma de herramientas web (agrupador, compilador, linter),
demande de fond de cadre!