Yo Polymer – eine Einführung in Webkomponenten-Tools

Webkomponenten werden alles verändern, was Sie über die Entwicklung im Web zu wissen glauben. Zum ersten Mal gibt es im Web Low-Level-APIs, mit denen wir nicht nur eigene HTML-Tags erstellen, sondern auch Logik und CSS einkapseln können. Schluss mit globalen Stylesheets und Boilerplate-Code! Es ist eine neue Welt, in der alles ein Element ist.

In meinem Vortrag von DotJS erkläre ich, was Webkomponenten bieten und wie sie mit modernen Tools erstellt werden. Ich zeige Ihnen Yeoman, einen Workflow mit Tools, mit denen sich das Erstellen von Webanwendungen mit Polymer optimieren lässt. Polymer ist eine Bibliothek mit Polyfills und Sugar für die Entwicklung von Apps mit Web-Komponenten in modernen Browsern.

Benutzerdefinierte Elemente erstellen und von anderen erstellte Elemente installieren

In diesem Vortrag erfahren Sie:

  • Die vier verschiedenen Spezifikationen, aus denen Web-Komponenten bestehen: Benutzerdefinierte Elemente, Vorlagen, Shadow DOM und HTML-Importe.
  • Benutzerdefinierte Elemente definieren und von anderen erstellte Elemente mit Bower installieren
  • Weniger Zeit für das Schreiben von JavaScript und mehr Zeit für das Erstellen von Seiten
  • Mit modernen Front-End-Tools (Yeoman) eine Anwendung mit Polymer mit generator-polymer erstellen
  • Wie Polymer das Erstellen von Webkomponenten verändert

Wenn Sie beispielsweise die Webkomponenten-Polyfills von Polymer und die Bibliothek selbst installieren möchten, können Sie diesen One-Liner ausführen:

bower install --save Polymer/platform Polymer/polymer

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

Wenn Sie später das Akkordeon-Element von Polymer installieren möchten, können Sie Folgendes ausführen:

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

und dann in Ihre Anwendung importieren:

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

Um Zeit zu sparen, können Sie mit Yeoman und diesem anderen Einzeiler ein neues Polymer-Scaffolding mit allen erforderlichen Abhängigkeiten, Boilerplate-Code und Tools zur Optimierung Ihrer App erstellen:

yo polymer

Bonus-Anleitung

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

Im Bonusvideo werden folgende Themen behandelt:

  • Was bedeutet das Mantra „Alles ist ein Element“?
  • Polymer-Plattform-Polyfills und -Elemente mit Bower installieren
  • Jukebox-App mit dem Yeoman-Generator und Untergeneratoren erstellen
  • Plattformfunktionen, die über Boilerplate-Code bereitgestellt werden
  • So habe ich eine Angular-App funktional auf Polymer umgestellt.

Außerdem nutzen wir Yeoman-Untergeneratoren für das Scaffolding unserer neuen Polymer-Elemente. Um beispielsweise die Boilerplate für ein Element foo zu erstellen, führen wir Folgendes aus:

yo polymer:element foo

Daraufhin werden wir gefragt, ob das Element automatisch importiert werden soll, ob ein Konstruktor erforderlich ist und nach einigen anderen Einstellungen.

Die neuesten Quellen für die in beiden Vorträgen gezeigte App sind jetzt auf GitHub verfügbar. Ich habe es noch ein wenig überarbeitet, damit es übersichtlicher und etwas leichter zu lesen ist.

Vorschau der App:

Yo Polymer App-Vorschau

Weitere Informationen

Zusammenfassend ist Polymer eine JavaScript-Bibliothek, die Webkomponenten in modernen Webbrowsern ermöglicht, während wir auf die native Implementierung warten. Moderne Tools können dazu beitragen, Ihren Workflow zu verbessern. Sie können Yeoman und Bower ausprobieren, wenn Sie eigene Tags entwickeln.

Weitere Artikel zu diesem Thema: