Polymer et les composants Web sont des sujets d'actualité récents. Étant donné que cet écosystème évolue rapidement, il peut souvent être difficile pour les développeurs de se tenir informés des derniers changements.
Lors de son intervention au Chrome Dev Summit, Matt McNulty, responsable ingénierie de l'équipe Polymer, a expliqué ce qu'est Polymer et présenté la feuille de route de Polymer 1.0.
Qu'est-ce que Polymer ?
Tout d'abord, qu'est-ce que Polymer exactement ?
Polymer est une bibliothèque qui vous aide à créer des éléments et des applications à partir de composants Web. Les composants Web constituent un ensemble de pointe de nouvelles normes qui permettent aux développeurs d'étendre le vocabulaire HTML avec leurs propres éléments personnalisés.
Étant donné que les composants Web ont été conçus comme une nouvelle primitive pour le navigateur, ils sont très puissants, mais également de très bas niveau, et leur utilisation nécessite un peu de code.
Polymer facilite l'utilisation des composants Web en "sucrée" la syntaxe. Elle réduit la quantité de code récurrent à écrire et ajoute un style déclaratif afin que la création de composants Web soit aussi simple que d'écrire du code HTML.
L'expérience des polymères
Polymer a commencé par une expérience visant à déterminer si nous pouvions émuler les normes de composants Web et obtenir les commentaires des développeurs avant le lancement de ces technologies dans tous les navigateurs. De plus en plus de développeurs ont commencé à utiliser Polymer, qui n'était plus simplement des polyfills, mais une véritable bibliothèque regorgeant de fonctionnalités de productivité (liaison de données, observateurs des modifications d'attributs, recherche automatique de nœuds, etc.). Mais toutes les expériences ont des résultats. Alors, comment avons-nous fait ?
De nombreux développeurs ont déclaré qu'ils appréciaient l'expressivité et les gains de productivité liés à l'utilisation de Web Components dans Polymer, mais ils se sont également préoccupés des performances et de la complexité globale.
Il met en évidence une tension naturelle que Polymer a vécue depuis le début: être une expérience pour faire avancer la plate-forme Web, mais aussi créer quelque chose d'intérêt pour la production sur lequel les développeurs peuvent compter.
Changements à venir
L'équipe Polymer a passé en revue toutes les fonctionnalités de la bibliothèque dans le but de créer une version plus simple, prête pour la production, que les développeurs peuvent utiliser en toute confiance.
Calques
Polymer a été refactorisé en une série de couches. Les principales fonctionnalités sont rapides et épurées, tandis que les fonctionnalités plus avancées sont à activer. Dans la plupart des cas d'utilisation, les fonctionnalités de base doivent répondre aux besoins des développeurs.
Liaison de données simplifiée
Le système de liaison de données de Polymer a également été considérablement optimisé en termes de performances. Suite à l'approche multicouche, la liaison bidirectionnelle est désormais activable, la valeur par défaut étant des liaisons à sens unique. De plus, les types de propriétés publiés ont été rendus explicites et une modification de propriété déclenche désormais un événement pour aider les éléments de différentes bibliothèques à communiquer plus facilement.
Shadow DOM plus long
Le polyfill Shadow DOM est un véritable exploit en termes d'ingénierie. Il a été conçu pour être complet et conforme aux spécifications, ce qui est important pour tester de manière approfondie la primitive de la plate-forme. Malheureusement, il introduit un certain nombre de goulots d'étranglement affectant les 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 type shim qui ne polyfill que ce dont Polymer a besoin.
Le polyfill existant continuera de fonctionner pour les composants Web génériques autres que Polymer.
Passage à webcomponents.org
En parlant de polyfills, ceux-ci ont également changé d'emplacement. À l'heure actuelle, de nombreux développeurs ne comprennent pas la relation entre Polymer et Web Components. Certains pensent que vous devez utiliser tout Polymer pour utiliser les Web Components, alors qu'en réalité, vous n'avez besoin que des polyfills.
Pour que cette distinction soit plus claire, les polyfills sont déplacés vers le site webcomponents.org et renommés webcomponents.js.
Ce déplacement a pour but d'aider les autres auteurs de la bibliothèque à exploiter les polyfills sans aucune confusion. L'équipe Polymer continuera de contribuer aux polyfills, mais l'objectif est que ce changement en fasse une ressource davantage partagée pour la communauté.
Résultats
Quels sont les résultats de tous ces changements ?
Vitesse
Sur Chrome, Polymer est désormais 5 fois plus rapide, et sur Safari, il a été 8 fois plus rapide.
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).
Feuille de route
L'API fera l'objet de modifications destructives dans la prochaine version, représentées par le nouveau numéro de version (0.8), mais l'équipe souhaite préciser qu'il ne s'agit pas d'une réécriture. Le transfert de votre projet actuel de Polymer 0.5 à 0.8 devrait être assez simple.
L'équipe Polymer a également défini une feuille de route pour clarifier les versions à venir des développeurs.
La version preview 0.8 est maintenant disponible sous forme de branche sur GitHub (bien qu'elle soit encore très activement développée et qu'elle manque de documentation). La version bêta officielle 0.9 est prévue pour le 1er trimestre 2015, et la version 0.0 au cours du 2e trimestre.
Le test est terminé
Avec tous les récents changements apportés à Polymer, son équipe prépare le terrain pour que les composants Web fassent partie intégrante de la pile de tous les développeurs. Si vous ne connaissez pas encore les composants Web, c'est le moment idéal pour vous familiariser avec ces technologies novatrices. Si vous travaillez déjà avec des composants (et Polymer), l'avenir s'annonce radieux. Consultez régulièrement le blog Polymer pour vous tenir informé des dernières nouveautés, et inscrivez-vous à la liste de diffusion Polymer pour poser vos questions ou envoyer vos commentaires. Bon hacking !