Webkomponenten: 9 wissenswerte Projekte im Jahr 2019

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, ist der Ansicht, dass Sie sich die Projekte ansehen sollten, die hier diskutiert werden, wenn Sie beim Entwerfen der Schnittstellen Ihrer Anwendungen Webkomponenten verwenden und nach einer geeigneten Bibliothek suchen, die von UI-Frameworks unabhängig ist.

Vorläufige Informationen

Als ich ständig von Stencil , Svelte und Lit HTML hörte, dieses Material konzipierte und nach Webkomponentenbibliotheken suchte, dachte ich, dass es für mich schwierig sein würde, basierend auf den Fähigkeiten von HTML etwas Interessantes zu finden. Das lag nur daran, dass ich das Potenzial von Webkomponenten noch nicht voll ausgeschöpft habe. Ich war eine Person, deren Denken auf den Rahmen von Bibliotheken und Rahmen beschränkt ist. Mein Wunsch erinnerte mich an etwas wie "eine interessante HTML-Bibliothek finden". Aber jetzt verstehe ich, dass es nicht so schwierig ist, eine gute Bibliothek von Webkomponenten zu finden.

Alle Webkomponenten sind dank der zugrunde liegenden Technologien, auf denen sie basieren, sehr beliebt. Sie können per Definition miteinander interagieren und sich gut zeigen, wenn sie zusammen im selben Projekt verwendet werden. Gleichzeitig funktioniert das, was mit dem Webkomponenten-Standard erstellt wird, beispielsweise bestimmte Komponenten oder Widgets, zum einen in allen modernen Browsern und zum anderen ist es mit jeder JavaScript-Bibliothek oder jedem JavaScript-Framework kompatibel. die HTML verwenden.

1. Material Web Components Library

Wenn der Name der Bibliothek der UI-Komponenten das Wort „Material“ enthält, führt dies normalerweise zu den führenden Anbietern von Bewertungen und Downloads. Die Material Web Components- Bibliothek von Google ist eine Webversion der Material Library. Obwohl sich die betreffende Bibliothek noch in der Entwicklung befindet, können die in ihrer Zusammensetzung enthaltenen Komponenten bereits in einer Vielzahl von Webprojekten verwendet werden. Die Entwicklung dieser Bibliothek wird auf jeden Fall sehr interessant sein.

2. PolymerElements Repository Set

Mit der Polymer- Bibliothek von Google können Sie eigenständige, wiederverwendbare Webkomponenten erstellen, die nach dem gleichen Prinzip wie Standard-HTML-Elemente arbeiten. Die Verwendung dieser Webkomponenten ist so einfach wie die Verwendung normaler HTML-Elemente. Das PolymerElements- Repository enthält mehr als 100 Webkomponenten, die von Polymer mithilfe separater Repositorys erstellt wurden. Hier ist ein Beispiel für die Arbeit mit einer ähnlichen Webkomponente:

<!--   --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!--       HTML- --> <paper-checkbox>Web Components!</paper-checkbox> 

3. Vaadin Components Library

Ich glaube, dass Vaadin Components ein vielversprechendes Projekt ist. Diese Bibliothek enthält etwa 30 Open-Source-Webkomponenten, mit denen mobile und Desktop-Schnittstellen für moderne Browser entwickelt werden können. Der Status des Bibliotheksrepositorys lässt darauf schließen, dass derzeit aktiv daran gearbeitet wird.

4. Wired Elements Library

Die Wired Elements- Bibliothek hat auf GitHub fast 7.000 Sterne erhalten. Sie können damit Elemente erstellen, die so aussehen, als würden sie von Hand gezeichnet. Sie ähneln Layouts, und jedes Mal, wenn der Bildschirm angezeigt wird, ändern sich die Elemente, dh selbst dieselbe Seite, die zu unterschiedlichen Zeiten angezeigt wird, sieht anders aus. Ich weiß nicht, ob eine solche Bibliothek für irgendjemanden nützlich ist. Das einzige, was unbestritten ist, ist, dass die damit gestalteten Seiten fantastisch aussehen. Hier können Sie damit experimentieren. Hier ist ein Beispiel für die Verwendung mit React. Und hier - mit Vue.

5. Elix-Bibliothek

Elix ist eine Reihe von Webkomponenten, die die Anforderungen von Standardmustern für das Schnittstellendesign abdecken. Die hohe Qualität dieser Komponenten wird erreicht, indem sichergestellt wird, dass sie den Empfehlungen in diesem Dokument entsprechen. In Übereinstimmung mit diesen Empfehlungen werden beispielsweise Standard-HTML-Elemente als Qualität betrachtet. Es sollte beachtet werden, dass das Elix-Projekt eine Gemeinschaft von Gleichgesinnten unterstützt und sie nach denen suchen, die sich ihnen anschließen können.

6. Zeitelementbibliothek

Die Zeitelementbibliothek gibt es schon seit geraumer Zeit, sie ist auf GitHub mäßig beliebt. Es basiert auf einer Komponente, die die Funktionen des Standard-HTML-Elements <time> . Mit dieser Bibliothek können Sie Zeitstempel als lokalisierte Zeichenfolgen oder als Text darstellen, der im Browser des Benutzers automatisch aktualisiert wird. Hier ist ein Beispiel für die Arbeit mit dieser Bibliothek:

 <local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time> 

7. UI5-Webkomponentenbibliothek

Die UI5-Webkomponentenbibliothek wurde im Rahmen des OpenUI5- Projekts von SAP entwickelt. Es handelt sich um eine Sammlung leichter, unabhängiger Elemente der Benutzeroberfläche, die zur Wiederverwendung geeignet sind. Es ist zu beachten, dass diese Komponenten kein Add-On über UI5 sind. Sie sind unabhängige Elemente und können in Verbindung mit verschiedenen Umgebungen für die Entwicklung von Webschnittstellen verwendet werden. Das Komponentendesign entspricht diesem SAP-Handbuch.

8. PatternFly Elements-Projekt

Das PatternFly Elements- Projekt besteht aus einer Sammlung von etwa 20 praktischen Webkomponenten sowie Tools für deren Entwicklung. Diese Webkomponenten eignen sich für den Einsatz in allen Bereichen der Webentwicklung und passen gut zu verschiedenen Bibliotheken und Frameworks. Sie können sie beispielsweise verwenden, wenn Sie Webprojekte mit React, Vue, Angular oder normalem JavaScript entwickeln.

Führen Sie die folgende Befehlsfolge aus, um mit PatternFly-Elementen zu experimentieren:

 git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install #    -  lerna bootstrap npm run storybook 

9. Das Projekt webcomponents.org

Das webcomponents.org- Projekt ist ein Portal, bei dem es sich um einen Katalog von Webkomponenten handelt, die mit Polymer und benutzerfreundlichen Projekten erstellt wurden. Es ist gut, weil Sie mit seiner Hilfe über neue Entwicklungen des Polymer-Teams auf dem Laufenden bleiben können. Auch hier finden Sie interessante Materialien zu Webkomponenten.

Zusammenfassung

In diesem Artikel haben wir 9 Projekte im Zusammenhang mit Webkomponenten betrachtet. Wir hoffen, dass Sie die entsprechenden Repositories und Websites durchsuchen können, um das zu finden, wonach Sie suchen. Wenn Sie sich für das Thema Webkomponenten interessieren, finden Sie hier , hier und hier Listen mit Webkomponenten und zusätzliche Materialien für die Arbeit mit diesen.

Liebe Leser! Welche Webkomponentenbibliotheken verwenden Sie?