Dennis Fricke

Webcomponents mit stencil

Knowledge Base

Stencil ist ein einfacher Kompiler, zum Erstellen von plattformunabhängige Webkomponenten. Der erzeugte Code besteht aus nichts weiter als Vanilla-JavaScript, HTML und CSS besteht und daher in jedem modernen Browser ausführbar ist.

Eigenschaften von mit Stencil erzeugten Webkomponenten

Stencil vereint einige bewährte sowie einige sehr neue Konzepte anderer populärer Frameworks:

Virtueller DOM – eine Repräsentation des eigentlichen DOMs, über die eine schnellere Bearbeitung und Aktualisierung desselben erfolgen kann; ähnlich wie es die Frameworks Vue.js und React umsetzen. Lazy Loading – die Komponenten werden asynchron und damit deutlich schneller geladen und können mit anderen weiteren Komponenten kombiniert werden. Asynchrones Rendering – ähnlich wie in der Entwicklerversion von React („Fiber“) gelöst. Reaktives Data-Binding – reaktive Bindung zwischen den Daten im DOM und in der Komponente. TypeScript – wie schon Angular oder Ionic unterstützt auch Stencil im Quellcode TypeScript, die Erweiterung des neuen ECMAScript-Sprachkerns u.a um Klassen, Interfaces und statische Typisierung. JSX – eine einbettbare XML-artige Syntax, aus der JavaScript-Code erzeugt wird; als Teil von React entwickelt wird JSX nun auch von TypeScript unterstützt.

Vorteile von mit Stencil erzeugten Webkomponenten

Mit Stencil erzeugte Webkomponenten weisen einige Vorteile gegenüber herkömmlichen Ansätzen auf:

Performance – die Komponenten sind im Vergleich zu Lösungen mittels Frameworks ohne unnötigen Ballast und dementsprechend schnell. Stabilität – der Code besteht aus bewährtem Standard-Javascript/HTML/CSS und unterliegt daher nicht den permanenten Versionsänderungen moderner Frameworks. Interoperabilität – die Komponenten lassen sich in allen größeren Frameworks verwenden. Vertrautheit – viele bewährte Elemente anderer Frameworks sind in kompakter Form auch in Stencil realisiert worden.


Weitere Informationen findest du bei Learning at Ninjaneers.

15 Sep 2020 #stencil #Webcomponents