Was sind Micro Frontends

Der Begriff Micro Frontends tauchte erstmals Ende 2016 in ThoughtWorks Technology Radar auf. Er erweitert die Konzepte von Micro Services auf die Frontend-Welt. Der aktuelle Trend geht dahin, eine funktionsreiche und leistungsstarke Browseranwendung, auch Single-Page-App genannt, zu entwickeln, die auf einer Microservice-Architektur aufbaut. Im Laufe der Zeit wächst die Frontend-Schicht, die oft von einem separaten Team entwickelt wird, und wird schwieriger zu warten. Das nennen wir einen Frontend-Monolithen.

Die Idee hinter Micro Frontends ist es, eine Website oder Web-App als eine Zusammenstellung von Funktionen zu betrachten, die unabhängigen Teams gehören. Jedes Team hat einen bestimmten Geschäftsbereich oder eine Mission, um die es sich kümmert und auf die es spezialisiert ist. Ein Team ist funktionsübergreifend und entwickelt seine Funktionen End-to-End, von der Datenbank bis zur Benutzeroberfläche.

Diese Idee ist jedoch nicht neu. Es hat viel mit dem Konzept der in sich geschlossenen Systeme gemeinsam. Früher hießen solche Ansätze Frontend Integration for Verticalised Systems. Aber Micro Frontends ist eindeutig ein freundlicherer und weniger sperriger Begriff.

Was ist eine moderne Web-App? Um dies in eine breitere Perspektive zu rücken, hat Aral Balkan einen Blogbeitrag über das geschrieben, was er das Documents-to-Applications Continuum nennt. Er entwickelt das Konzept einer gleitenden Skala, bei der sich eine Website, die aus statischen Dokumenten aufgebaut und über Links verbunden ist, am linken Ende befindet und eine rein verhaltensgesteuerte, inhaltslose Anwendung wie ein Online-Bildbearbeitungsprogramm am rechten Ende.

Wenn Sie Ihr Projekt auf der linken Seite dieses Spektrums positionieren würden, bietet sich eine Integration auf Webserver-Ebene an. Bei diesem Modell sammelt und verkettet ein Server HTML-Strings aus allen Komponenten, aus denen die vom Benutzer angeforderte Seite besteht. Updates werden durchgeführt, indem die Seite vom Server neu geladen oder Teile davon per Ajax ersetzt werden. Gustaf Nilsson Kotte hat zu diesem Thema einen umfassenden Artikel verfasst.

Wenn Ihre Benutzeroberfläche auch bei unzuverlässigen Verbindungen sofortiges Feedback liefern muss, reicht eine rein vom Server gerenderte Seite nicht mehr aus. Um Techniken wie Optimistic UI oder Skeleton Screens zu implementieren, müssen Sie auch in der Lage sein, Ihre UI auf dem Gerät selbst zu aktualisieren. Der Begriff Progressive Web Apps von Google beschreibt treffend den Balanceakt, ein guter Bürger des Webs zu sein (progressive Verbesserung) und gleichzeitig eine App-ähnliche Leistung zu bieten. Diese Art von Anwendung ist irgendwo in der Mitte des Website-App-Kontinuums angesiedelt. Hier reicht eine rein serverbasierte Lösung nicht mehr aus. Wir müssen die Integration in den Browser verschieben, und das ist der Schwerpunkt dieses Artikels.

Kernideen hinter Micro Frontends

Seien Sie Technologie-Agnostiker: Jedes Team sollte in der Lage sein, seinen Stack auszuwählen und zu verbessern, ohne sich mit anderen Teams abstimmen zu müssen. Benutzerdefinierte Elemente sind eine großartige Möglichkeit, Implementierungsdetails zu verbergen und gleichzeitig eine neutrale Schnittstelle für andere bereitzustellen.

Teamcode isolieren: Teilen Sie keine Laufzeitumgebung, selbst wenn alle Teams das gleiche Framework verwenden. Erstellen Sie unabhängige Apps, die in sich geschlossen sind. Verlassen Sie sich nicht auf gemeinsame Status- oder globale Variablen.

Richten Sie Teampräfixe ein: Vereinbaren Sie Namenskonventionen, wo eine Isolierung noch nicht möglich ist. Namensraum-CSS, Ereignisse, lokaler Speicher und Cookies, um Kollisionen zu vermeiden und die Eigentümerschaft zu klären. Bevorzugen Sie native Browserfunktionen gegenüber benutzerdefinierten APIs Verwenden Sie Browserereignisse für die Kommunikation, anstatt ein globales PubSub-System aufzubauen. Wenn Sie wirklich eine teamübergreifende API erstellen müssen, versuchen Sie, sie so einfach wie möglich zu halten.

Erstellen Sie eine widerstandsfähige Site: Ihre Funktion sollte nützlich sein, auch wenn JavaScript fehlgeschlagen ist oder noch nicht ausgeführt wurde. Verwenden Sie Universal Rendering und Progressive Enhancement, um die wahrgenommene Leistung zu verbessern.