Stencil ist ein einfacher Compiler zum Erstellen von plattformunabhängige Webkomponenten. Der erzeugte Code besteht aus nichts weiter als Vanilla-JavaScript, HTML und CSS und ist daher in jedem modernen Browser ausführbar.
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.
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
