Yo Polymer – eine Einführung in Webkomponenten-Tools

Addy Osmani
Addy Osmani

Webkomponenten verändern alles, was Sie über Entwicklungen für das Web wissen. Zum ersten Mal verfügt das Web über Low-Level-APIs, mit denen wir nicht nur eigene HTML-Tags erstellen können, sondern auch Logik und CSS verkapseln können. Kein globaler Stylesheet-Suppe oder Boilerplate-Code mehr! Eine fantastische neue Welt, in der alles ein Element ist.

In meinem Vortrag von DotJS gehe ich darauf ein, was Webkomponenten zu bieten haben und wie sie mit modernen Tools erstellt werden können. Ich zeige Ihnen Yeoman, einen Workflow mit Tools zur Optimierung der Erstellung von Webanwendungen mit Polymer, einer Bibliothek mit Polyfills und Zucker für die moderne Entwicklung von Apps mit Webkomponenten in modernen Browsern.

Benutzerdefinierte Elemente erstellen und von anderen erstellte Elemente installieren

Themen in diesem Vortrag:

  • Informationen zu den vier verschiedenen Spezifikationen, aus denen Webkomponenten bestehen: Benutzerdefinierte Elemente, Vorlagen, Shadow DOM und HTML-Importe.
  • Eigene benutzerdefinierte Elemente definieren und mit Bower von anderen erstellte Elemente installieren
  • Weniger Zeit mit dem Schreiben von JavaScript verbringen und mehr Zeit mit der Seitenerstellung verbringen
  • Moderne Frontend-Tools (Yeoman) verwenden, um das Gerüst einer Anwendung mit Polymer und Generator-Polymer zu erstellen
  • So verändert Polymer das Erstellen von Webkomponenten

Um beispielsweise die Web Component von Polymers Polyfills und die Bibliothek selbst zu installieren, können Sie diesen Einzeiler ausführen:

bower install --save Polymer/platform Polymer/polymer

Dadurch wird der Ordner bower_components und die oben genannten Pakete hinzugefügt. --save fügt sie der Datei „bower.json“ Ihrer App hinzu.

Wenn du später das Polymer-Akkordeon-Element installieren möchtest, kannst du Folgendes ausführen:

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

und importieren Sie es in Ihre Anwendung:

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

Um Zeit zu sparen, können Sie in Yeoman für Yeoman einen weiteren Text verwenden, um eine neue Polymer-App mit allen benötigten Abhängigkeiten, Boilerplate-Code und Tools zur Optimierung Ihrer App zu erstellen:

yo polymer

Zusätzliche Schritt-für-Schritt-Anleitung

Außerdem habe ich eine 30-minütige Schritt-für-Schritt-Anleitung der Polymer Jukebox-App aufgenommen, die ich im Vortrag zeige.

Themen im Bonusvideo:

  • Was das Mantra „Alles ist ein Element“ bedeutet
  • Mit Bower Polyfills und -Elemente für die Plattform von Polymer installieren
  • Gerüst unserer Jukebox-App mit dem Yeoman-Generator und den Untergeneratoren
  • Informationen zu den Plattformfunktionen, die mithilfe eines Textbausteins aufgebaut sind
  • Die Portierung einer Angular-App zu Polymer

Außerdem verwenden wir Yeoman-Subgeneratoren, um das Gerüst unserer neuen Polymer-Elemente zu erstellen. So erstellen wir beispielsweise den Textbaustein für ein Element foo, das wir ausführen:

yo polymer:element foo

, das uns auffordert, ob das Element automatisch importiert werden soll, ob ein Konstruktor erforderlich ist, und ob es ein paar andere Einstellungen gibt.

Die aktuellen Quellen für die App, die in beiden Gesprächen vorgestellt werden, sind jetzt auf GitHub verfügbar. Ich habe ihn etwas weiter überarbeitet, damit er übersichtlicher und leichter lesbar ist.

Vorschau der App:

Vorschau der Yo Polymer App

Weitere Informationen

Zusammenfassend lässt sich sagen, dass Polymer eine JavaScript-Bibliothek ist, die Webkomponenten jetzt in modernen Webbrowsern aktiviert, während wir darauf warten, dass sie nativ implementiert werden. Moderne Tools können Ihnen dabei helfen, Ihre Workflows zu verbessern. Vielleicht möchten Sie Yeoman und Bower ausprobieren, wenn Sie Ihre eigenen Tags entwickeln.

Hier sind ein paar weitere Artikel, die Sie sich zu diesem Thema genauer ansehen sollten: