Polymer.js : l'avenir du développement d'applications Web ?

Il y a environ un an, en mai 2013, Google a lancé Polymer.js.

Alors nous y voilà, un an plus tard. Et la question est : est-ce déjà prêt pour le prime time ? Est-il encore possible de créer une application prête pour la production en utilisant les techniques de développement Web Polymer ?

Pour répondre à cette question, j'ai emmené Polymer faire un essai routier pour développer une application Web et voir à quel point elle se comporterait. Cet article porte sur cette expérience et sur ce que j'ai appris au cours du processus.

Polymer.js : le concept

Avant d'entrer dans notre didacticiel Polymer, définissons d'abord Polymer.js, non pas pour ce qu'il prétend être, mais pour ce qu'il est réellement.

Lorsque vous commencez à découvrir Polymer, vous ne pouvez pas vous empêcher d'être immédiatement intrigué par sa vision du monde unique autoproclamée. Polymer prétend adopter une sorte d'approche de retour à la nature qui "remet les éléments au centre du développement Web". Avec Polymer.js, vous pouvez créer vos propres éléments HTML et les composer dans des applications Web complètes et complexes, évolutives et maintenables. Il s'agit de créer de nouveaux éléments (c'est-à-dire personnalisés) qui peuvent ensuite être réutilisés dans vos pages HTML de manière déclarative, sans avoir besoin de connaître ou de comprendre leur fonctionnement interne.

Les éléments, après tout, sont les éléments constitutifs du Web. En conséquence, le weltanschauung de Polymer est que le développement Web devrait fondamentalement être basé sur l'extension du paradigme d'élément existant pour créer des composants Web plus puissants, plutôt que de remplacer le balisage par des "gobs of script" (pour reprendre leurs mots). En d'autres termes, Polymer croit qu'il faut tirer parti des technologies "natives" du navigateur plutôt que de s'appuyer sur un labyrinthe de plus en plus complexe de bibliothèques JavaScript personnalisées (jQuery et. al.). Une notion intrigante en effet.

OK, donc c'est la théorie. Voyons maintenant la réalité.

Développement Web en polymère : la réalité

Bien que l'approche philosophique de Polymer ait certainement du mérite, c'est malheureusement une idée qui (au moins dans une certaine mesure) est en avance sur son temps.

Polymer.js impose un ensemble important d'exigences au navigateur, s'appuyant sur un certain nombre de technologies qui sont encore en cours de normalisation (par le W3C) et qui ne sont pas encore présentes dans les navigateurs d'aujourd'hui. Les exemples incluent le shadow dom, les éléments de modèle, les éléments personnalisés, les importations HTML, les observateurs de mutation, les vues pilotées par modèle, les événements de pointeur et les animations Web. Ce sont des technologies merveilleuses, mais au moins pour le moment, qui sont encore à venir dans les navigateurs modernes.

La stratégie de Polymer consiste à faire en sorte que les développeurs front-end tirent parti de ces technologies de pointe, encore à venir, basées sur un navigateur, qui sont actuellement en cours de normalisation (par le W3C), au fur et à mesure qu'elles deviennent disponibles. En attendant, afin de combler le vide, Polymer suggère l'utilisation de polyfills (code JavaScript téléchargeable qui fournit des fonctionnalités qui ne sont pas encore intégrées dans les navigateurs d'aujourd'hui). Les polyfills recommandés sont conçus de manière à pouvoir (au moins théoriquement) être remplacés de manière transparente une fois que les versions natives du navigateur de ces fonctionnalités seront disponibles.

OK bien. Mais laissez-moi clarifier les choses. Au moins pour l'instant, nous allons utiliser des bibliothèques JavaScript (c'est-à-dire des polyfills) pour éviter l'utilisation de bibliothèques JavaScript ? Eh bien, c'est "fascinant".

L'essentiel, alors, est que nous sommes dans une sorte de mode limbo avec Polymer, car il s'appuie finalement sur (ou peut-être plus précisément, se rapproche) de technologies de navigateur qui n'existent pas encore. En conséquence, Polymer.js ressemble aujourd'hui davantage à une étude sur la manière dont les applications centrées sur les éléments pourraient être construites à l'avenir (c'est-à-dire lorsque toutes les fonctionnalités nécessaires seront implémentées dans les principaux navigateurs et que les polyfills ne seront plus nécessaires). Mais, au moins à l'heure actuelle, Polymer ressemble plus à un concept intrigant qu'à une option réelle pour créer des applications robustes qui changent votre vision du monde ici et maintenant, ce qui rend difficile l'écriture (ou la recherche) d'un didacticiel Polymer à l'extérieur. de la documentation de Google.

Architecture polymère

Maintenant, sur notre guide. Polymer.js est architecturalement divisé en quatre couches :

Natif : fonctionnalités nécessaires actuellement disponibles en mode natif dans tous les principaux navigateurs. Fondation : Polyfills qui implémentent les fonctionnalités de navigateur nécessaires qui ne sont pas encore disponibles nativement dans les navigateurs eux-mêmes. (L'intention est que cette couche disparaisse au fil du temps à mesure que les fonctionnalités qu'elle fournit deviennent disponibles en mode natif dans le navigateur.). Core : L'infrastructure nécessaire pour que les éléments Polymer exploitent les capacités fournies par les couches Native et Foundation. Elements : Un ensemble d'éléments de base, destiné à servir de blocs de construction qui peuvent vous aider à créer votre application. Inclut des éléments qui fournissent : des fonctionnalités de base comme ajax, une animation, une mise en page flexible et des gestes. Encapsulation d'API de navigateur compliquées et de mises en page CSS. Rendus de composants d'interface utilisateur tels que des accordéons, des cartes et des barres latérales.

Création d'une application polymère

Pour commencer, il existe des articles et des tutoriels qui vous aident à vous présenter Polymer, ses concepts et sa structure. Mais si vous êtes un peu comme moi, lorsque vous les avez parcourus et que vous êtes prêt à créer votre application, vous réalisez rapidement que vous ne savez vraiment pas par où commencer ni comment la créer. Puisque j'ai maintenant suivi le processus et que je l'ai compris, voici quelques conseils…

Le développement Web polymère consiste à créer des éléments, et uniquement à créer des éléments. Ainsi, conformément à la vision du monde des polymères, notre application va être… un nouvel élément. Rien de plus et rien de moins. Ah d'accord, j'ai compris. C'est donc là que nous commençons.

Pour notre exemple de projet Polymer, je nommerai l'élément de niveau supérieur de l'application , puisque les noms d'éléments personnalisés (quel que soit le cadre que vous utilisez pour les créer) doivent inclure un trait d'union (par exemple, x-tags, polymer-elements, etc.).

La prochaine étape, cependant, nécessite un peu plus de réflexion. Nous devons décider comment nous allons composer notre application. Une approche simple consiste simplement à essayer d'identifier, d'un point de vue visuel, les composants de notre application, puis à essayer de les créer en tant qu'éléments personnalisés dans Polymer.

Ainsi, par exemple, imaginons que nous ayons une application avec les écrans suivants :

Nous pouvons identifier que la barre supérieure et le menu de la barre latérale ne changeront pas et que le "contenu" réel de l'application pourrait charger différentes "vues".

Cela étant, une approche raisonnable consisterait à créer le élément pour notre application et, à l'intérieur de cet élément, nous pourrions utiliser des éléments d'interface utilisateur en polymère pour créer la barre supérieure et le menu de la barre latérale.

Nous pouvons ensuite créer nos deux vues principales, que nous appellerons ListView et SingleView, à charger dans la zone "contenu". Pour les éléments de ListView, nous pouvons créer un ItemView.

Cela donnera alors une structure quelque chose comme ceci :

La bonne nouvelle

Maintenant que nous avons notre exemple d'application Polymer, nous pouvons l'insérer dans n'importe quelle page Web simplement en important notre "toptal-app.html" et en ajoutant la balise car, après tout, notre application n'est qu'un élément. C'est super.

En fait, c'est là que réside une grande partie de la puissance et de la beauté du paradigme des polymères. Les éléments personnalisés que vous créez pour votre application (y compris celui de niveau supérieur pour l'ensemble de votre application) sont traités comme n'importe quel autre élément d'une page Web. Vous pouvez donc accéder à leurs propriétés et méthodes depuis n'importe quel autre code ou bibliothèque JavaScript (par exemple, Backbone.js, Angular.js, etc.). Vous pouvez même utiliser ces bibliothèques pour créer vos propres nouveaux éléments.

De plus, vos composants personnalisés sont compatibles avec d'autres bibliothèques d'éléments personnalisés (telles que X-Tag de Mozilla). Ainsi, peu importe ce que vous utilisez pour créer votre propre élément personnalisé, il est compatible avec Polymer et toute autre technologie de navigateur.

Il n'est donc pas surprenant que nous ayons déjà commencé à voir l'avènement d'une communauté de créateurs d'éléments qui exposent et partagent leurs éléments nouvellement créés dans des forums comme le site Custom Elements. Vous pouvez y aller et récupérer le composant dont vous avez besoin et l'utiliser simplement dans votre application.

D'autre part…

Le polymère est encore une technologie suffisamment nouvelle pour que les développeurs, en particulier les développeurs d'applications novices, la trouvent probablement quelque peu fragile, avec un certain nombre de bords rugueux pas si difficiles à trouver.

Voici un échantillon :

• Manque de documentation et d'orientation.
  • Tous les éléments d'interface utilisateur et non-interface Polymer.js ne sont pas documentés. Parfois, le seul "guide" sur la façon de les utiliser est le code de démonstration. Dans certains cas, il est même nécessaire de se référer au code source d'un Elément Polymère pour mieux comprendre comment il fonctionne et peut/doit être utilisé.
  • Il n'est pas tout à fait clair comment organiser des applications plus importantes. En particulier, comment êtes-vous censé passer des objets singleton entre les éléments ? Quelle stratégie devez-vous utiliser pour tester vos éléments personnalisés ? Les conseils sur ces types de problèmes à ce stade sont, au mieux, rares.

• Erreurs de dépendance et version-itis. Même lorsque vous téléchargez des éléments Polymer.js comme recommandé, vous pouvez vous retrouver avec une erreur de dépendance, pointant vers différentes dépendances de version dans le même élément. Bien qu'il soit entendu que les éléments polymères sont actuellement en développement intensif, ce type de problèmes peut rendre le développement assez difficile, érodant la confiance et l'intérêt des développeurs.

• Problèmes sur les plates-formes mobiles. Les performances de Polymer.js sur les plates-formes mobiles peuvent souvent être quelque part entre frustrantes et problématiques.
  • Le téléchargement de l'intégralité de la bibliothèque et des polyfills (sans gzip'ing) est lent et vous devez télécharger chaque élément polymère que vous avez l'intention d'utiliser.
  • Le traitement des polyfills, des bibliothèques et des éléments personnalisés semble être une tâche coûteuse sur les plates-formes mobiles. Même lorsque le téléchargement est terminé, vous avez encore souvent un écran vide pendant quelques secondes.
  • En particulier pour les fonctionnalités plus complexes (telles que le glisser-déposer ou le rendu dans un canevas), vous pouvez constater que les fonctionnalités qui fonctionnent correctement sur le bureau ne fonctionnent tout simplement pas correctement ou ne sont pas encore prises en charge sur la plate-forme mobile. Dans mon cas particulier, l'une de ces frustrations que j'ai rencontrées concernait le rendu dans un canevas sur iOS.
• Rapports d'erreurs inadéquats ou déroutants. Parfois, lorsque vous épelez mal un nom d'attribut ou que vous cassez simplement quelque chose lié à la couche principale elle-même, vous recevez un message d'erreur étrange sur votre console avec deux piles d'appels que vous devez examiner pour essayer de déterminer où se situe le problème. Parfois, il est facile de résoudre ce problème, mais parfois vous devez essayer une stratégie complètement différente juste pour éviter l'erreur puisque vous ne pouvez pas retrouver sa source.

Conclusion

Le polymère est une technologie intrigante, mais elle en est indéniablement encore à ses balbutiements. En tant que tel, il n'est pas encore bien adapté au développement d'une grande application prête pour la production au niveau de l'entreprise. De plus, il n'y a pas beaucoup de guides ou de tutoriels disponibles spécifiques au développement Web Polymer.js.

Quant à savoir si l'approche centrée sur JavaScript ou centrée sur DOM est vraiment fondamentalement meilleure, le jury n'est toujours pas résolu. Polymer avance des arguments convaincants, mais des contre-arguments existent.

Peut-être plus particulièrement, Polymer nécessite un niveau d'expertise assez important dans l'utilisation des technologies de navigateur comme le DOM. Vous revenez à bien des égards à l'époque d'avant jQuery, en apprenant l'API DOM pour effectuer des tâches simples comme l'ajout ou la suppression d'une classe CSS d'un élément. Cela donne certainement l'impression, au moins à un certain niveau, que vous faites un pas en arrière plutôt qu'en avant.

Mais cela dit, il semble probable que les éléments personnalisés seront une partie importante du développement Web à l'avenir, donc plonger plus tôt que tard serait probablement prudent pour le développeur Web d'aujourd'hui. Et si vous n'avez jamais essayé de créer vos propres éléments personnalisés auparavant, Polymer (et ce didacticiel) est probablement un point de départ judicieux.