Chrome Dev Summit – Deklarative, gekapselte, wiederverwendbare Komponenten aus Polymer

Polymer ist ein Einstieg in die faszinierende Zukunft von Webkomponenten. Wir möchten die Nutzung und Erstellung benutzerdefinierter Elemente vereinfachen. Im vergangenen Jahr hat das Team intensiv an einer Reihe von Polyfills für die sich weiterentwickelnden Spezifikationen gearbeitet. Darüber hinaus haben wir eine praktische Sugaring-Bibliothek erstellt, um das Erstellen von Webkomponenten zu vereinfachen. Zuletzt erstellen wir eine Reihe von UI- und Dienstprogrammelementen, die Sie in Ihren Apps wiederverwenden können. Auf dem Chrome Dev Summit 2013 habe ich die verschiedenen Teile von Polymer und die Philosophie hinter unserem Mantra „Alles ist ein Element“ vorgestellt.

Folien: http://html5-demos.appspot.com/static/cds2013/index.html

„Alles ist ein Element“ (von <select> bis zu benutzerdefinierten Elementen)

Folien: http://html5-demos.appspot.com/static/cds2013/index.html#6

Das Erstellen von Webseiten in den 1990er-Jahren war zwar eingeschränkt, aber leistungsstark. Wir hatten nur wenige Elemente zur Verfügung. Das Beste daran? Alles war deklarativ. Es war bemerkenswert einfach, eine Seite zu erstellen, Formularsteuerelemente hinzuzufügen und eine „App“ zu erstellen, ohne Unmengen an JavaScript schreiben zu müssen.

Nehmen wir das einfache <select>-Element. Das Element bietet eine Vielzahl von Funktionen, die einfach durch Deklarieren aktiviert werden:

  • Anpassbar über HTML-Attribute
  • Rendert untergeordnete Elemente (z.B. <option>) mit einer Standard-UI, die jedoch über Attribute konfiguriert werden kann.
  • Nützlich in anderen Kontexten wie <form>
  • Hat eine DOM API: Attribute und Methoden
  • Löst Ereignisse aus, wenn interessante Dinge passieren

Webkomponenten bieten die Tools, um zu dieser Blütezeit der Webentwicklung zurückzukehren. Eine, in der wir neue Elemente erstellen können, die an <select> erinnern, aber für die Anwendungsfälle von 2014 entwickelt wurden. Wenn AJAX beispielsweise heute erfunden würde, wäre es wahrscheinlich ein HTML-Tag (Beispiel):

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
                params='{"alt":"json"}'></polymer-ajax>

Oder responsive Elemente, die an ein queryMatches-Attribut gebunden sind:

<polymer-media-query query="max-width:640px" queryMatches="">

Genau diesen Ansatz verfolgen wir bei Polymer. Anstatt monolithische JavaScript-basierte Webanwendungen zu erstellen, erstellen wir wiederverwendbare Elemente. Im Laufe der Zeit entsteht so aus kleineren Elementen eine ganze App. Sogar eine ganze App könnte ein Element sein:

<my-app></my-app>

Webkomponenten mit der speziellen Sauce von Polymer erstellen

Folien: http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer bietet eine Reihe von Vorteilen für die Erstellung von Anwendungen, die auf Webkomponenten basieren:

  • Deklarative Elementregistrierung: <polymer-element>
  • Deklarative Übernahme: <polymer-element extends="...">
  • Deklarative bidirektionale Datenbindung: <input id="input" value="">
  • Deklarative Event-Handler: <button on-click=""
  • Veröffentlichte Unterkünfte: xFoo.bar = 5 <-> <x-foo bar="5">
  • Property-Beobachtung: barChanged: function() {...}
  • PointerEvents / PointerGestures standardmäßig

Die Moral der Geschichte ist, dass es beim Schreiben von Polymer-Elementen vor allem darum geht, deklarativ zu sein. Je weniger Code Sie schreiben müssen, desto besser ;)

Webkomponenten: die Zukunft der Webentwicklung

Folien: http://html5-demos.appspot.com/static/cds2013/index.html#26

Ich würde etwas versäumen, wenn ich die Standards hinter Webkomponenten nicht erwähnen würde. Schließlich basiert Polymer auf diesen sich weiterentwickelnden grundlegenden APIs.

Wir stehen am Anfang einer sehr spannenden Zeit in der Webentwicklung. Im Gegensatz zu anderen neuen Funktionen, die der Webplattform hinzugefügt werden, sind die APIs, aus denen Webkomponenten bestehen, nicht auffällig oder für Nutzer sichtbar. Sie dienen ausschließlich der Produktivität von Entwicklern. Jede der vier Haupt-APIs ist für sich genommen nützlich, aber zusammen können sie noch mehr.

  1. Shadow DOM – Stil- und DOM-Kapselung
  2. Benutzerdefinierte Elemente: Neue HTML-Elemente definieren. Stellen Sie ihnen eine API mit Attributen und Methoden zur Verfügung.
  3. HTML-Importe sind das Verteilungsmodell für ein Paket aus CSS, JS und HTML.
  4. Vorlagen: Richtige DOM-Vorlagen zum Definieren von inerten Markup-Blöcken, die später ausgegeben werden sollen

Weitere Informationen zu den Grundlagen der APIs finden Sie auf webcomponents.org.