Web Components in Microsoft Edge

So gehören zum Beispiel vier der fünf meist gewünschten Plattform-Features bei Microsofts UserVoice – Shadow DOM, Template, Custom Elements und HTML Imports – zu den Web Components. Kein Wunder also, dass man sich beim Edge-Entwicklerteam immer stärker mit der möglichen Implementierung auseinandersetzt. Um auch die User über den aktuellen Stand auf dem Laufenden zu halten, haben Travis Leithead und Arron Eicholz nun in einem Beitrag im Edge-Entwicklerblog ihre Sichtweise, einige Hintergründe und eine erste Roadmap zur Implementierung von Web Components in Microsoft Edge veröffentlicht.

Ein altes Design-Konzept

Das Ziel eines jeden Komponenten-Systems soll es sein, die Gesamtkomplexität zu reduzieren, indem es für Isolation sorgt oder zumindest eine Art natürliche Grenze zwischen mehreren Systemen schafft, um ihre jeweilige Komplexität zu verstecken. Dabei gilt: Eine gute Isolation vereinfacht die Wiederverwendbarkeit und Funktionstüchtigkeit deutlich.

Web-Applikationen sind heutzutage genauso komplex wie jede andere Software-Applikation. Wurde die Web-Applikations-Komplexität auf dem Server ursprünglich durch das Isolieren der Applikation in einzelne Seiten gemanagt, ist das dank AJAX und ähnlichen Fähigkeiten mittlerweile anders, und Entwickler müssen nicht länger zwischen verschiedenen Seiten einer Web-Applikation navigieren. Da aber vor allem clientseitige Web-Applikations-Logik noch deutlich komplexer ist, bedarf es einer anderen Lösung.

How Much Framework?

by Arne Blankerts (thePHP.cc)

Building a Cloud-Friendly Application

by Larry Garfield (Platform.sh)

Crafting Maintainable Laravel Applications

by Jason McCreary (Pure Concepts, LLC)

Architektur mit JavaScript

mit Golo Roden (the native web)

WebComponents: Native Komponenten fürs Web – ohne und mit Frameworks

mit Manuel Rauber (Thinktecture AG)

Hier kommen die Web Components ins Spiel. Sie sollen die Komplexität durch das Isolieren einer verwandten Gruppe von HTML, CSS und JavaScript innerhalb des Kontexts einer einzigen Seite reduzieren. Dafür gibt es bereits unabhängige Isolierungsmodelle wie etwa CSS Style Isolation, JavaScript Scopes, Global Object Isolation und Element Encapsulation (iframe). Worum es sich dabei jeweils handelt, erklären Leithead und Eicholz noch mal sehr ausführlich in ihrem Blogpost.

Web Components – ein transformativer Schritt für das Web

Schon in der Vergangenheit wurden mehrere Versuche unternommen, Technologien zu implementieren, mit denen iframe und ähnliche Kapselungs-Features verbessert werden sollten, etwa HTML Components oder XBL. Allerdings hat keine der Technologien einen langfristigen Effekt auf das heute Web ausgeübt. Ändern soll sich das mit dem von Google in die Wege geleiteten neuem Versuch, Web Components zu launchen.

Diese neuen Web Components sollen in erster Linie ein definiertes Set von Use Cases bedienen. Dazu sagen Leithead und Eicholz:

In theory, web components allow developers to prototype new kinds of HTML elements with the same fidelity and characteristics as native elements.

Nötig ist dafür ein umfangreiches Core-Set an Technologien. Die erste Generation der Web-Components-Technologien umfasst zum Beispiel:

Custom Elements und das is-Attribut
Shadow DOM
das Template Element
HTML Imports
Custom Properties

In Zukunft sollen sie durch weitere Features ergänzt werden, um die aktuell bestehenden Lücken in dieser ersten Web-Components-Generation zu füllen. Dazu gehören zum Beispiel die Implementierung eines Declarative Shadow DOM, vollständig isolierte Komponenten, Unified Native Control Styling, CSS Parts Styling oder Parser-Customization.

Microsoft Edge und Web Components

Web Components bringen viele Vorteile mit sich – insbesondere, was die Vereinfachung von Large-Scale-Webentwicklung angeht. Allerdings gestaltet sich die Implementierung des Standards nicht unbedingt einfach und es gibt nach wie vor viele Baustellen, um die man sich kümmern muss. Trotzdem sieht man beim Microsoft-Team die derzeitige Entwicklung positiv – und will sich nun daran machen, Web Components auch in den eigenen Browser zu implementieren.

So arbeitet Microsoft nicht nur aktiv am Standardisierungsprozess mit, sondern investiert auch umfangreiche Engineering-Ressourcen in die Arbeit an Web Components und deren Implementierung. Dazu beigetragen hat etwa der vorgenommene EdgeHTML-Engine-Split und die Überarbeitung des DOM, die – wenn alles planmäßig läuft – demnächst abgeschlossen werden soll.

Auch der nächste Schritt ist bereits geplant, nämlich das Hinzufügen von HTML-Template-Element-Support in Edge. Dafür wurde bereits mit der Arbeit begonnen; anschließend sollen auch die anderen Core-Technologien wie Shadow-DOM und Custom Elements ihren Weg in den neuen Microsoft Browser finden. Bis es soweit ist, wird es zwar noch ein wenig dauern, aber so sagen Leithead und Eicholz: