Polymer- und Webkomponenten sind derzeit sehr gefragte Themen, und da sich dieses Ökosystem schnell weiterentwickelt, kann es für Entwickler oft schwierig sein, über alle aktuellen Änderungen auf dem Laufenden zu bleiben.
In seinem Vortrag beim Chrome Dev Summit erklärte Matt McNulty, Engineering Manager des Polymer-Teams, was Polymer ist, und skizzierte auch die Roadmap für Polymer 1.0.
Was ist Polymer?
Was genau ist Polymer?
Polymer ist eine Bibliothek, mit der Sie Elemente und Anwendungen aus Webkomponenten erstellen können. Webkomponenten sind innovative neue Standards, die es Entwicklern ermöglichen, das HTML-Vokabular mit eigenen benutzerdefinierten Elementen zu erweitern.
Da Webkomponenten als neue Primitive für den Browser konzipiert wurden, sind sie zwar sehr leistungsfähig, aber auch auf sehr niedriger Ebene, sodass für die Arbeit mit ihnen relativ viel Code erforderlich ist.
Polymer vereinfacht die Arbeit von Webkomponenten, indem es die Syntax „verzerrt“. Es reduziert die Menge an Boilerplate-Code, die Sie schreiben müssen, und fügt einen deklarativen Stil hinzu, sodass das Erstellen von Webkomponenten so einfach ist wie das Schreiben von HTML.
Das Polymer-Experiment
Polymer begann mit einem Experiment, um herauszufinden, ob wir die Web Component-Standards mit Polymer definieren und Feedback von Entwicklern einholen konnten, bevor diese Technologien in allen Browsern eingeführt wurden. Als immer mehr Entwickler mit der Verwendung von Polymer begannen, wurde es von nur Polyfills zu einer tatsächlichen Bibliothek voller Produktivitätsfunktionen (Datenbindung, Attributänderungs-Watcher, automatische Knotensuche usw.). Aber alle Tests haben Ergebnisse. Wie haben wir abgeschnitten?
Viele Entwickler gaben an, dass ihnen die Ausdruckskraft und Produktivitätsgewinne der Arbeit mit Webkomponenten in Polymer gefallen. Sie äußerten aber auch Bedenken hinsichtlich der Leistung und der allgemeinen Komplexität.
Es zeigt eine natürliche Spannung, die Polymer schon seit Langem hatte: ein Experiment, um die Webplattform voranzutreiben, aber auch etwas zu entwickeln, auf das sich Entwickler verlassen können.
Anstehende Änderungen
Das Polymer-Team hat sich jede Funktion der Bibliothek genau angesehen, um eine schlankere, produktionsfertige Version zu entwickeln, bei der Entwickler sich sicher fühlen können.
Ebenen
Polymer wurde in eine Reihe von Schichten umgewandelt. Die Hauptfunktionen sind schnell und schlank, während die erweiterten Funktionen optional sind. In den meisten Anwendungsfällen sollten die Kernfunktionen die Anforderungen der Entwickler decken.
Vereinfachte Datenbindung
Das Datenbindungssystem von Polymer wurde ebenfalls erheblich für Leistung optimiert. Gemäß dem mehrschichtigen Ansatz ist die Zwei-Wege-Bindung jetzt „Aktivieren“. Standardmäßig sind Einweg-Bindungen ausgewählt. Außerdem wurden veröffentlichte Property-Typen explizit festgelegt und eine Property-Änderung löst jetzt ein Ereignis aus, um die Kommunikation von Elementen aus verschiedenen Bibliotheken zu erleichtern.
Leaner Shadow DOM
Das Shadow DOM-Polyfill ist eine faszinierende technische Meisterleistung. Sie wurde so konzipiert, dass sie umfassend und spezifikationskonform ist. Dies ist wichtig für gründliche Tests des Plattform-Primitive, führt aber leider zu einer Reihe von Leistungsengpässen bei Funktionen, die von Polymer nicht verwendet werden.
Beim nächsten Release von Polymer wird ein anderer Ansatz verfolgt: Es wird eine Schicht im Shim-Stil verwendet, die nur das Polyfill für das macht, was Polymer benötigt.
Das vorhandene Polyfill wird weiterhin für allgemeine, nicht Polymer-Webkomponenten verwendet.
Umzug auf webcomponents.org
Apropos Polyfills – auch hier bekommen sie ein neues Zuhause. Derzeit sind viele Entwickler über die Beziehung zwischen Polymer und Webkomponenten nicht ganz klar. Manche glauben, dass zur Verwendung von Webkomponenten das gesamte Polymer verwendet werden muss, obwohl eigentlich nur die Polyfills benötigt werden.
Um diese Unterscheidung deutlicher zu machen, werden die Polyfills auf webcomponents.org verschoben und in webcomponents.js umbenannt.
Dieser Schritt soll anderen Bibliotheksautoren helfen, die Polyfills ohne Verwirrung zu nutzen. Das Polymer-Team wird auch weiterhin einen Beitrag zu den Polyfills leisten. Wir hoffen aber, dass diese Änderung durch diese Änderung zu einer gemeinsamen Ressource für die Community wird.
Ergebnisse
Was bedeutet das für Sie?
Geschwindigkeit
In Chrome ist Polymer jetzt 5-mal schneller, in Safari ist es 8-mal schneller.
Dateigröße
Außerdem wurde die Dateigröße um 87 % von 123 KB auf 15 KB reduziert (6 KB im gzip-Format).
Roadmap
Im nächsten Release wird es einige funktionsgefährdende Änderungen an der API geben, die durch die neue Versionsnummer (0.8) gekennzeichnet sind. Das Team möchte jedoch betonen, dass es sich nicht um eine Überschreibung handelt. Das Verschieben Ihres aktuellen Projekts von Polymer 0.5 auf 0.8 sollte ziemlich einfach sein.
Das Polymer-Team hat außerdem eine Roadmap entwickelt, um Entwicklern mehr Klarheit in Bezug auf kommende Releases zu geben.
Die 0.8-Vorschau ist jetzt als Zweig auf GitHub verfügbar. Sie wird jedoch noch sehr aktiv weiterentwickelt und es fehlt an der Dokumentation. Die offizielle Betaversion von 0.9 ist für das 1. Quartal 2015 geplant, Version 1.0 wird voraussichtlich im 2. Quartal eingeführt.
Das Experiment ist beendet
Angesichts der jüngsten Änderungen an Polymer legte das Team dahinter den Grundstein, damit Web Components zu einem integralen Bestandteil des Stacks jedes Entwicklers werden. Wenn Sie noch keine Erfahrung mit Webkomponenten haben, ist jetzt ein guter Zeitpunkt, um einen Blick auf diese transformativen Technologien zu werfen und sich mit ihnen vertraut zu machen. Wenn Sie bereits mit Komponenten (und Polymer) arbeiten, sieht die Zukunft in der Tat vielversprechend aus. Behalten Sie den Polymer-Blog im Auge, um die neuesten Updates zu erhalten, und melden Sie sich für die Polymer-Mailingliste an, wenn Sie Fragen oder Kommentare haben. Viel Spaß beim Hacken!