Cette page a été traduite par l'API Cloud Translation.

Yo Polymer - Visite guidée des outils de composants Web

Addy Osmani

Web Components va changer tout ce que vous pensez de la création pour le Web. Pour la première fois, le Web dispose d'API de bas niveau qui nous permettent non seulement de créer nos propres balises HTML, mais aussi d'encapsuler la logique et les fichiers CSS. Fini le code récurrent ni les soupes de feuilles de style ! C'est un nouveau monde courageux où tout est élémentaire.

Dans mon intervention de DotJS, j'explique ce que les composants Web peuvent offrir et comment les créer à l'aide d'outils modernes. Je vais vous montrer Yeoman, un workflow d'outils permettant de simplifier la création d'applications Web à l'aide de Polymer, une bibliothèque de polyfills et de sucre qui permet de développer des applications à l'aide de composants Web dans les navigateurs modernes.

Créer des éléments personnalisés et installer des éléments créés par d'autres utilisateurs

Dans cette présentation, vous découvrirez:

Présentation des quatre différentes spécifications qui composent les composants Web: éléments personnalisés, modèles, Shadow DOM et importations HTML.
Définir vos propres éléments personnalisés et installer des éléments créés par d'autres utilisateurs à l'aide de Bower
Passez moins de temps à rédiger du code JavaScript et plus de temps à créer des pages
Utiliser des outils d'interface modernes (Yeoman) pour structurer une application utilisant Polymer avec un générateur-polymère
Découvrez les super changements de Polymer dans la création de composants Web.

Par exemple, pour installer les polyfills Web Component de Polymer et la bibliothèque elle-même, vous pouvez exécuter la pellicule suivante:

bower install --save Polymer/platform Polymer/polymer

Un dossier bower_components et les packages ci-dessus sont ajoutés. --save les ajoute au fichier bower.json de votre application.

Par la suite, si vous souhaitez installer l'élément accordéon de Polymer, vous pouvez exécuter la commande suivante:

bower install --save Polymer/polymer-ui-accordion

puis importez-la dans votre application:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

Pour gagner du temps, vous pouvez créer une nouvelle application Polymer avec toutes les dépendances dont vous avez besoin, le code récurrent et les outils d'optimisation de votre application avec Yeoman, en utilisant cette autre phrase:

yo polymer

Tutoriel bonus

J'ai également enregistré un tutoriel bonus de 30 minutes sur l'application Polymer Jukebox que je présente dans cette vidéo.

Couvert dans la vidéo bonus:

Que signifie le mantra « tout est un élément »
Utiliser Bower pour installer des polyfills et des éléments Polymer's Platform
Structurer notre application Jukebox avec le générateur et les sous-générateurs Yeoman
Comprendre les fonctionnalités de la plate-forme intégrées via du code récurrent
Portage fonctionnel d'une application Angular vers Polymer

Nous utilisons également des sous-générateurs Yeoman pour structurer nos nouveaux éléments Polymer, par exemple pour créer le code récurrent d'un élément foo que nous exécutons:

yo polymer:element foo

qui nous demandera si nous voulons que l'élément soit automatiquement importé, si un constructeur est requis et pour quelques autres préférences.

Les dernières sources de l'application présentées dans les deux conférences sont désormais disponibles sur GitHub. Je l'ai un peu plus refactorisée pour qu'elle soit plus organisée et un peu plus facile à lire.

Aperçu de l'application:

Complément d'informations

En résumé, Polymer est une bibliothèque JavaScript qui active les composants Web dans les navigateurs Web modernes, en attendant leur implémentation native. Des outils modernes peuvent vous aider à améliorer votre workflow en les utilisant. Vous pouvez aussi tester Yeoman et Bower lorsque vous développez vos propres balises.

Voici d'autres articles qui méritent d'être consultés sur le sujet: