Share
Anmerkung des Herausgebers: Dieser Artikel wurde aktualisiert, um Verweise auf veraltete Komponenten zu entfernen, insbesondere Polymer-Ajax, die inzwischen durch Core-Ajax ersetzt wurden. Dank an Rob Dodson, Entwickleranwalt bei Google, für das Feedback.
Das Erstellen moderner Webanwendungen erfordert viel Werkzeug. Dazu gehören Präprozessor, JavaScript-Frameworks, Testwerkzeuge und vieles mehr. Und mit der Komplexität dieser Apps nimmt auch die Bandbreite an Werkzeugen und Services zu, die für deren Verwaltung erforderlich sind. Wäre es nicht toll, wenn einige Dinge vereinfacht würden??
Webkomponenten zielen darauf ab, einige dieser Komplexitäten zu lösen, indem sie eine einheitliche Methode zum Erstellen neuer Elemente bereitstellen, die umfangreiche Funktionen umfassen, ohne dass zusätzliche Bibliotheken erforderlich sind. Webkomponenten bestehen aus vier verschiedenen Spezifikationen (benutzerdefinierte Elemente, Vorlagen, Schatten-DOM- und HTML-Importe), die im W3C ausgearbeitet werden.
Um die Lücke zu schließen und den Entwicklern Zugang zu dieser umfangreichen Funktionalität zu ermöglichen, hat Google die Polymer-Bibliothek entwickelt, die als Satz von Füllungen dient, um Ihnen das Versprechen von Webkomponenten heute zu bringen. Lass uns tiefer eintauchen.
Wie bereits erwähnt, besteht die Polymer-Bibliothek aus einer Reihe von Polyfills, mit deren Hilfe Sie Web-Komponenten in allen gängigen modernen Browsern erstellen können. Es bietet den Rahmen für das Definieren, Erstellen und Rendern komplexer benutzerdefinierter Elemente auf eine vereinfachte Art und Weise, ähnlich wie die Tags, mit denen Sie gewachsen sind. Was ich damit meine, ist die Vereinfachung der Verwendung komplexer Komponenten durch:
Es ist jedoch wichtig, sich daran zu erinnern, dass das Framework selbst auf der Grundlage der vom W3C geprüften individuellen Vorgaben entwickelt wird und somit eine Grundlage bietet, die sich in Richtung der wichtigsten Normungsorganisation entwickeln sollte.
Diese Bibliothek bietet die Möglichkeit, wiederverwendbare Komponenten zu erstellen, die als echte DOM-Elemente fungieren und gleichzeitig dazu beitragen, die Abhängigkeit von JavaScript zu minimieren, um komplexe DOM-Manipulationen durchzuführen, um reichhaltige UI-Ergebnisse zu liefern.
Hier ist ein kurzes Beispiel von der Polymer-Site. Angenommen, ich wollte eine Arbeitsuhr auf meiner Seite darstellen. Normalerweise erfordert das einige anspruchsvolle JavaScript-Codes, aber durch die Verwendung von Polymer kann ich einfach die folgende Syntax verwenden:
Dies sieht aus wie die HTML-Tag-Syntax, mit der wir alle aufgewachsen sind, und ist viel einfacher zu implementieren, zu lesen und zu verwalten als komplexer JavaScript-Code. Und das Endergebnis sieht so aus:
Und da es sich um ein normales Element im DOM handelt, können Sie es auch mit CSS wie folgt gestalten:
Accentsconagua
Polymer-ui-Uhr Breite: 320px; Höhe: 320px; Anzeige: Inline-Block; Hintergrund: URL ("… /assets/glass.png") no-repeat; Hintergrundgröße: Cover; Grenze: 4px festes rgba (32, 32, 32, 0,3); Es ist sicherlich nicht die schönste Uhr, aber darum geht es nicht. Tatsache ist, dass Sie die Komponente nach Ihren Wünschen anpassen und über eine einfachere und wartungsfreundlichere Syntax wiederverwenden können.
Es gibt drei Möglichkeiten, Polymer zu installieren und zu verwenden:
Die einfachste und empfohlene Methode ist die Verwendung von Bower, da dies nicht nur unglaublich einfach ist, sondern auch die Abhängigkeiten von Polymer regelt. Das heißt, wenn Sie ein bestimmtes Oberflächenelement installieren, das von einem anderen abhängig ist, kann Bower dies für Sie erledigen.
Bower wird als Node-Paket installiert, daher müssen Sie Node.js installieren. Geben Sie in die Befehlszeile Folgendes ein:
npm install -g bower
Dies sollte Bower aus der npm-Registry entfernen und so installieren, dass es Ihnen weltweit zur Verfügung steht. Von dort aus haben nachfolgende Bower-basierte Installationen folgende Form:
Bower installieren
Zumindest sollten Sie die Plattform- und Kernkomponenten von Polymer installieren, da diese die Grundlage für die Erstellung und Ausführung Ihrer Kundenelemente bilden.
Bower installieren --save Polymer / Plattform Bower installieren --save Polymer / Polymer
Sie können dies abkürzen, indem Sie Folgendes eingeben:
Bower installieren --save Polymer / Plattform Polymer / Polymer
Polymer verfügt auch über einen umfangreichen, vordefinierten Satz von Elementen, den Sie sofort nutzen können. Sie bestehen aus Elementen auf der Benutzeroberfläche und nicht auf der Benutzeroberfläche, die folgende Funktionen bereitstellen:
Und das kratzt nur an der Oberfläche. Dort gibt es bereits eine Menge mit vollem Quellcode, der als Lernwerkzeug dient und es Ihnen ermöglicht, die Funktionen an Ihre Bedürfnisse anzupassen.
Sie haben die Wahl, wie Sie diese Komponenten installieren. Sie können alles oder nur das installieren, was Sie verwenden möchten. Um alles zu installieren, geben Sie Folgendes ein:
Bower installieren Polymer / Kernelemente Bower installieren Polymer / Polymer-Ui-Elemente
Dies ist der Ansatz der Küchenspüle, und wenn Sie anfangen, Polymer zu lernen, ist es wahrscheinlich am einfachsten, dies zu tun, um Ihnen ein Gefühl dafür zu vermitteln, was verfügbar ist.
Sobald Sie mit dem Framework vertraut sind, können Sie die einzelnen Komponenten auswählen und wie folgt installieren:
Bower installieren Polymer / Polymer-Ui-Akkordeon
Das ist die Schönheit von Bower. Jede Komponente wird mit einem bower.json Konfigurationsdatei, die ihre Abhängigkeiten beschreibt. Also, wenn Sie die installierten Akkordeon Bei der Betrachtung der Konfiguration können wir feststellen, dass es Abhängigkeiten von der Hauptkomponente gibt Polymer Komponente sowie die Wähler und zusammenklappbar Komponenten.
"Name": "Polymer-Ui-Akkordeon", "Privat": "wahr", "Abhängigkeiten": "Polymer": "Polymer / Polymer # 0.2.0", "Polymer-Selektor": "Polymer / Polymer-Selektor # 0.2.0 "," Polymer-ui-collapsible ":" Polymer / Polymer-ui-collapsible # 0.2.0 "," Version ":" 0.2.0 "
Das Wichtigste ist, dass Sie sich keine Sorgen machen müssen, weil Bower das für Sie erledigt. Deshalb ist es das bevorzugte Werkzeug für die Installation von Polymer.
Bei der Installation über Bower wird ein Ordner mit dem Namen erstellt bower_components in Ihrem Projektordner, in dem sich alles befindet, was Polymer braucht.
Die Polymer-Site bringt die Beschreibung von benutzerdefinierten Elementen so gut wie möglich zusammen:
„Benutzerdefinierte Elemente sind die Kernbausteine von Polymer-basierten Anwendungen. Sie erstellen Anwendungen, indem Sie benutzerdefinierte Elemente zusammenstellen, entweder von Polymer bereitgestellte, von Ihnen selbst erstellte oder Elemente von Drittanbietern. "
Polymer gibt uns die Möglichkeit, unsere eigenen benutzerdefinierten Elemente von Grund auf zu erstellen und sogar andere Elemente wiederzuverwenden, um unsere benutzerdefinierten Elemente zu erweitern. Dazu erstellen Sie zunächst eine Vorlage des benutzerdefinierten Elements. Diese Vorlage ist in jeder Hinsicht eine Kombination aus HTML, CSS und JavaScript und enthält die Funktionalität, die verfügbar ist, wenn Sie das Element verwenden. Es basiert auf der Spezifikation WhatWG HTML Templates, die native Unterstützung für das clientseitige Templating bieten soll.
Schauen wir uns dieses einfache Beispiel einer Polymer-Vorlage an:
Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniy, quis nostrud ausüben ullamco laboris nisi ut aliquip ex a commodo follat. Duis auture irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Mit diesem Element können Sie einfach Lorem Ipsum-Text in Ihren Code einfügen, indem Sie einfach das folgende Tag verwenden:
Das erste, was enthalten sein muss, ist Polymer Core, die Haupt-API, mit der Sie die benutzerdefinierten Elemente definieren können:
Der nächste Schritt besteht darin, den Namen des neuen Elements mithilfe von Polymer zu definieren Polymerelement Direktive:
In diesem Fall habe ich mein neues Element benannt Lorem-Element. Der Name ist ein erforderliches Attribut und muss einen Bindestrich ("-") enthalten..
Von dort benutzen wir die Vorlage Direktive zum Umschließen der Tags und des Codes des Hauptkörpers, aus denen unser neues Element besteht. Für dieses einfache Beispiel greife ich nach Lorem Ipsum-Text und wickelte ihn mit Absatz-Tags ein.
Das ist es! Mein benutzerdefiniertes Element ist fertig und ich kann es jetzt verwenden.
Beachten Sie, dass diese Komponente in andere Seiten Ihrer Web-App importiert wird, die sie möglicherweise nutzen möchten. Dies ist möglich, da Polymer die HTML-Importspezifikation implementiert hat, mit der Sie HTML-Dokumente in andere HTML-Dokumente aufnehmen und wiederverwenden können.
Zuerst müssen Sie aufnehmen Plattform.js welche die Polyfill bereitstellt, die die nativen APIs nachahmt:
Als nächstes müssen wir unser benutzerdefiniertes Element in unsere Webseite importieren:
Sobald Sie dies getan haben, ist Ihr neues benutzerdefiniertes Element jetzt verfügbar, sodass Sie Folgendes tun können:
Sie haben auch die Möglichkeit, das Element vollständig zu gestalten:
Dies ist ein ziemlich einfaches Beispiel. Lassen Sie uns noch einen Schritt weiter gehen.
Wenn Sie sich erinnern, habe ich erwähnt, wie Sie vorhandene Elemente nutzen können, um Ihr benutzerdefiniertes Element zu verbessern. Schauen wir uns ein Beispiel dafür an.
Angenommen, ich wollte ein Element haben, das an Reddit ging und Daten aus einem der Subreddits holte. Ich könnte die vorhandene Ajax-Komponente von Polymer nutzen, indem ich das in mein benutzerdefiniertes Element wie folgt einbinde:
resp.data.public_description
Beachten Sie, dass ich die Polymer-Ajax-Komponente importiere und sie dann in meine Vorlage ablege. Dies macht es jetzt leicht, auf mein neues Element zu verweisen, wodurch der XHR-Aufruf die JSON-Daten zurückzieht und sie in meine Absatz-Tags mit der öffentlichen Beschreibung des Subreddits einfügt:
„Dinge, die Sie dazu bringen, AWW zu gehen! Wie Welpen. Und Hasen… und so weiter… Ein Ort für wirklich süße Bilder, Videos und Geschichten! “
Die Antwort wird zurückgegeben, und Polymer stellt eine bidirektionale Datenbindung her, die es mir ermöglicht, die Daten zu verwenden, indem sie in doppelte geschweifte Klammern wie diese eingeschlossen werden resp.data.public_description.
Das ist cool, aber in den meisten Fällen werden wir keine URL für eine bestimmte Ressource hartcodieren. Lassen Sie uns dies noch erweitern, indem Sie unserem benutzerdefinierten Element Attribute hinzufügen. Das zu tun ist unglaublich einfach. Zuerst müssen Sie das aktualisieren Polymerelement Anweisung, um die gewünschten Attribute für Ihr benutzerdefiniertes Element wiederzugeben:
In diesem Fall möchte ich in der Lage sein, ein Subreddit an mein Element zu übergeben und es darauf basierend Daten abzurufen. Ich kann den Anruf jetzt ändern Polymer-Ajax so was:
Beachten Sie, wie ich die Datenbindungsfunktionen von Polymer verwende, um die URL basierend auf dem Attributwert von dynamisch zu erstellen subreddit. Jetzt kann ich aktualisieren, wie ich auf mein benutzerdefiniertes Element verweise, um es in dem gewünschten Subreddit zu übergeben:
Das letzte, was ich tun möchte, ist sicherzustellen, dass es einen Standardwert für mein Attribut gibt, damit mein Code nicht explodiert. Ich füge dies in meine Elementvorlage ein:
Dadurch wird sichergestellt, dass für das öffentliche Attribut meines Elements immer ein Standardwert festgelegt wird. So sieht der endgültige Code aus:
resp.data.public_description
Es gibt noch einiges mehr, was Sie tun können, z. B. benutzerdefinierte Callback-Handler hinzufügen, Ereignisse verwalten, Mutationsbeobachter einrichten, um Änderungen am DOM zu verarbeiten, und vieles mehr.
Webkomponenten werden die Art und Weise ändern, in der wir Web-Apps erstellen, und Polymer bringt uns dies heute. Sie haben jetzt die Möglichkeit, eigene angepasste und wartbare Komponenten zu erstellen, die auf die spezifischen Anforderungen Ihrer Anwendung zugeschnitten werden können. Diese Komponenten können problemlos gemeinsam genutzt werden, sodass andere Teams oder die Community diese gekapselten Bausteine problemlos freigeben und von diesen profitieren können.
