Sommet des développeurs Chrome 2014 – Polymer – État de l'Union

Polymer et les composants Web sont des sujets très en vogue ces derniers temps. Étant donné que cet écosystème évolue rapidement, il peut souvent être difficile pour les développeurs de se tenir au courant de toutes les dernières modifications.

Lors de sa présentation au Chrome Dev Summit, Matt McNulty, responsable de l'équipe d'ingénierie de Polymer, a expliqué en quoi consiste Polymer et a également présenté la feuille de route vers Polymer 1.0.

Qu'est-ce que Polymer ?

Tout d'abord, qu'est-ce que Polymer ?

Polymer est une bibliothèque qui vous aide à créer des éléments et des applications à partir de composants Web. Les composants Web sont un ensemble de nouvelles normes de pointe qui permettent aux développeurs d'étendre le vocabulaire HTML avec leurs propres éléments personnalisés.

Polymer aide les développeurs à créer des applications plus rapidement

Étant donné que les composants Web sont conçus pour être une nouvelle primitive pour le navigateur, ils sont très puissants, mais aussi très bas niveau. Leur utilisation nécessite donc un certain nombre de lignes de code.

Polymer rend Web Components plus agréable

Polymer facilite l'utilisation des composants Web en "sucrant" la syntaxe. Il réduit la quantité de code standard à écrire et ajoute un style déclaratif, ce qui permet de créer des composants Web aussi facilement que d'écrire du code HTML.

L'expérience Polymer

Polymer a commencé comme un test visant à déterminer si nous pouvions polyfiller les normes des composants Web et obtenir des commentaires des développeurs avant que ces technologies ne soient disponibles dans tous les navigateurs. À mesure que de plus en plus de développeurs ont commencé à utiliser Polymer, il est passé de simples polyfills à une bibliothèque complète de fonctionnalités de productivité (liaison de données, surveillance des modifications d'attributs, recherche automatique de nœuds, etc.). Mais tous les tests ont des résultats. Comment s'est-il passé ?

Amélioration nécessaire de la fiche de performances de Polymer

Bien que de nombreux développeurs aient apprécié l'expressivité et les gains de productivité qu'ils ont obtenus en travaillant avec les composants Web dans Polymer, ils ont également exprimé des inquiétudes concernant les performances et la complexité globale.

Cela met en évidence une tension naturelle que Polymer a toujours eue: être un test pour faire progresser la plate-forme Web, mais aussi créer quelque chose de prêt à être mis en production sur lequel les développeurs peuvent compter.

Changements à venir

L'équipe Polymer a examiné en détail chaque fonctionnalité de la bibliothèque dans le but de créer une version plus légère, prête à la production et que les développeurs peuvent utiliser en toute confiance.

Calques

Polymer a été refactorisé en une série de couches. Les fonctionnalités de base sont rapides et efficaces, tandis que les fonctionnalités plus avancées sont disponibles sur inscription. Pour la plupart des cas d'utilisation, les fonctionnalités de base devraient répondre aux besoins des développeurs.

Polymer a été refactorisé en couches

Liaison de données simplifiée

Le système de liaison de données de Polymer a également été considérablement optimisé pour les performances. Conformément à l'approche en couches, la liaison bidirectionnelle est désormais activée par défaut, les liaisons unidirectionnelles étant utilisées par défaut. De plus, les types de propriétés publiés ont été rendus explicites, et un changement de propriété déclenche désormais un événement pour aider les éléments de différentes bibliothèques à communiquer plus facilement.

La liaison de données a été simplifiée

Shadow DOM allégé

Le polyfill Shadow DOM est un exploit d'ingénierie incroyable. Il a été conçu pour être complet et conforme aux spécifications, ce qui est important pour tester en profondeur la primitive de la plate-forme. Malheureusement, il introduit un certain nombre de goulots d'étranglement de performances pour les fonctionnalités que Polymer n'utilise pas.

La prochaine version de Polymer adoptera une approche différente, en utilisant une couche de style shim qui ne polyfille que ce dont Polymer a besoin.

L'ombre de shim est beaucoup plus rapide

Le polyfill existant restera en place pour les composants Web génériques autres que Polymer.

Déplacement vers webcomponents.org

En parlant de polyfills, ceux-ci déménagent également. De nombreux développeurs sont actuellement confus quant à la relation entre Polymer et les composants Web. Certains pensent que vous devez utiliser l'intégralité de Polymer pour utiliser les composants Web, alors qu'en réalité, vous n'avez besoin que des polyfills.

Pour clarifier cette distinction, les polyfills sont déplacés vers webcomponents.org et sont désormais renommés webcomponents.js.

Suppression des polyfills de webcomponents.org

Cette mesure vise à aider les autres auteurs de bibliothèques à tirer parti des polyfills sans confusion. L'équipe Polymer continuera de contribuer aux polyfills, mais nous espérons que ce changement les transformera en ressources partagées pour la communauté.

Résultats

Quels sont les résultats de tous ces changements ?

Vitesse

Sur Chrome, Polymer est désormais cinq fois plus rapide, et sur Safari, il est huit fois plus rapide.

Polymer est désormais huit fois plus rapide dans Safari

Taille du fichier

La taille du fichier a également été réduite de 87%, passant de 123 Ko à 15 Ko (6 Ko compressés avec gzip).

Polymer est désormais 87% plus petit

Feuille de route

La prochaine version comportera des modifications destructives de l'API, indiquées par le nouveau numéro de version (0.8). L'équipe tient toutefois à préciser qu'il ne s'agit pas d'une réécriture. La migration de votre projet actuel de Polymer 0.5 vers la version 0.8 devrait être assez simple.

L'équipe Polymer a également établi une feuille de route pour clarifier les prochaines versions pour les développeurs.

Feuille de route de Polymer, version bêta au 1er trimestre, version 1.0 au 2e trimestre

L'aperçu 0.8 est désormais disponible en tant que branche sur GitHub (bien qu'il soit toujours en cours de développement très actif et qu'il manque de documentation). La version bêta officielle 0.9 est prévue pour le premier trimestre 2015, et la version 1.0 pour le deuxième trimestre.

Le test est terminé

Avec tous les changements récents apportés à Polymer, l'équipe derrière ce projet jette les bases pour que les composants Web deviennent une partie intégrante de la pile de chaque développeur. Si vous ne connaissez pas bien Web Components, il est temps de vous familiariser avec ces technologies transformatrices. Si vous travaillez déjà avec des composants (et Polymer), l'avenir s'annonce prometteur. Consultez régulièrement le blog Polymer pour connaître les dernières informations et abonnez-vous à la liste de diffusion Polymer pour poser vos questions ou faire vos commentaires. Bon développement !