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

Les composants Web vont changer tout ce que vous pensiez savoir sur le développement pour le Web. Pour la première fois, le Web disposera d'API de bas niveau qui nous permettront non seulement de créer nos propres balises HTML, mais aussi d'encapsuler la logique et le CSS. Plus besoin de feuilles de style globales ni de code générique ! C'est un nouveau monde où tout est un élément.

Dans ma conférence DotJS, je présente ce que les composants Web ont à offrir et comment les créer à l'aide d'outils modernes. Je vais vous présenter 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 pour 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 allez découvrir:

  • À propos des quatre spécifications différentes qui composent les Web Components: les éléments personnalisés, les modèles, le Shadow DOM et les 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 à écrire du code JavaScript et plus à créer des pages
  • Utiliser des outils de frontend modernes (Yeoman) pour créer une application avec Polymer avec generator-polymer
  • Comment Polymer change la création de composants Web

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

bower install --save Polymer/platform Polymer/polymer

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

Plus tard, si vous souhaitez installer l'élément accordéon de Polymer, vous pouvez exécuter:

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

puis importez-le 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 application Polymer avec toutes les dépendances dont vous avez besoin, le code de base et les outils d'optimisation de votre application avec Yeoman à l'aide de cette autre ligne de code:

yo polymer

Tutoriel bonus

J'ai également enregistré une visite guidée bonus de 30 minutes de l'application Polymer Jukebox que je présente dans la conférence.

Traités dans la vidéo bonus:

  • Signification du mantra "Tout est un élément"
  • Utiliser Bower pour installer les éléments et les polyfills de la plate-forme de Polymer
  • Créer une structure pour notre application Jukebox avec le générateur et les sous-générateurs Yeoman
  • Comprendre les fonctionnalités de la plate-forme étayées par du code standard
  • Comment j'ai porté fonctionnellement une application Angular vers Polymer.

Nous utilisons également des sous-générateurs Yeoman pour créer l'échafaudage de nos nouveaux éléments Polymer. Par exemple, pour créer le modèle d'un élément foo, nous exécutons:

yo polymer:element foo

Nous serons alors invités à indiquer si nous souhaitons importer automatiquement l'élément, si un constructeur est requis et quelques autres préférences.

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

Aperçu de l'application:

Aperçu de l&#39;application Yo Polymer

Documentation complémentaire

En résumé, Polymer est une bibliothèque JavaScript qui permet d'utiliser les composants Web dans les navigateurs Web modernes en attendant qu'ils soient implémentés en mode natif. Les outils modernes peuvent vous aider à améliorer votre workflow. Vous pouvez essayer Yeoman et Bower lorsque vous développez vos propres balises.

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