© Amarylle/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 erzeugen, die den Webstandards entsprechen und auf ihnen basieren. Durch TypeScript kann der Stencil-Compiler automatisch Optimierungen vornehmen, um eine hohe Performance zur Laufzeit zu gewährleisten. Stencil möchte nur ein kleines, aber sehr robustes API anbieten, dessen Grundlage die Webstandards sind. So soll eine zukunftssichere Bibliothek ermöglicht werden, die auf den nativen Web Components aufsetzt und durch das eigene API dem Entwickler die typische Boilerplate abnimmt.

Wir wollen gemeinsam zwei kleine Web Components mit Hilfe von Stencil entwickeln. Die erste wird von dem öffentlichen PokéAPI [2] eine Liste von Pokémon abrufen und darstellen. Eine zweite berechnet die Pagination, visualisiert sie und stellt ein Event bereit, das beim Durchblättern aufgerufen wird. Die Listenkomponente empfängt dieses Event und wird die entsprechende Seite vom API anfordern. Auf GitHub [3] ist das fertige Beispiel hinterlegt, Abbildung 1 zeigt das UI. Los geht’s!

rauber_StencilJS_1.tif_fmt1.jpgAbb. 1: Das fertige Beispiel

Projekterzeugung

Stencil benötigt eine aktuelle Node-Version, die mindestens npm in Version 6 mitbringt, out of the box mindestens Node 10.3.0. Nach erfolgter Installation von Node kann ein Stencil-Projekt mit npm init stencil auf der Kommandozeile erstellt werden. So lädt npm die nötigen Quellen für das Stencil CLI herunter und startet es automatisch. Im CLI können wir zwischen drei Optionen wählen: ionic-pwa, app und component (Abb. 2). ionic-pwa legt ein neues Projekt zur Erstellung einer Progressive Web App an, die auf dem Ionic Framework basiert (und damit auch ein UI festlegt). app legt ein neues Projekt zur Erstellung einer SPA mit Hilfe von Stencil an, hier haben wir also Features wie Routing. components erstellt eine Web-Components-Bibliothek, und hierfür werden wir uns entscheiden. Nach der Bestätigung müssen wir einen Projektnamen festlegen, bspw. windows-developer-stencil-components. Nach einer weiteren Bestätigung erzeugt das CLI einen Ordner mit dem Projektnamen und einer Beispielkomponente. Abbildung 3 zeigt den Aufbau des erzeugten Projekts.

rauber_StencilJS_2.tif_fmt1.jpgAbb. 2: Auswahlmöglichkeiten des Stencil CLI
rauber_StencilJS_3.tif_fmt1.jpgAbb. 3: Struktur eines neuen Stencil-Projekts

Die wichtigsten Dateien und Ordner: package.json, stencil.config.ts, src/index.html, src/components und src/components.d.ts. package.json enthält einige vordefinierte Kommandos, um mit dem Projekt zu arbeiten:

  • build erzeugt alle unsere Komponenten, sodass wir sie in weiteren Projekten einbinden können.

  • start startet die Entwicklungsumgebung von Stencil. Diesen Befehl benötigen wir, wann immer wir unsere Komponenten entwickeln.

  • test führt einmalig Unit-Tests aus; geeignet für ein CI-System.

  • test.watch führt automatisch beim Ändern des Source Codes die Tests aus; praktisch für Test-driven Development.

  • generate erzeugt eine neue Web Component mit dem Standardtemplate von Stencil.

stencil.config.ts enthält Konfigurationen für unser Projekt, z. B., welche Ausgabe wir erzeugen und welche Plug-ins wir nutzen möchten. In der Dokumentation finden wir alle Möglichkeiten [4]. Per Standard verarbeitet Stencil in den Komponenten nur CSS. Für unser Projekt wollen wir allerdings SCSS nutzen. Dazu müssen wir in einer Kommandozeile den folgenden Befehl ausführen: npm install -D @stencil/sass. Damit wird das Plug-in für SCSS installiert. Damit der Stencil-Compiler es benutzt, müssen wir an der Datei stencil.config.ts eine Ergänzung vornehmen. In der Datei wird ein Objekt config exportiert, ihm fügen wir den Eintrag plugins: [sass()], hinzu. Den Import schreiben wir ganz an den Anfang der Datei: import { sass } from '@stencil/sass';

Nach dem Abspeichern können wir die Date...

Neugierig geworden? Wir haben diese Angebote für dich:

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