© Sylverarts Vectors/Shutterstock.com
Stencil für die moderne Entwicklung von Web Components

Web Components auf Steroiden


Saubere Architektur und gute Dokumentation machen Web Components erst richtig gut wiederverwendbar. Beides lässt sich ohne eigenes Framework in der Regel kaum für größere Projekte abbilden. Hier kommen Frameworks speziell für Web Components ins Spiel. In diesem Fall Stencil, ein Tool zur Entwicklung, aber auch Dokumentation von Web Components. Eine Kampfansage gegen große Single Page Application Frameworks?

Web Components sind ein natives Komponentenmodell im Browser. Wir können damit Komponenten entwickeln, ohne auf ein Framework angewiesen zu sein. Weniger Abhängigkeiten, weniger Fehlermöglichkeiten. Wer Web Components ausprobiert oder meinen Artikel im Windows Developer 4.20 gelesen hat, wird sich vorkommen wie bei „Zurück in die Zukunft“. Moderne Anwendungsentwicklung und moderne Konzepte, aber mit HTML, JavaScript und CSS, wie wir es vor vielen Jahren schon geschrieben haben.

Wir bauen mit Web Components keine vollständigen Anwendungen, sondern vielmehr unsere Basiskomponenten, unser Designsystem, das wir in unseren Teams und deren Anwendungen nutzen, um ein einheitliches Look and Feel zu erhalten. Diese Komponenten erhalten ihre Daten in der Regel von außen und stellen sie wie gewünscht dar. Das bedeutet, dass der Entwickler wissen muss, welche Eigenschaften eine Komponente hat, eine gute Dokumentation über die Komponente ist wichtig.

Hier setzt Stencil [1] an, ein vom Ionic-Framework-Team entwickeltes Tool, das auch für das aktuelle Ionic Framework 5 genutzt wird. Stencil versteht sich als Compiler für Web Components und PWAs und bringt uns damit wirklich zurück in die Zukunft. Es bringt gewohnte Features moderner SPA Frameworks mit und liefert als Ausgabe Web Components, die wir überall einsetzen können. Es ist wichtig zu verstehen, dass Stencil kein UI Framework ist, also kein Aussehen von Komponenten definiert; das obliegt uns Entwicklern. Es hilft uns aber, genau diese Komponenten und ihr Aussehen zu definieren, die dann von anderen Teams und Anwendungen genutzt werden können.

Als Features erhalten wir mit Stencil eine robuste Build Pipeline mit TypeScript, CSS-Präprozessoren und Dokumentationsgenerierung. Zusätzlich mischt Stencil Vorzüge von Angular und React. Es nutzt zur Komponentendefinition Dekoratoren und JSX für die Templatedefinition. So haben wir die Möglichkeit, reaktive Komponenten zu entwickeln, deren DOM-Updates sich durch das von Stencil implementierte Virtual DOM auf ein Minimum beschränken.

Stencil hat da Ziel, Komponenten zu ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang