Deklarative, gekapselte, wiederverwendbare Komponenten aus Polymer

Polymer eröffnet die faszinierende Zukunft von Webkomponenten. Wir möchten es einfach machen, benutzerdefinierte Elemente zu nutzen und zu erstellen. Im vergangenen Jahr hat das Team hart an einer Reihe von Polyfills gearbeitet, die den sich verändernden Spezifikationen entsprechen. Darüber hinaus haben wir eine praktische Sugaring-Bibliothek erstellt, um die Erstellung von Webkomponenten zu vereinfachen. Zu guter Letzt erstellen wir eine Reihe von UI- und Dienstprogrammelementen, 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 „Everything is a element“ (Alles ist ein Element) beschäftigt. Mantra.

Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html

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

Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#6

Das Erstellen von Webseiten war in den 90ern begrenzt, aber dennoch leistungsstark. Uns standen nur wenige Elemente zur Verfügung. Das Gute daran: Alles war deklarativ. Es war erstaunlich einfach, eine Seite zu erstellen, Formularsteuerelemente hinzuzufügen und eine App zu erstellen, ohne JavaScript-Code zu schreiben.

Nimm das bescheidene <select>-Element. Das Element enthält eine Vielzahl von Funktionen, indem Sie es einfach deklarieren:

  • Anpassbar über HTML-Attribute
  • Rendert untergeordnete Elemente (z.B. <option>) mit einer Standard-UI, lässt sich aber über Attribute konfigurieren.
  • Nützlich in anderen Kontexten wie <form>
  • Hat eine DOM-API: Eigenschaften und Methoden
  • Löst Ereignisse aus, wenn interessante Dinge passieren

**Webkomponenten stellen die Tools bereit, um zu dieser Blütezeit der Webentwicklung zurückzukehren. Eine, bei der wir neue Elemente erstellen können, die an <select> erinnern, aber für die Anwendungsfälle von 2014 entwickelt wurden. Wäre AJAX beispielsweise heute erfunden, 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 Daten an ein queryMatches-Attribut binden:

<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…

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

<my-app></my-app>

Erstellung von Webkomponenten mit der speziellen Soße von Polymer

Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer bietet eine Reihe von praktischen Funktionen zum Erstellen von Webanwendungen, die auf Webkomponenten basieren:

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

Bei der Entwicklung von Polymer-Elementen geht es darum, deklarativ zu sein. Je weniger Code du schreiben musst, desto besser.

Web Components: die Zukunft der Webentwicklung

Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#26

Es wäre toll, wenn ich die Standards hinter Webkomponenten nicht erwähnen würde. Schließlich basiert Polymer auf diesen grundlegenden APIs.

Wir stehen am Beginn einer sehr spannenden Zeit in der Webentwicklung. Im Gegensatz zu anderen neuen Funktionen, die der Webplattform hinzugefügt werden, sind die APIs der Webkomponenten nicht glänzend oder für den Nutzer sichtbar. Sie dienen ausschließlich der Produktivität von Entwicklern. Jede der vier Haupt-APIs ist für sich genommen nützlich, aber in Kombination können magische Dinge passieren!

  1. Shadow DOM – Stil und DOM-Kapselung
  2. Benutzerdefinierte Elemente: Definieren Sie neue HTML-Elemente. Stellen Sie ihnen eine API mit Eigenschaften und Methoden zur Verfügung.
  3. HTML-Importe sind das Verteilungsmodell für ein CSS-, JS- und HTML-Paket.
  4. Vorlagen – richtige DOM-Vorlagen zur Definition inaktiver Markup-Chunks, die später ausgestempelt werden sollen

Weitere Informationen zu den Grundlagen der APIs finden Sie unter ebidel.github.com/webcomponents.