Polymer ist ein Tor zur spannenden Zukunft von Web-Komponenten. Wir möchten es Nutzern so einfach wie möglich machen, benutzerdefinierte Elemente zu verwenden und zu erstellen. Im letzten Jahr hat das Team intensiv an einer Reihe von Polyfills für die sich weiterentwickelnden Spezifikationen gearbeitet. Außerdem haben wir eine praktische Bibliothek für die Sugaring-Technologie entwickelt, um das Erstellen von Webkomponenten zu vereinfachen. Schließlich entwickeln wir eine Reihe von UI- und Dienstelementen, die Sie in Ihren Apps wiederverwenden können. Beim Chrome Dev Summit 2013 habe ich mich mit den verschiedenen Teilen von Polymer und der Philosophie hinter unserem Mantra „Alles ist ein Element“ beschäftigt.
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 erstaunlich einfach, eine Seite zu erstellen, Formularsteuerelemente hinzuzufügen und eine „App“ zu erstellen, ohne viel JavaScript schreiben zu müssen.
Nehmen wir das einfache <select>-Element. Das Element bietet viele Funktionen, die Sie einfach deklarieren können:
- Über HTML-Attribute anpassbar
- Untergeordnete Elemente (z.B.
<option>) werden mit einer Standard-UI gerendert, können aber über Attribute konfiguriert werden. - Nützlich in anderen Kontexten wie
<form> - Hat eine DOM-API: Eigenschaften und Methoden
- Ereignisse werden ausgelöst, wenn etwas Interessantes passiert
Webkomponenten bieten die Möglichkeit, zu dieser Blütezeit der Webentwicklung zurückzukehren. Eine, mit 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 über eine Datenbindung mit einem queryMatches-Attribut verknüpft 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 aus der Zusammensetzung kleinerer Elemente eine ganze App. Sogar eine ganze App kann ein Element sein:
<my-app></my-app>
Webkomponenten mit der Polymer-Magie erstellen
Folien: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer bietet eine Reihe von praktischen Funktionen für die Erstellung webbasierter Anwendungen mit Webkomponenten:
- Deklarative Elementregistrierung:
<polymer-element> - Deklarative Vererbung:
<polymer-element extends="..."> - Deklarative bidirektionale Datenbindung:
<input id="input" value=""> - Deklarative Ereignis-Handler:
<button on-click="" - Veröffentlichte Properties:
xFoo.bar = 5<-><x-foo bar="5"> - Property-Beobachtung:
barChanged: function() {...} - PointerEvents / PointerGestures standardmäßig
Die Moral der Geschichte ist, dass es beim Erstellen von Polymer-Elementen 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 es versäumen, wenn ich nicht auf die Standards hinter Webkomponenten eingehen würde. Schließlich basiert Polymer auf diesen sich weiterentwickelnden grundlegenden APIs.
Wir stehen vor einer 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 besonders auffällig oder nutzerfreundlich. Sie dienen ausschließlich der Produktivität von Entwicklern. Jede der vier Haupt-APIs ist für sich nützlich, aber in Kombination entstehen magische Dinge!
- Shadow DOM – Stil- und DOM-Kapselung
- Benutzerdefinierte Elemente: Hiermit können neue HTML-Elemente definiert werden. Stellen Sie ihnen eine API mit Eigenschaften und Methoden zur Verfügung.
- HTML-Importe ist das Bereitstellungsmodell für ein Paket aus CSS, JS und HTML.
- Vorlagen: Richtige DOM-Vorlagen zum Definieren inaktiver Markup-Chunks, die später entfernt werden
Weitere Informationen zu den Grundlagen der APIs finden Sie unter webcomponents.org.