Polymer und Web-Komponenten sind derzeit sehr beliebte Themen. Da sich dieses Ökosystem jedoch rasant weiterentwickelt, ist es für Entwickler oft schwierig, über die neuesten Änderungen auf dem Laufenden zu bleiben.
In seinem Vortrag auf dem Chrome Dev Summit erklärte Matt McNulty, Engineering Manager des Polymer-Teams, was Polymer ist und skizzierte die Roadmap zu Polymer 1.0.
Was ist Polymer?
Was ist Polymer genau?
Polymer ist eine Bibliothek, mit der Sie Elemente und Apps aus Webkomponenten erstellen können. Webkomponenten sind eine Reihe moderner neuer Standards, mit denen Entwickler das HTML-Vokabular um eigene benutzerdefinierte Elemente erweitern können.
Da Webkomponenten als neue Primitive für den Browser konzipiert sind, sind sie sehr leistungsfähig, aber auch sehr niedrig. Die Arbeit mit ihnen erfordert viel Code.
Polymer vereinfacht die Arbeit mit Webkomponenten, indem die Syntax vereinfacht wird. Dadurch wird der zu schreibende Boilerplate-Code reduziert und ein deklarativer Stil hinzugefügt, sodass das Erstellen von Webkomponenten so einfach ist wie das Schreiben von HTML.
The Polymer Experiment
Polymer begann als Test, um zu sehen, ob wir die Web-Komponentenstandards polyfillen und Feedback von Entwicklern erhalten können, bevor diese Technologien in allen Browsern eingeführt wurden. Da immer mehr Entwickler Polymer verwendeten, entwickelte es sich von reinen Polyfills zu einer echten Bibliothek mit vielen Produktivitätsfunktionen (z. B. Datenbindung, Attribute-Änderungs-Watcher und automatische Knotensuche). Aber alle Tests haben Ergebnisse. Wie sind wir also abgeschnitten?
Viele Entwickler gaben an, dass ihnen die Ausdruckskraft und Produktivitätssteigerung durch die Arbeit mit Webkomponenten in Polymer gefallen. Sie äußerten jedoch auch Bedenken hinsichtlich der Leistung und der Gesamtkomplexität.
Es hebt eine natürliche Spannung hervor, die Polymer schon immer hatte: ein Experiment sein, um die Webplattform voranzubringen, aber auch etwas zu schaffen, das für die Produktion geeignet ist und auf das Entwickler sich verlassen können.
Anstehende Änderungen
Das Polymer-Team hat sich jede Funktion der Bibliothek genau angesehen, um eine schlankere, produktionsreife Version zu entwickeln, die Entwickler mit Zuversicht verwenden können.
Ebenen
Polymer wurde in eine Reihe von Schichten umstrukturiert. Die Hauptfunktionen sind schnell und effizient, während die erweiterten Funktionen optional sind. Für die meisten Anwendungsfälle sollten die Hauptfunktionen die Anforderungen der Entwickler erfüllen.
Vereinfachte Datenbindung
Das Datenbindungssystem von Polymer wurde ebenfalls erheblich im Hinblick auf die Leistung optimiert. Gemäß dem mehrschichtigen Ansatz ist die Zwei-Wege-Bindung jetzt optional. Die Standardeinstellung sind Ein-Wege-Bindungen. Außerdem wurden veröffentlichte Property-Typen explizit gemacht und bei einer Property-Änderung wird jetzt ein Ereignis ausgelöst, damit Elemente aus verschiedenen Bibliotheken einfacher kommunizieren können.
Schlankeres Shadow-DOM
Die Shadow-DOM-Polyfill ist eine erstaunliche technische Leistung. Es wurde so konzipiert, dass es umfassend und spezifikationskonform ist, was für einen gründlichen Test des Plattform-Primitives wichtig ist. Leider führt es jedoch zu einer Reihe von Leistungsengpässen bei Funktionen, die in Polymer nicht verwendet werden.
Die nächste Version von Polymer wird einen anderen Ansatz verfolgen und eine Shim-Ebene verwenden, die nur das Polyfills, was Polymer benötigt.
Die vorhandene Polyfill-Version wird für generische Webkomponenten, die nicht zu Polymer gehören, weiter verwendet.
Umstellung auf webcomponents.org
Apropos Polyfills: Auch diese werden an einen neuen Ort verschoben. Derzeit sind viele Entwickler verwirrt über die Beziehung zwischen Polymer und Web-Komponenten. Einige glauben, dass Sie alle Polymer-Komponenten verwenden müssen, um Webkomponenten zu verwenden. Tatsächlich benötigen Sie jedoch nur die Polyfills.
Um diese Unterscheidung klarer zu machen, werden die Polyfills zu webcomponents.org verschoben und in webcomponents.js umbenannt.
Diese Maßnahme soll anderen Bibliotheksautoren helfen, die Polyfills ohne Verwirrung zu nutzen. Das Polymer-Team wird weiterhin an den Polyfills arbeiten. Wir hoffen aber, dass sie durch diese Änderung zu einer gemeinsamen Ressource für die Community werden.
Ergebnisse
Was sind die Ergebnisse all dieser Änderungen?
Geschwindigkeit
In Chrome ist Polymer jetzt fünfmal schneller und in Safari achtmal schneller.
Dateigröße
Die Dateigröße wurde ebenfalls um 87 % reduziert, von 123 KB auf 15 KB (6 KB komprimiert).
Roadmap
Im nächsten Release gibt es einige API-Änderungen, die durch die neue Versionsnummer (0.8) gekennzeichnet sind. Das Team möchte jedoch klarstellen, dass es sich dabei nicht um eine Neufassung handelt. Die Umstellung Ihres aktuellen Projekts von Polymer 0.5 auf 0.8 sollte relativ einfach sein.
Das Polymer-Team hat außerdem eine Roadmap veröffentlicht, um Entwicklern mehr Klarheit über bevorstehende Releases zu geben.
Die Version 0.8 ist jetzt als Branch auf GitHub verfügbar. Die Entwicklung ist jedoch noch sehr aktiv und es gibt noch keine Dokumentation. Die offizielle Betaversion 0.9 ist für das 1. Quartal 2015 geplant, Version 1.0 wird irgendwann im 2. Quartal veröffentlicht.
Der Test ist vorbei
Mit den jüngsten Änderungen an Polymer legt das Team dahinter den Grundstein dafür, dass Webkomponenten ein wesentlicher Bestandteil des Stacks jedes Entwicklers werden. Wenn Sie noch keine Erfahrung mit Web-Komponenten haben, sollten Sie sich diese transformativen Technologien jetzt genauer ansehen. Wenn Sie bereits mit Komponenten (und Polymer) arbeiten, sieht die Zukunft wirklich vielversprechend aus. Im Polymer-Blog finden Sie alle aktuellen Informationen. Wenn Sie Fragen oder Kommentare haben, können Sie sich für die Polymer-Mailingliste registrieren. Viel Spaß beim Hacken!