Polymer.js: Die Zukunft der Entwicklung von Webanwendungen?

Vor etwa einem Jahr, im Mai 2013, startete Google Polymer.js.

Hier sind wir also, ein Jahr später. Und die Frage ist: Ist es schon bereit für die Hauptsendezeit? Ist es schon möglich, eine produktionsreife Anwendung mit Polymer-Webentwicklungstechniken zu erstellen?

Um diese Frage zu beantworten, habe ich Polymer auf eine Testfahrt mitgenommen, um eine Webanwendung zu entwickeln und zu sehen, wie gut sie sich verhält. Dieser Artikel handelt von dieser Erfahrung und was ich dabei gelernt habe.

Polymer.js: Das Konzept

Bevor wir in unser Polymer-Tutorial einsteigen, wollen wir zunächst Polymer.js definieren, nicht für das, was es vorgibt zu sein, sondern für das, was es tatsächlich ist.

Wenn Sie beginnen, sich Polymer anzusehen, können Sie nicht anders, als sofort von seiner selbsternannten einzigartigen Weltanschauung fasziniert zu sein. Polymer gibt vor, eine Art Back-to-Nature-Ansatz zu verfolgen, der „Elemente wieder in den Mittelpunkt der Webentwicklung stellt“. Mit Polymer.js können Sie Ihre eigenen HTML-Elemente erstellen und sie zu vollständigen, komplexen Webanwendungen zusammenstellen, die skalierbar und wartbar sind. Es dreht sich alles darum, neue (dh benutzerdefinierte) Elemente zu erstellen, die dann auf deklarative Weise in Ihren HTML-Seiten wiederverwendet werden können, ohne dass Sie ihre Interna kennen oder verstehen müssen.

Elemente sind schließlich die Bausteine ​​des Webs. Dementsprechend lautet die Weltanschauung von Polymer, dass die Webentwicklung grundsätzlich darauf basieren sollte, das bestehende Elementparadigma zu erweitern, um leistungsfähigere Webkomponenten zu erstellen, anstatt Markup durch „Skripthaufen“ (um ihre Worte zu verwenden) zu ersetzen. Anders ausgedrückt glaubt Polymer daran, die „nativen“ Technologien des Browsers zu nutzen, anstatt sich auf ein zunehmend komplexes Labyrinth von benutzerdefinierten JavaScript-Bibliotheken (jQuery et. al.) zu verlassen. In der Tat eine faszinierende Vorstellung.

Okay, das ist also die Theorie. Werfen wir nun einen Blick auf die Realität.

Polymer-Webentwicklung: Die Realität

Während der philosophische Ansatz von Polymer sicherlich seinen Wert hat, ist es leider eine Idee, die (zumindest in gewissem Maße) ihrer Zeit voraus ist.

Polymer.js stellt eine Reihe von Anforderungen an den Browser und stützt sich auf eine Reihe von Technologien, die sich noch im Prozess der Standardisierung (durch das W3C) befinden und in heutigen Browsern noch nicht vorhanden sind. Beispiele sind Schattendom, Vorlagenelemente, benutzerdefinierte Elemente, HTML-Importe, Mutationsbeobachter, modellgesteuerte Ansichten, Zeigerereignisse und Webanimationen. Dies sind wunderbare Technologien, die modernen Browsern jedoch noch bevorstehen.

Die Strategie von Polymer besteht darin, Front-End-Entwickler dazu zu bringen, diese hochmodernen, noch kommenden browserbasierten Technologien, die sich derzeit im Standardisierungsprozess (durch das W3C) befinden, zu nutzen, sobald sie verfügbar sind. Um die Lücke zu schließen, schlägt Polymer in der Zwischenzeit die Verwendung von Polyfills vor (herunterladbarer JavaScript-Code, der Funktionen bereitstellt, die in heutigen Browsern noch nicht integriert sind). Die empfohlenen Polyfills sind so konzipiert, dass sie (zumindest theoretisch) nahtlos ersetzt werden können, sobald die nativen Browserversionen dieser Funktionen verfügbar sind.

Okay, gut. Aber lassen Sie mich das klarstellen. Zumindest vorerst werden wir JavaScript-Bibliotheken (dh Polyfills) verwenden, um die Verwendung von JavaScript-Bibliotheken zu vermeiden? Nun, das ist „faszinierend“.

Das Fazit ist also, dass wir uns bei Polymer in einer Art Schwebezustand befinden, da es sich letztendlich auf (oder vielleicht genauer gesagt, Annäherung) von Browsertechnologien stützt, die noch nicht existieren. Dementsprechend wirkt Polymer.js heute eher wie eine Studie darüber, wie elementzentrierte Anwendungen in Zukunft erstellt werden können (dh wenn alle erforderlichen Funktionen in den wichtigsten Browsern implementiert sind und Polyfills nicht mehr benötigt werden). Aber zumindest derzeit scheint Polymer eher ein faszinierendes Konzept als eine tatsächliche Option zu sein, um hier und jetzt robuste Anwendungen zur Änderung Ihrer Sicht auf die Welt zu erstellen, was das Schreiben (oder Finden) eines Polymer-Tutorials außerhalb schwierig macht der Google-Dokumentation.

Polymerarchitektur

Nun zu unserem Guide. Polymer.js ist architektonisch in vier Schichten unterteilt:

Nativ: Erforderliche Funktionen, die derzeit nativ in allen gängigen Browsern verfügbar sind. Grundlage: Polyfills, die benötigte Browserfunktionen implementieren, die in den Browsern selbst noch nicht nativ verfügbar sind. (Es ist beabsichtigt, dass diese Ebene im Laufe der Zeit verschwindet, wenn die von ihr bereitgestellten Funktionen nativ im Browser verfügbar werden.) Core: Die notwendige Infrastruktur für Polymer-Elemente, um die von den Native- und Foundation-Layern bereitgestellten Funktionen zu nutzen. Elemente: Ein grundlegender Satz von Elementen, die als Bausteine ​​dienen sollen, die Ihnen beim Erstellen Ihrer Anwendung helfen können. Enthält Elemente, die Folgendes bereitstellen: Grundlegende Funktionen wie Ajax, Animation, Flex-Layout und Gesten. Kapselung komplizierter Browser-APIs und CSS-Layouts. UI-Komponenten-Renderer wie Akkordeons, Karten und Seitenleisten.

Erstellen einer Polymeranwendung

Für den Anfang gibt es einige Artikel und Anleitungen, die Ihnen dabei helfen, Polymer, seine Konzepte und seine Struktur vorzustellen. Aber wenn es Ihnen so geht wie mir, wenn Sie sie durchgegangen sind und bereit sind, Ihre Anwendung tatsächlich zu erstellen, stellen Sie schnell fest, dass Sie wirklich nicht ganz sicher sind, wo Sie anfangen oder wie Sie sie erstellen sollen. Da ich jetzt den Prozess durchlaufen und es herausgefunden habe, sind hier einige Hinweise…

Bei der Entwicklung von Polymer-Webs dreht sich alles um das Erstellen von Elementen, und es geht nur darum, Elemente zu erstellen. Im Einklang mit der Weltanschauung von Polymer wird unsere Anwendung also … ein neues Element sein. Nicht mehr und nicht weniger. Ah okay, ich verstehe. Da fangen wir also an.

Für unser Polymer-Projektbeispiel nenne ich das Element der obersten Ebene der Anwendung , da benutzerdefinierte Elementnamen (unabhängig davon, welches Framework Sie verwenden, um sie zu erstellen) einen Bindestrich enthalten müssen (z. B. X-Tags, Polymer-Elemente usw.).

Der nächste Schritt erfordert jedoch einiges mehr Überlegung. Wir müssen entscheiden, wie wir unsere Anwendung in Komponenten aufteilen. Ein einfacher Ansatz besteht darin, einfach zu versuchen, die Komponenten in unserer Anwendung visuell zu identifizieren und sie dann als benutzerdefinierte Elemente in Polymer zu erstellen.

Stellen Sie sich zum Beispiel vor, wir haben eine App mit den folgenden Bildschirmen:

Wir können erkennen, dass sich die obere Leiste und das Seitenleistenmenü nicht ändern werden und der eigentliche „Inhalt“ der App unterschiedliche „Ansichten“ laden könnte.

In diesem Fall wäre ein vernünftiger Ansatz, die zu erstellen Element für unsere App und innerhalb dieses Elements könnten wir einige Polymer-UI-Elemente verwenden, um die obere Leiste und das Seitenleistenmenü zu erstellen.

Wir können dann unsere beiden Hauptansichten erstellen, die wir ListView und SingleView nennen, die in den „Inhalt“-Bereich geladen werden. Für die Elemente in der ListView können wir eine ItemView erstellen.

Daraus ergibt sich dann eine Struktur in etwa wie folgt:

Die guten Nachrichten

Jetzt, da wir unsere Polymer-Beispielanwendung haben, können wir sie in jede Webseite einfügen, indem wir einfach unsere „toptal-app.html“ importieren und das Tag hinzufügen denn schließlich ist unsere App nur ein Element. Das ist cool.

Tatsächlich liegt darin ein Großteil der Kraft und Schönheit des Polymer-Paradigmas. Die benutzerdefinierten Elemente, die Sie für Ihre Anwendung erstellen (einschließlich der Elemente der obersten Ebene für Ihre gesamte Anwendung), werden wie alle anderen Elemente auf einer Webseite behandelt. Sie können daher von jedem anderen JavaScript-Code oder jeder Bibliothek (z. B. Backbone.js, Angular.js usw.) auf ihre Eigenschaften und Methoden zugreifen. Sie können diese Bibliotheken sogar verwenden, um Ihre eigenen neuen Elemente zu erstellen.

Darüber hinaus sind Ihre benutzerdefinierten Komponenten mit anderen benutzerdefinierten Elementbibliotheken (wie Mozillas X-Tag) kompatibel. Es spielt also keine Rolle, was Sie verwenden, um Ihr eigenes benutzerdefiniertes Element zu erstellen, es ist mit Polymer und jeder anderen Browsertechnologie kompatibel.

Es ist daher nicht verwunderlich, dass wir bereits das Aufkommen einer Community von Element-Erstellern beobachten, die ihre neu erstellten Elemente in Foren wie der Website für benutzerdefinierte Elemente veröffentlichen und teilen. Sie können dorthin gehen und sich die gewünschte Komponente schnappen und sie einfach in Ihrer Anwendung verwenden.

Andererseits…

Polymer ist immer noch eine so neue Technologie, dass Entwickler, insbesondere unerfahrene App-Entwickler, sie wahrscheinlich als etwas spröde empfinden werden, mit einer Reihe von nicht so schwer zu findenden Ecken und Kanten.

Hier ist eine Kostprobe:

• Fehlende Dokumentation und Anleitung.
  • Nicht alle UI- und Nicht-UI-Elemente von Polymer.js sind dokumentiert. Manchmal ist der Democode die einzige „Anleitung“ zur Verwendung. In einigen Fällen ist es sogar notwendig, sich auf den Quellcode eines Polymer-Elements zu beziehen, um besser zu verstehen, wie es funktioniert und verwendet werden kann/sollte.
  • Es ist nicht ganz klar, wie man größere Anwendungen organisiert. Wie sollen Sie insbesondere Singleton-Objekte zwischen Elementen übergeben? Welche Strategie sollten Sie anwenden, um Ihre benutzerdefinierten Elemente zu testen? Anleitungen zu dieser Art von Problemen sind an dieser Stelle bestenfalls spärlich.

• Abhängigkeitsfehler und Versionsfehler. Selbst wenn Sie Polymer.js-Elemente wie empfohlen herunterladen, erhalten Sie möglicherweise einen Abhängigkeitsfehler, der auf unterschiedliche Versionsabhängigkeiten im selben Element hinweist. Obwohl bekannt ist, dass sich Polymer Elements derzeit stark in der Entwicklung befindet, können diese Art von Problemen die Entwicklung ziemlich herausfordern und das Vertrauen und Interesse der Entwickler untergraben.

• Probleme auf mobilen Plattformen. Die Leistung von Polymer.js auf mobilen Plattformen kann oft irgendwo zwischen frustrierend und problematisch sein.
  • Das Herunterladen der gesamten Bibliothek und Polyfills (ohne gzip) ist langsam, und Sie müssen jedes Polymerelement herunterladen, das Sie verwenden möchten.
  • Die Verarbeitung der Polyfills, Bibliotheken und benutzerdefinierten Elemente scheint auf mobilen Plattformen eine kostspielige Aufgabe zu sein. Selbst wenn der Download abgeschlossen ist, haben Sie oft noch einige Sekunden lang einen leeren Bildschirm.
  • Insbesondere bei komplexeren Funktionen (z. B. Drag-and-Drop oder Rendern in eine Leinwand) stellen Sie möglicherweise fest, dass Funktionen, die auf dem Desktop gut funktionieren, auf der mobilen Plattform einfach nicht richtig funktionieren oder noch nicht unterstützt werden. In meinem speziellen Fall war eine solche Frustration, auf die ich stieß, das Rendern in eine Leinwand unter iOS.
• Unzureichende oder verwirrende Fehlerberichterstattung. Manchmal, wenn Sie einen Attributnamen falsch schreiben oder einfach etwas kaputt machen, das mit der Kernebene selbst zusammenhängt, erhalten Sie auf Ihrer Konsole eine seltsame Fehlermeldung mit zwei Aufruflisten, die Sie untersuchen müssen, um festzustellen, wo das Problem liegt. Manchmal ist es einfach, dies zu lösen, aber manchmal müssen Sie am Ende eine völlig andere Strategie ausprobieren, nur um den Fehler zu vermeiden, da Sie seine Quelle nicht ausfindig machen können.

Fazit

Polymer ist eine faszinierende Technologie, aber sie steckt zweifellos noch in den Kinderschuhen. Als solches ist es noch nicht gut geeignet für die Entwicklung einer großen, produktionsreifen Anwendung auf Unternehmensebene. Darüber hinaus gibt es nicht viele Leitfäden oder Tutorials speziell für die Polymer.js-Webentwicklung.

Ob der JavaScript-zentrierte oder der DOM-zentrierte Ansatz wirklich grundlegend besser ist, ist noch unklar. Polymer bringt einige überzeugende Argumente vor, aber es gibt Gegenargumente.

Am bemerkenswertesten ist vielleicht, dass Polymer ein ziemlich hohes Maß an Fachwissen bei der Verwendung von Browsertechnologien wie dem DOM erfordert. Sie kehren in vielerlei Hinsicht zu den Tagen vor jQuery zurück und lernen, wie die DOM-API einfache Aufgaben wie das Hinzufügen oder Entfernen einer CSS-Klasse von einem Element ausführt. Dadurch fühlt es sich zumindest auf einer gewissen Ebene an, als würde man eher einen Schritt zurück als nach vorne machen.

Allerdings scheint es wahrscheinlich, dass benutzerdefinierte Elemente in Zukunft ein wichtiger Bestandteil der Webentwicklung sein werden, daher wäre es für den heutigen Webentwickler wahrscheinlich ratsam, eher früher als später einzutauchen. Und wenn Sie noch nie versucht haben, Ihre eigenen benutzerdefinierten Elemente zu erstellen, ist Polymer (und dieses Tutorial) wahrscheinlich ein sinnvoller Ausgangspunkt.