Stencil.js: Web Components, pur serviert

„Wer Angular oder React benutzt, wird sich mit Stencil sehr wohlfühlen“
Keine Kommentare

Stencil ist ein Compiler für wiederverwendbare Web Components in JavaScript. Was man damit so alles machen kann, erklärt Gil Fink (Experte für Webentwicklung, Microsoft MVP und CEO von sparXys) diese Woche auf der International JavaScript Conference in London. Wir haben vorab mit ihm über Web Components gesprochen und darüber, warum man dafür Stencil nutzen sollte.

Entwickler.de: Web Components sind ein noch recht junges Konzept dafür, wiederverwendbaren Code für das Web zu schreiben. Wie unterscheidet sich das Konzept von anderen Standards im Web?

Gil Fink: Der Web-Components-Standard ist gar nicht neu. Die ersten Entwürfe für den Standards sind vor rund vier Jahren entstanden; sie befinden sich noch in der Entwicklung. 2017 wurde allerdings eine neue Version des Standards veröffentlicht, der einige der bisherigen APIs und Konzepte ändert. Mit der Einführung des Konzepts der Micro-Frontends hat der Web-Components-Standard in der letzten Zeit aber immer mehr Aufmerksamkeit erregt, da man damit Komponenten zwischen verschiedenen Micro-Apps teilen  kann.

Mit Hilfe des Web-Components-Standards können wir unabhängige und abgekapselte Web-Komponenten erstellen, die in jeder Web-Applikation, in jeder Web-Library und in jedem Web-Framework wiederverwendet werden können. Das hilft dabei, die Bindung an eine bestimmte Bibliothek oder ein bestimmtes Framework (wie Angular oder React) zu vermeiden und Komponenten für den unternehmensweiten Einsatz oder Open Source zu veröffentlichen. Das ist eine der Stärken des Standards.

Entwickler.de: Wie ausgereift ist der neue Standard? Gibt es noch Einschränkungen für den Einsatz von Web Components?

Gil Fink: Der Standard ist noch in der Entwicklung und einige Teile sind bisher noch als Working Drafts verfasst. Die meisten Browser haben aber bereits den größten Teil des Standards implementiert. In der Übersicht von webcomponents.org kann die Browserunterstützung abgelesen werden. Wer auf Nummer sicher gehen will, kkann aber auch immer ein Polyfill hinzufügen. Das ist ein kleines Stück Code, das die Standard-APIs nachahmt und von Browsern genutzt wird, die den Standard nicht unterstützen. Ein bekanntes, entsprechendes Polyfill kann hier gefunden werden.

Entwickler.de: Was ist das größte Problem bei der Arbeit mit Web Components?

Gil Fink: Das größte Problem bei der Arbeit mit Web Components sind meiner Meinung nach unsere Erwartungen an den Standard. Ich möchte kurz erläutern, was ich damit meine. Als Entwickler sind wir an Librarys und Frameworks gewöhnt, die uns out-of-the-box Features wie Data Binding, Lazy Loading oder Performance bieten. Wenn man nun damit anfängt, mit dem Web-Components-Standard zu arbeiten, muss man den Code aber von Hand schreiben und all die Magie selbst herbeizaubern.

Für einige Entwickler klingt das attraktiv. Für andere wie mich ist es super cool, weil wir selbst die Verantwortung dafür in die Hand nehmen, die Komponente mit all ihren Features zu erstellen. Das ist aber auch einer der Gründe, warum Entwickler den Standard noch immer meiden und lieber direkt mit Librarys und Frameworks arbeiten, die diese Dinge weg-abstrahieren.

Entwickler.de: Wie unterstützt Stencil Entwickler dabei?

Gil Fink:  Stencil ist ein Compiler für Web Components. Man schreibt Komponenten in der Stencil-Syntax und kompilieren und generieren damit standardkonforme Web Components. Stencil bringt einige eingebaute Features mit, beispielsweise für Reaktivität, Lazy Loading und Data Binding. Um diese zu nutzen, wird der Component-Library einfach ein kleiner Footprint-Code (ca. 6kb) hinzugefügt, der alle Features von Stencil enthält. Stencil-Code wird mit TypeScript und JSX erstellt, ist also opinionated. Wer bereits mit Angular oder React gearbeitet hat, wird sich damit aber sehr wohlfühlen.

Entwickler.de: Stencil wurde vom Ionic-Team entwickelt. Besteht irgendeine Ähnlichkeit oder ein Zusammenhang zwischen den Tools?

Gil Fink: Wie in der Frage erwähnt wurde, wird Stencil vom Ionic-Team entwickelt. Es wurde als internes Werkzeug entwickelt, mit dem das Ionic-Team die neue Version des Ionic Core erstellt hat. Das bedeutet, dass die nächste Version von Ionic Core vom Stencil-Compiler generiert wird und damit standardkonform ist.

Entwickler.de: Baut Stencil wirklich pure Web Components oder ist der Compiler doch auch dogmatisch?

Gil Fink: Stencil erzeugt pure Web Components, die aber auch dogmatisch sind. Stencil-Code wird in TypeScript und JSX geschrieben,also wird der generierte Code von beiden Sprachen beeinflusst und ist entsprechen davon abhängig, wie die Sprachen Code generieren.

Wer mehr über Stencil und Web Components wissen möchte, kann an meiner iJS-Session teilnehmen.

Im Interview: Gil Fink
Gil Fink is a web development expert, Microsoft MVP and sparXys CEO. He is currently consulting for various enterprises and companies, where he helps to develop web based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of “Pro Single Page Application Development” book (Apress), co-organizer of GDG Rashlatz Meetup and AngularUP conference.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -