07.04.2022 | Bruno
Wahrscheinlich haben die meisten den Begriff “Microfrontend” schon gehört, drängt er sich durch die populären Microservice-Architekturen doch fast von selbst auf. Im Gegensatz zum Begriff ist die konkrete Nutzung dieser unabhängigen Frontend-Module weit weniger populär. Dies hängt einerseits damit zusammen, dass die Browser-Unterstützung für die dazu notwendigen Custom Elements bis vor kurzem zu wenig gut war (und wir uns “iFrames” nicht antun würden). Andererseits denkt man an diese Architektur häufig nur bei der Planung neuer Applikationen, wo man dann wahrscheinlich im zusätzlichen Aufwand zu wenig Nutzen sieht.
Wenn es um Kosten / Nutzen geht sind Microfrontends in einem anderen Bereich aber sehr rasch die schnellste und rentabelste Lösung - nämlich dort, wo man sich technologisch im “falschen Film” bewegt, z.B. bei Legacy-Systemen oder Plattformen, welche für diesen Zweck keinen optimale Unterstützung bieten.
Diese Situation einer technisch nicht ausreichenden Plattform hatten wir bei unserer Produkte-Webseite von kesabi. Diese haben wir mit Wordpress erstellt zwecks einfachem und schnellem Editieren der Marketing-Texte während der Alpha-Phase. Leider ist der statische Ansatz von Wordpress nicht geeignet, um unseren Kunden das dynamische Preismodell vorzustellen (TL;DR der Eintrittspreis orientiert sich bei wiederkehrendem Besuch an einer Abo-Umsatz-Kurve, du brauchst “kes Abi” mehr). Hierzu haben wir einen Preis-Simulator angedacht, welcher grafisch den Preisverlauf bei entsprechender Eintrittsfrequenz darstellt.
In dieser Situation hatten wir folgende Möglichkeiten:
Suchen eines Plugins → u.U. grosser Zeitaufwand und kein ausreichendes Customizing
Umstellen der Basis-Technologie: hier z.B. next.js / nuxt.js für dynamische Webseiten mit Server-Side-Rendering.
Microfrontend: schnelle Umsetzung mit persönlicher “Weapon of Choice”, wiederverwendbar
Für ein Microfrontend mittels Javascript-Framework sind folgende Schritte notwendig:
Exportieren der Komponente als “Custom Element” (Erweiterte Klasse von HTMLElement)
Registrieren der Komponente als HTML-Tag (Webcomponent)
Bundling von Komponente, Framework, Styling und Bibliotheken zu einem Javascript-Modul
Die Umsetzung haben wir aus folgenden Gründen mit Vue / Vite gemacht:
Vite ist als Build- und Dev-Tool für diese Aufgabe hervorragend vorkonfiguriert
Super schnelle Aktualisierung von Code-Änderungen im Browser (Hot-Module-Replacement)
Super simple Konfiguration für das Erstellen von Javascript-Modulen
Vue als SPA-Framework hat ebenfalls grosse Vorteile:
Es setzt komplett auf dem W3C-Standard auf und hat dadurch einen extrem kleinen Fussabdruck (die Komponente soll ja nicht Megabyte-Gross werden)
Ähnlichkeiten zu Angular und React, wodurch sich Entwickler schnell zurecht finden (im Gegensatz z.B. Googles Lit-HTML für Webcomponents).
Das Resultat ist ein rund 330KB grosses Javascript-Modul, welches sich einfach in eine bestehende Webseite einbinden lässt.
<script type="module" src="./kesabi-estimator-0-1-7.umd.js"></script>
<kesabi-estimator data_src='<my-backend/data>' locale='de'></kesabi-estimator>
kesabi estimator, ca. 330KB inkl. Framework Vue.js und Library Charts.js
Die heute marktreife Möglichkeit von Microfrontends in Form von Webcomponents hat uns erlaubt, äusserst schnell und effizient unsere statische Webseite mit einer dynamischen Komponente anzureichern, welche sich direkt bei unserem Backend bedient und mit den aktuellsten Daten gefüttert wird. Die volle Komponente in Wordpress integriert ist hier zu sehen: Kesabi-Preismodell
Falls du mehr über Web-Technologien wissen willst oder Hilfe bei der Umsetzung brauchst, dann steht dir unser Solution Atelier gerne zur Verfügung. Oder du meldest dich an für ein Speedcoaching.