13 der besten JavaScript-Frameworks zum Ausprobieren

Seite 4 von 6: Polymer

JavaScript-Frameworks: Polymer-Logo

Beste für:

  • Kombination mit anderen Plattformen und Frameworks
  • Arbeiten mit JavaScript-Standards

Polymer ist eine kompakte Bibliothek, mit der Sie Webkomponenten optimal nutzen können. Lesen Sie weiter, um herauszufinden, wie Sie damit schmerzfreie Formulare erstellen, Ihre Komponenten bündeln, um Anforderungen gering und klein zu halten, und schließlich ein Upgrade auf die neueste Polymer-Version 3.0 durchführen können.



Mit Formularen arbeiten

Benutzerdefinierte Elemente sind Teil des Browsers. Sobald sie eingerichtet sind, funktionieren sie wie jedes native Element auf der Seite. Meistens überbrückt Polymer nur die Lücke zwischen dem Jetzt und dem, was benutzerdefinierte Elemente in Zukunft können, und bringt Funktionen wie Datenbindung mit.

Ein Ort, an dem benutzerdefinierte Elemente glänzen, ist ihre Verwendung als Formulareingaben. Native Eingabetypen in Browsern sind bestenfalls begrenzt, bieten jedoch eine zuverlässige Möglichkeit zum Senden von Daten. In Fällen, in denen keine geeignete Eingabe verfügbar ist, z. B. in einem Feld für die automatische Vervollständigung, können benutzerdefinierte Elemente eine geeignete Drop-In-Lösung bereitstellen.

wie man Maya schneller laufen lässt

Da ihre Arbeit jedoch im Schatten-DOM ausgeführt wird, werden benutzerdefinierte Eingabewerte nicht wie üblich neben regulären Formularelementen gesendet. Browser überspringen sie einfach, ohne auf deren Inhalt zu achten.

Eine Möglichkeit, dies zu umgehen, ist die Verwendung eines Komponente, die vom Polymer-Team bereitgestellt wird. Diese Komponente umschließt ein vorhandenes Formular und findet alle Werte entweder als native Eingabe oder als benutzerdefiniertes Element. Vorausgesetzt, eine Komponente macht irgendwo im Element einen Formularwert verfügbar, wird dieser wie gewohnt erkannt und gesendet.

In Fällen, in denen ein benutzerdefiniertes Element keine Eingabe verfügbar macht, ist es weiterhin möglich, dieses Element in einem Formular zu verwenden, sofern eine Eigenschaft verfügbar gemacht wird, an die gebunden werden kann.

Wenn macht eine Eigenschaft wie 'Wert' Zum Einhängen können wir diesen Wert als Teil einer Zwei-Wege-Bindung herausziehen. Der Wert kann dann als Teil des Hauptformulars in eine separate versteckte Eingabe ausgelesen werden. Es kann an dieser Stelle in eine Zeichenfolge umgewandelt werden, um es für die Formularübertragung geeignet zu machen. Formulare, die nicht von Polymer verwaltet werden und die diese Bindungen verwenden müssten, werden vom Polymer-Team auch bereitgestellt Komponente, um diese Werte automatisch zu binden.

Komponenten bündeln

Einer der größten Vorteile von Polymer besteht darin, dass Komponenten importiert und verwendet werden können, ohne dass ein Bauprozess erforderlich ist. So optimiert diese Importe auch sein mögen, für jede Komponente ist eine neue Anforderung erforderlich, die die Arbeit verlangsamt. Während HTTP / 2 die Arbeit in neueren Browsern beschleunigen würde, haben diejenigen, die es nicht unterstützen, eine stark verschlechterte Erfahrung. Für diese Benutzer sollten Dateien zusammen gebündelt werden.

Wenn ein Projekt mit der Polymer-CLI eingerichtet wird, ist die Bündelung bereits in das Projekt integriert. Durch Laufen Polymer bauen Das Tool sammelt alle Komponenten im gesamten Projekt und integriert alle von ihnen verwendeten Unterkomponenten.

Dies reduziert Anforderungen, entfernt unnötige Kommentare und minimiert die Dateigröße. Es hat auch den zusätzlichen Vorteil, dass separate Bundles für ES5 und ES2015 erstellt werden, um alle Browser zu unterstützen.

polymer-bundler my-input.html > bundled-component.html

Außerhalb von Polymer CLI können Anwendungen weiterhin mithilfe der separaten Polymer Bundler-Bibliothek gebündelt werden. Dies funktioniert ähnlich wie die CLI, ist jedoch eher ein manueller Vorgang. Durch die Bereitstellung einer Komponente werden die Importe der Datei gesiebt, deren Inhalt eingefügt und eine gebündelte Datei ausgegeben.

Polymer Bundler bietet einige separate Optionen zum Anpassen der Ausgabe. Entwickler können beispielsweise festlegen, dass Kommentare beibehalten oder nur bestimmte Komponenten inline geschaltet werden.

Upgrade auf Polymer 3.0

Die Philosophie hinter Polymer ist, die Plattform zu nutzen: Anstatt gegen Browserfunktionen zu kämpfen, arbeiten Sie mit ihnen zusammen, um die Erfahrung für alle zu verbessern. HTML-Importe sind ein wesentlicher Bestandteil von Polymer 2, werden jedoch in Zukunft aus der Webkomponentenspezifikation entfernt.

Polymer 3.0 ändert die Art und Weise, wie Komponenten geschrieben werden, um mit etablierteren Standards zu arbeiten. Während am Framework selbst keine wesentlichen Änderungen vorgenommen werden, ist es wichtig zu wissen, wie sich die Syntax in dieser neuen Version ändert.

Als erstes ist zu beachten, dass Polymer als Paketmanager von Bower abwandert. Um mit der Arbeitsweise der Entwickler Schritt zu halten, wird npm in Zukunft die Heimat von Polymer und allen zugehörigen Komponenten sein.

Um die Verwendung von HTML-Importen zu vermeiden, werden Komponenten unter Verwendung der vorhandenen standardisierten Syntax als JavaScript-Module importiert.

Der Hauptunterschied innerhalb einer Komponente besteht darin, dass die Klasse jetzt direkt exportiert wird. Dies ermöglicht den Modulimport Tag, um richtig zu funktionieren. Alle anderen Komponenten können mithilfe von ES2015-Importanweisungen in diese Datei aufgenommen werden.

Schließlich wurden Vorlagen in die Klasse verschoben und arbeiten mit Vorlagenliteralen. Ein Projekt des Polymer-Teams namens lit-html arbeitet daran, die gleiche Flexibilität wie zu bieten Tags zusammen mit der Effizienz der selektiven DOM-Manipulation.

Nächste Seite: Aurelia

  • 1
  • zwei
  • 3
  • 4
  • 5
  • 6

Aktuelle Seite: Polymer

Vorherige Seite AngularJS Nächste Seite Aurelia