© Matej Kotula/Shutterstock.com
JavaScript Kompendium
Flexible Clientarchitekturen mit Web Components und Micro Apps

Angular, Vue.js und Co. friedlich vereint?

Wir haben mittlerweile Milchprodukte, die länger halten als so manches JavaScript-Framework. Diese Aussage ist natürlich nicht ganz ernst gemeint, aber wie so oft bewahrheitet sich, dass in jedem Scherz auch ein Körnchen Wahrheit steckt. Es ist nämlich tatsächlich so, dass die Release- und Innovationszyklen im Webumfeld so kurz wie noch nie sind.

Manfred Steyer


Auf der einen Seite ist das natürlich schön, weil es zeigt, dass wir ständig dazulernen. Teams, die große Unternehmensanwendungen bauen, stellt das jedoch zunehmend vor Herausforderungen. Solche Anwendungen müssen zehn bis zwanzig Jahre lang erweitert und gewartet werden. Gleichzeitig möchte man gerade in dieser schnelllebigen Welt nicht zwei Dekaden lang mit den Architektur- und Technologieentscheidungen von heute leben müssen – selbst wenn sie noch so sorgfältig getroffen werden.Micro Apps als Lösung?Wenn man sich in so einer Sackgasse wiederfindet, kann es auch gut sein, dass man das falsche Ziel vor Augen hat. Vielleicht ist es gar nicht das Ziel, riesengroße Unternehmensanwendungen zu entwickeln. Vielleicht sollte man stattdessen mehrere kleine Anwendungen schaffen. Das erlaubt das Skalieren auf mehrere Teams, die eine jeweils passende Architektur und einen zeitgemäßen Technologiestack einsetzen.Genau diese Idee verfolgen Microservice-basierte Architekturen. Überträgt man das auf die UI-Schicht, spricht man von Micro Frontends oder Micro Apps. Wie schon in einer der letzten Ausgaben berichtet, bieten sich Web Components zur Realisierung dieses Ansatzes an. Diese frameworkunabhängigen Komponenten lassen sich sehr einfach dynamisch in eine Shellanwendung laden. Außerdem basieren sie auf aktuellen Webstandards, die sich dank Polyfills auch in Evergreenbrowsern wie IE 11 nutzen lassen (Kasten: „Polyfills“). Polyfills Damit Web Components auch in Evergreenbrowsern wie IE 11 laufen, ist ein Polyfill einzubinden. Die hier gezeigte Lösung nutzt das Paket @webcomponents/custom-elements, das sich per npm installieren lässt. Es beinhaltet die folgende Datei, welche die benötigte Browserunterstützung nachrüstet: @webcomponents/custom-elements/custom-elements.min. Alternativ dazu findet sich in diesem Paket auch ein Loader, der gezielt nur jene Polyfills nachlädt, die für den jeweiligen Browser benötigt werden. Da Custom Elements für ECMAScript 2015+ definiert sind, heutzutage jedoch in der Regel noch das alte ECMAScript 5 als Kompilierungsziel dient, benötigen auch Browser, die Custom Elements unterstützen, ein Polyfill. Ein solches befindet sich im genannten Paket in der Datei @ webcomponents/custom-elements/src/native-shim.js. Die gezeigte Lösung bindet das eine Polyfill über die Datei angular.json ein und das andere über die Datei polyfills.ts. Dadurch wird gewährleistet, dass beide Polyfills in unterschiedlichen Bundles landen. Das ist ...

JavaScript Kompendium
Flexible Clientarchitekturen mit Web Components und Micro Apps

Angular, Vue.js und Co. friedlich vereint?

Wir haben mittlerweile Milchprodukte, die länger halten als so manches JavaScript-Framework. Diese Aussage ist natürlich nicht ganz ernst gemeint, aber wie so oft bewahrheitet sich, dass in jedem Scherz auch ein Körnchen Wahrheit steckt. Es ist nämlich tatsächlich so, dass die Release- und Innovationszyklen im Webumfeld so kurz wie noch nie sind.

Manfred Steyer


Auf der einen Seite ist das natürlich schön, weil es zeigt, dass wir ständig dazulernen. Teams, die große Unternehmensanwendungen bauen, stellt das jedoch zunehmend vor Herausforderungen. Solche Anwendungen müssen zehn bis zwanzig Jahre lang erweitert und gewartet werden. Gleichzeitig möchte man gerade in dieser schnelllebigen Welt nicht zwei Dekaden lang mit den Architektur- und Technologieentscheidungen von heute leben müssen – selbst wenn sie noch so sorgfältig getroffen werden.Micro Apps als Lösung?Wenn man sich in so einer Sackgasse wiederfindet, kann es auch gut sein, dass man das falsche Ziel vor Augen hat. Vielleicht ist es gar nicht das Ziel, riesengroße Unternehmensanwendungen zu entwickeln. Vielleicht sollte man stattdessen mehrere kleine Anwendungen schaffen. Das erlaubt das Skalieren auf mehrere Teams, die eine jeweils passende Architektur und einen zeitgemäßen Technologiestack einsetzen.Genau diese Idee verfolgen Microservice-basierte Architekturen. Überträgt man das auf die UI-Schicht, spricht man von Micro Frontends oder Micro Apps. Wie schon in einer der letzten Ausgaben berichtet, bieten sich Web Components zur Realisierung dieses Ansatzes an. Diese frameworkunabhängigen Komponenten lassen sich sehr einfach dynamisch in eine Shellanwendung laden. Außerdem basieren sie auf aktuellen Webstandards, die sich dank Polyfills auch in Evergreenbrowsern wie IE 11 nutzen lassen (Kasten: „Polyfills“). Polyfills Damit Web Components auch in Evergreenbrowsern wie IE 11 laufen, ist ein Polyfill einzubinden. Die hier gezeigte Lösung nutzt das Paket @webcomponents/custom-elements, das sich per npm installieren lässt. Es beinhaltet die folgende Datei, welche die benötigte Browserunterstützung nachrüstet: @webcomponents/custom-elements/custom-elements.min. Alternativ dazu findet sich in diesem Paket auch ein Loader, der gezielt nur jene Polyfills nachlädt, die für den jeweiligen Browser benötigt werden. Da Custom Elements für ECMAScript 2015+ definiert sind, heutzutage jedoch in der Regel noch das alte ECMAScript 5 als Kompilierungsziel dient, benötigen auch Browser, die Custom Elements unterstützen, ein Polyfill. Ein solches befindet sich im genannten Paket in der Datei @ webcomponents/custom-elements/src/native-shim.js. Die gezeigte Lösung bindet das eine Polyfill über die Datei angular.json ein und das andere über die Datei polyfills.ts. Dadurch wird gewährleistet, dass beide Polyfills in unterschiedlichen Bundles landen. Das ist ...

Neugierig geworden?


   
Loading...

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