Il y a environ un an, en mai 2013, Google a lancé Polymer.js .
Nous voilà donc un an plus tard. Et la question est: est-il encore prêt pour les heures de grande écoute? Est-il encore possible de créer une application prête pour la production à l'aide des 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 comment il se comporterait. Cet article traite de cette expérience et de ce que j'ai appris au cours du processus.
Polymer.js: le concept
Avant d'entrer dans notre didacticiel sur 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 et autoproclamée. Polymer se veut 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 votre propre Éléments HTML et composez-les en 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 leurs éléments internes.
Les éléments, après tout, sont les éléments constitutifs du Web. En conséquence, Polymer’s vision du monde est que le développement web doit fondamentalement être basé sur l'extension du paradigme des éléments existants pour construire des composants Web , plutôt que de remplacer le balisage par «des tas de script» (pour reprendre leurs mots). Autrement dit, 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, c'est donc la théorie. Voyons maintenant la réalité.
Développement Web Polymer: la réalité
Si l’approche philosophique de Polymer a certainement du mérite, c’est malheureusement une idée qui (du 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 actuels. Les exemples incluent le ombre dom , éléments de modèle , éléments personnalisés , Importations HTML , observateurs de mutations , vues pilotées par modèle, événements de pointeur , et animations web . Ce sont des technologies merveilleuses, mais au moins à partir de maintenant, qui sont encore à venir pour les navigateurs modernes.
le processus d'autorisation du budget d'investissement de l'entreprise comprend combien d'étapes ?
La stratégie Polymer est d'avoir développeurs front-end tirer parti de ces technologies de pointe, encore à venir, basées sur les navigateurs, qui sont actuellement en cours de normalisation (par le W3C), à 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 aux navigateurs actuels). Les polyfills recommandés sont conçus de telle manière que (du moins en théorie) seront faciles à remplacer une fois que les versions de navigateur natives de ces fonctionnalités seront disponibles.
OK bien. Mais laissez-moi clarifier les choses. Au moins pour le moment, allons-nous utiliser des bibliothèques JavaScript (c'est-à-dire des polyfills) pour éviter l'utilisation de bibliothèques JavaScript? Eh bien, c’est «fascinant».
En fin de compte, nous sommes dans une sorte de mode limbo avec Polymer, car il repose en fin de compte sur (ou peut-être plus précisément, sur des technologies de navigateur qui n'existent pas encore). En conséquence, Polymer.js ressemble plus aujourd'hui à une étude sur la façon dont les applications centrées sur les éléments peuvent être construites à l'avenir (c'est-à-dire lorsque toutes les fonctionnalités nécessaires sont implémentées dans les principaux navigateurs et que les polyfills ne sont plus nécessaires). Mais, au moins à l'heure actuelle, Polymer ressemble plus à un concept intriguant qu'à une option réelle pour créer des applications robustes de changement de votre vision du monde ici et maintenant, ce qui rend l'écriture (ou la recherche) d'un didacticiel sur Polymer difficile en dehors. de la documentation de Google.
Architecture polymère
Maintenant, sur notre guide. Polymer.js est divisé sur le plan architectural 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 avec le temps à mesure que les fonctionnalités qu'elle fournit deviennent disponibles nativement 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. Éléments: Un ensemble d'éléments de base, destiné à servir de blocs de construction pouvant vous aider à créer votre application. Comprend des éléments qui fournissent: Des fonctionnalités de base telles que ajax, animation, disposition flexible et gestes. Encapsulation d'API de navigateur compliquées et de mises en page CSS. Rendu 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 y a quelques des articles et tutoriel comptes rendus qui vous aident à vous présenter Polymer, ses concepts et sa structure. Mais si vous êtes comme moi, lorsque vous les avez parcourus et que vous êtes prêt à créer votre application, vous vous rendez vite compte que vous ne savez vraiment pas par où commencer ni comment la créer. Puisque j’ai parcouru le processus et que j’ai compris, voici quelques conseils…
Le développement Web en polymère consiste à créer des éléments et à créer uniquement des éléments. Donc, conformément à la vision du monde Polymer, notre application va être… un nouvel élément. Rien de plus et rien de moins. Oh OK, je comprends. C’est par là que nous commençons.
Pour notre exemple de projet Polymer, je nommerai l'élément de niveau supérieur de l'application, car 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, des balises x, des éléments polymères, etc. .).
La prochaine étape, cependant, nécessite un peu plus de réflexion. Nous devons décider de la manière dont nous allons composant 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.
Par exemple, imaginez 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 serait de créer l'é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 la 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 du polymère. 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 à partir de tout 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 (comme celles de Mozilla X jour ). 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 Éléments personnalisés site. 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 développeurs d'applications novices , sont susceptibles de le trouver quelque peu cassant, avec un certain nombre de bords rugueux pas si difficiles à trouver.
Voici un échantillon:
- Manque de documentation et d'orientation.
- Tous les éléments de l'interface utilisateur et non-UI 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 Polymer Element pour mieux comprendre comment il fonctionne et peut / doit être utilisé.
- Il n'est pas tout à fait clair comment organiser des applications plus volumineuses. En particulier, comment êtes-vous censé passer des objets singleton entre les éléments? Quelle stratégie devriez-vous utiliser pour tester vos éléments personnalisés? Les conseils sur ces types de problèmes à ce stade sont au mieux insuffisants.
-
Erreurs de dépendance et version-itis. Même lorsque vous téléchargez des éléments Polymer.js comme cela est 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 cours de 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 se situer entre frustrantes et problématiques.
- Téléchargement de la bibliothèque entière 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.
- Surtout 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, une telle frustration que j'ai rencontrée était avec rendu dans un canevas sur iOS .
- Rapports d'erreurs inadéquats ou déroutants. Parfois, lorsque vous orthographiez 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 pour éviter l'erreur, car vous ne pouvez pas retrouver sa source.
Conclusion
Le polymère est une technologie intrigante, mais il n'en est indéniablement qu'à ses débuts. En tant que tel, il n’est pas encore bien adapté au développement d’une application de grande envergure, prête pour la production. De plus, il n’existe pas beaucoup de guides ou de didacticiels 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 est toujours absent. Polymer présente des arguments convaincants, mais des contre-arguments existent.
quelle est la différence entre la société c et la société s
Peut-être plus particulièrement, Polymer nécessite un niveau d'expertise assez important dans l'utilisation de technologies de navigateur comme le DOM. À bien des égards, vous revenez aux jours précédant 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 tôt plutô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 bon point de départ.
En relation: Tutoriel Meteor: Création d'applications Web en temps réel avec Meteor
