Polymer bietet Zugang zu 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 für die sich entwickelnden Spezifikationen gearbeitet. Darüber hinaus haben wir eine praktische Sugaring-Bibliothek erstellt, um das Erstellen von Webkomponenten zu vereinfachen. Zu guter Letzt entwickeln 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 Mantra „Alles ist ein Element“ befasst.
Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html
„Alles ist ein Element“ (von <select> bis zu benutzerdefinierten Elementen)
Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#6
Das Erstellen von Webseiten in den 1990er Jahren war begrenzt, aber mächtig. Uns standen nur wenige Elemente zur Verfügung. Das Besondere daran war, dass alles deklarativ war. Es war erstaunlich einfach, eine Seite zu erstellen, Formularsteuerelemente hinzuzufügen und eine „App“ zu erstellen, ohne dass jede Menge JavaScript geschrieben wurde.
Nehmen wir das bescheidene <select>-Element. In das Element sind viele Funktionen integriert, indem Sie es einfach deklarieren:
- Anpassbar durch HTML-Attribute
- Stellt untergeordnete Elemente (z.B.
<option>) mit einer Standard-UI dar, die jedoch über Attribute konfiguriert werden können. - Nützlich in anderen Kontexten wie
<form> - Hat eine DOM API: Attribute und Methoden
- Ereignisse werden ausgelöst, wenn etwas Interessantes passiert
Web Components bieten die Tools, um zu dieser Zeit der Webentwicklung zurückzukehren. Hier können wir neue Elemente erstellen, die an <select> erinnern, aber für die Anwendungsfälle im Jahr 2014 entwickelt wurden. Wenn beispielsweise AJAX heute erfunden wurde, 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="">
Genau diesen Ansatz verfolgen wir bei Polymer. Statt monolithische JavaScript-basierte Webanwendungen zu erstellen, wollen wir wiederverwendbare Elemente erstellen. Mit der Zeit wächst eine ganze App aus kleineren Elementen heraus. Die gesamte App könnte ein Element sein:
<my-app></my-app>
Webkomponenten mit der Spezialsauce von Polymer erstellen
Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer bietet eine Reihe von praktischen Funktionen für die Erstellung webkomponentenbasierter Anwendungen:
- Registrierung von deklarativen Elementen:
<polymer-element> - Deklarative Übernahme:
<polymer-element extends="..."> - Deklarative bidirektionale Datenbindung:
<input id="input" value=""> - Deklarative Event-Handler:
<button on-click="" - Veröffentlichte Properties:
xFoo.bar = 5<-><x-foo bar="5"> - Property-Beobachtung:
barChanged: function() {...} - Standardeinstellung für PointerEvents / Zeigergesten
Im Grunde geht es beim Schreiben von Polymer-Elementen darum, deklarativ zu sein. Je weniger Code Sie schreiben müssen, desto besser. ;)
Web Components: die Zukunft der Webentwicklung
Präsentationen: http://html5-demos.appspot.com/static/cds2013/index.html#26
Ich würde nicht auf die Standards hinter Webkomponenten hinweisen. Schließlich basiert Polymer auf diesen neuen 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 die Webkomponenten bestehen, weder glänzend noch 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 ergeben ganz magische Dinge.
- Shadow DOM (Shadow DOM): Stil und DOM-Kapselung
- Benutzerdefinierte Elemente: Hier können Sie neue HTML-Elemente definieren. Stellen Sie ihnen eine API mit Attributen und Methoden zur Verfügung.
- HTML-Importe sind das Verteilungsmodell für ein CSS-, JS- und HTML-Paket.
- Vorlagen: Korrekte DOM-Vorlagen zum Definieren inaktiver Markup-Blöcke, die später ausgestempelt werden
Weitere Informationen zu den Grundlagen der APIs findest du unter webcomponents.org.