Share
Note de l'éditeur: Cet article a été mis à jour pour supprimer les références aux composants obsolètes, spécifiquement polymère-ajax, qui a depuis été remplacé par core-ajax. Grâce à Rob Dodson, développeur avocat chez Google, pour les commentaires.
La construction d'applications Web modernes nécessite beaucoup d'outils. Cela inclut les pré-processeurs, les frameworks JavaScript, les outils de test et bien plus encore. Et à mesure que la complexité de ces applications augmente, l’éventail d’outils et de services nécessaires à leur gestion augmente également. Ne serait-il pas formidable de simplifier certaines choses?
Les composants Web visent à résoudre certaines de ces complexités en fournissant un moyen unifié de créer de nouveaux éléments qui englobent des fonctionnalités riches sans avoir besoin de toutes les bibliothèques supplémentaires. Les composants Web sont composés de quatre spécifications différentes (éléments personnalisés, modèles, importations Shadow DOM et HTML) qui sont développées dans le W3C..
Pour combler le fossé et permettre aux développeurs d'accéder à cette riche fonctionnalité, Google a créé la bibliothèque Polymer, qui sert de jeu de remplissages permettant de vous offrir la promesse des composants Web. Let's plonger un peu plus loin dans.
Comme je l'ai mentionné, la bibliothèque Polymer est un ensemble de polyfill qui vous aide à créer des composants Web sur tous les principaux navigateurs modernes. Il fournit le cadre permettant de définir, de créer et de restituer des éléments personnalisés complexes de manière simpliste, à l’instar des balises avec lesquelles vous avez grandi. Ce que je veux dire par là, c'est que cela aide à simplifier la façon dont nous utilisons des composants complexes en:
Mais la chose importante à retenir est que le cadre lui-même est développé sur la base de la direction des spécifications individuelles examinées par le W3C, fournissant ainsi une base qui devrait évoluer avec la direction du principal organisme de normalisation..
Ce que cette bibliothèque peut faire est de nous permettre de créer des composants réutilisables qui fonctionnent comme de vrais éléments DOM tout en réduisant notre dépendance à JavaScript pour effectuer des manipulations complexes du DOM afin de restituer des résultats d'interface utilisateur riches..
Voici un exemple rapide tiré du site Polymer. Dites que je voulais rendre une horloge de travail sur ma page. Cela impliquerait généralement un code JavaScript très puissant, mais en utilisant Polymer, je peux simplement utiliser la syntaxe suivante:
Cela ressemble à la syntaxe de balise HTML avec laquelle nous avons tous grandi et est beaucoup plus facile à implémenter, à lire et à maintenir que certains codes JavaScript complexes. Et le résultat final ressemble à ceci:
Et comme il s’agit d’un élément normal dans le DOM, vous pouvez aussi le nommer en utilisant CSS comme ceci:
Accentsconagua
polymère-ui-clock largeur: 320px; hauteur: 320px; affichage: inline-block; background: url ("… /assets/glass.png") no-repeat; taille du fond: couverture; bordure: rgba solide 4px (32, 32, 32, 0,3); Ce n'est certainement pas la plus belle horloge, mais ce n'est pas le point. Le fait est que vous pouvez personnaliser le composant à votre guise, puis le réutiliser via une syntaxe plus facile et plus facile à gérer..
Il existe trois façons d'installer et d'utiliser Polymer:
Parmi les trois solutions, la solution la plus simple et la plus recommandée consiste à utiliser Bower, car non seulement cela est incroyablement facile à faire, mais également la gestion des dépendances éventuelles de Polymer. Cela signifie que si vous choisissez d'installer un élément d'interface utilisateur spécifique dépendant d'un autre, Bower peut le gérer pour vous..
Bower est installé en tant que module de noeud Node, vous devez donc installer Node.js. A partir de la ligne de commande, tapez ce qui suit:
npm installer -g bower
Cela devrait extraire Bower du registre npm et l'installer de manière à ce qu'il soit globalement disponible. À partir de là, les installations ultérieures basées sur Bower prennent la forme suivante:
bower installer
Au minimum, vous souhaiterez installer la plate-forme et les composants principaux de Polymer, car ils vous permettent de créer et d'exécuter vos éléments client..
bower installer --save polymère / plate-forme bower installer --save polymère / polymère
Vous pouvez raccourcir ceci en tapant:
bower installer --save Polymère / Plate-forme Polymère / Polymère
Polymer est également fourni avec un riche ensemble d’éléments prédéfinis que vous pouvez commencer à exploiter immédiatement. Ils se composent d'éléments d'interface utilisateur et non basés sur l'interface utilisateur qui fournissent des fonctionnalités telles que:
Et ce n'est que gratter la surface. Il y a déjà beaucoup de choses avec le code source complet disponible pour servir d'outil d'apprentissage, ainsi que pour vous permettre de personnaliser les fonctionnalités selon vos besoins..
Vous avez le choix quant à la manière d'installer ces composants. Vous pouvez installer tout ou seulement ceux que vous souhaitez utiliser. Pour tout installer, vous tapez:
bower installer polymère / noyau-éléments bower installer polymère / polymère-ui-elements
C'est l'approche de l'évier de la cuisine et lorsque vous commencez à apprendre Polymer, il est probablement plus facile de le faire, pour vous aider à avoir une idée de ce qui est disponible..
Une fois que vous êtes plus familiarisé avec le cadre, vous pouvez sélectionner les composants que vous souhaitez utiliser et les installer comme suit:
bower installer Polymère / polymère-accordéon
C'est la beauté d'utiliser Bower. Chaque composant est livré avec un bower.json fichier de configuration qui décrit ses dépendances. Donc, si vous installiez le accordéon composant, en regardant la config, on peut voir qu’il a des dépendances sur le principal polymère composant ainsi que le sélecteur et pliant Composants.
"nom": "polymère-accordéon", "privé": vrai, "dépendances": "polymère": "polymère / polymère n ° 0.2.0", "polymère-sélecteur": "polymère / sélecteur de polymère # 0.2.0 "," polymère-repliable ":" polymère / polymère-repliable # 0.2.0 "," version ":" 0.2.0 "
L'essentiel est que vous n'ayez pas à vous inquiéter à ce sujet, car Bower gère cela pour vous. C’est pourquoi il s’agit de l’outil préféré pour l’installation de Polymer.
L’installation via Bower créera un dossier appelé bower_components dans votre dossier de projet contenant tous les éléments dont Polymer a besoin.
Le site Polymer décrit la description d’éléments personnalisés:
«Les éléments personnalisés sont les éléments de base des applications basées sur les polymères. Vous créez des applications en assemblant des éléments personnalisés, que ce soit ceux fournis par Polymer, ceux que vous créez vous-même ou des éléments tiers. ”
Polymer nous donne la possibilité de créer nos propres éléments personnalisés à partir de rien et même de réutiliser d'autres éléments pour étendre nos éléments personnalisés. Ceci est fait en créant d'abord un modèle de l'élément personnalisé. Pour toutes les intentions, ce modèle est une combinaison de HTML, CSS et JavaScript et inclut les fonctionnalités qui seront disponibles lorsque vous utiliserez l'élément. Il est basé sur la spécification de modèles HTML WhatWG, qui vise à fournir un support natif pour les modèles côté client..
Regardons cet exemple simple de modèle Polymer:
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cet élément vous permet d'ajouter facilement du texte Lorem Ipsum dans votre code en utilisant simplement la balise suivante:
La première chose à inclure est Polymer Core, qui est la principale API permettant de définir les éléments personnalisés:
La prochaine étape consiste à définir le nom du nouvel élément à l’aide de Polymer. élément polymère directif:
Dans ce cas, j'ai nommé mon nouvel élément élément lorem. Le nom est un attribut obligatoire et il doit contenir un tiret (“-”).
De là nous utilisons le modèle directive pour envelopper les balises principales du corps et le code qui composera notre nouvel élément. Pour cet exemple simple, je récupère le texte de Lorem Ipsum et l’emballe avec des balises de paragraphe..
C'est tout! Mon élément personnalisé est terminé et je peux maintenant l'utiliser.
N'oubliez pas que ce composant sera importé dans d'autres pages de votre application Web susceptibles de l'exploiter. Cela est possible grâce à la mise en œuvre par Polymer de la spécification HTML Imports qui vous permet d'inclure et de réutiliser des documents HTML dans d'autres documents HTML..
Tout d'abord, vous devez inclure platform.js qui fournit le polyfill qui imite les API natives:
Ensuite, nous devons importer notre élément personnalisé dans notre page Web:
Une fois que vous avez fait cela, votre nouvel élément personnalisé est maintenant disponible, vous permettant de faire quelque chose comme ceci:
Vous avez également la possibilité de styler complètement l'élément:
Ceci est un exemple assez basique. Allons un peu plus loin.
Si vous vous en souvenez, j'ai déjà expliqué comment vous pouvez utiliser les éléments existants pour améliorer votre élément personnalisé. Regardons un exemple de cela.
Supposons que je veuille avoir un élément envoyé à Reddit et récupéré les données d’un des sous-titres. Je pourrais tirer parti du composant Ajax existant de Polymer en l'incluant dans mon élément personnalisé, comme ceci:
resp.data.public_description
Notez que j'importe le composant Polymer Ajax puis que je le dépose dans mon modèle. Cela facilite maintenant la référence à mon nouvel élément qui appelle XHR afin de récupérer les données JSON et de les compléter dans les balises de paragraphe avec la description publique de subreddit:
“Les choses qui vous rendent AWW! Comme des chiots. Et des lapins… et ainsi de suite… Un endroit pour des images, des vidéos et des histoires vraiment mignonnes! ”
La réponse est renvoyée et Polymer établit une liaison de données bidirectionnelle qui me permet d’utiliser les données en les enveloppant dans des doubles accolades comme celle-ci. resp.data.public_description.
C'est cool, mais dans la plupart des cas, nous n'allons pas coder en dur une URL pour une ressource spécifique. Développons cela davantage en ajoutant des attributs à notre élément personnalisé. Faire cela est incroyablement simple. Tout d’abord, vous devez mettre à jour le élément polymère directive pour refléter les attributs que vous souhaitez pour votre élément personnalisé:
Dans ce cas, je veux pouvoir transmettre un sous-transfert à mon élément et lui demander de récupérer des données en fonction de cela. Je peux maintenant changer l'appel en polymère-ajax comme ça:
Notez que j'utilise les capacités de liaison de données de Polymer pour créer de manière dynamique l'URL en fonction de la valeur d'attribut de subreddit. Maintenant, je peux mettre à jour la manière dont je fais référence à mon élément personnalisé pour le transmettre dans le subreddit que je souhaite:
La dernière chose que je veux faire est de veiller à ce qu'il y ait une valeur par défaut pour mon attribut afin que mon code ne explose pas. Je le fais en ajoutant ce qui suit dans mon gabarit d'élément:
Cela garantit que j'aurai toujours une valeur par défaut pour l'attribut public de mon élément. Voici à quoi ressemble le code final:
resp.data.public_description
Et vous pouvez faire beaucoup plus de choses, notamment ajouter des gestionnaires de rappel personnalisés, gérer des événements, configurer des observateurs de mutation pour traiter les modifications apportées au DOM, et bien plus encore..
Les composants Web vont changer notre façon de créer des applications Web et Polymer nous le présente aujourd'hui. Vous avez maintenant la possibilité de créer vos propres composants personnalisés et maintenables qui peuvent être adaptés aux besoins spécifiques de votre application. Ces composants peuvent être facilement partagés, ce qui permet aux autres équipes ou à la communauté de partager facilement ces blocs de construction encapsulés et d'en tirer parti..
