Die Idee hinter Mikrofront-Enden besteht darin, die monolithische Client-Seite eines Webprojekts in kleinere Teile zu zerlegen, die einfacher zu verwalten sind. Bei diesem Ansatz hat jedes am Projekt beteiligte Team seinen eigenen Arbeitsbereich, die Teams sind nur für ein bestimmtes Fragment des Projekts verantwortlich und sind völlig unabhängig an seiner Entwicklung beteiligt. Daher arbeitet jedes Team unabhängig von den anderen mit seiner eigenen Codebasis, veröffentlicht neue Versionen seines Subsystems und verbessert es kontinuierlich schrittweise. Die Integration dieses Subsystems in andere Fragmente der Anwendung, an denen andere Teams arbeiten, erfolgt über die API. Bei diesem Arbeitsschema werden die Schnittstellenteile der Projekte aus unabhängigen Fragmenten zusammengesetzt, die zusammenarbeiten.
Dan Abramov, im Mai letzten Jahres , schriebauf seinem Twitter, dass er Mikrofronts nicht versteht. Er glaubt, dass die Probleme, die sie lösen sollten, bereits mit guten Komponentenmodellen gelöst wurden. „Vielleicht sind Mikrofronts eine Lösung für organisatorische Probleme, nicht für technische? Zum Beispiel, wenn sich zwei Entwicklungsteams auf nichts einigen können, einschließlich der Infrastruktur des Projekts “, überlegt er.
Es gibt viele Ansätze für die Mikrofront-End-Entwicklung: von der intelligenten Integration von Komponenten während der Projekterstellung bis zur Organisation verschiedener Teile einer Anwendung, um während der Codeausführung mithilfe spezifischer Routing-Ansätze zusammenzuarbeiten. In diesem Artikel habe ich die bemerkenswertesten Tools für die Entwicklung von Mikrofront-End zusammengestellt.
1. Bit-Plattform
Mit der Bit-Plattform können Sie Frontends aus unabhängigen Komponenten zusammenstellen. Es hilft Ihnen beim Entwerfen und Verwalten von Komponenten. Dies ist wahrscheinlich die beliebteste Lösung auf meiner Liste und am besten für die Produktionsentwicklung vorbereitet.
Wenn Sie sich die Homepage von bit.dev ansehen , werden Sie feststellen, dass sie aus unabhängigen Komponenten zusammengesetzt ist. Diese Komponenten werden von verschiedenen Teams erstellt und haben unterschiedliche Codebasen hinter diesen Komponenten. Sie sind jedoch alle miteinander integriert, sodass Sie letztendlich eine ganzheitliche Projektschnittstelle bilden können.
Homepage bit.dev erstellt mit den Komponenten, die Arbeit, die mit Hilfe des Bit
Command Line Tool Bit organisiert wird - einer beliebten Software, die zum Entwickeln basierend auf den Komponenten verwendet wird. Mit Bit können Sie Komponenten erstellen und daraus Schnittstellen zusammenstellen.
Unter Mikro-Frontend wird normalerweise das Zusammenstellen der Schnittstelle während der Ausführung des Projektcodes verstanden. Die Bit-Plattform soll während der Projekterstellung ein Frontend bilden. Dies bietet denjenigen, die diese Plattform nutzen, sowohl die nützlichen Funktionen „traditioneller Monolithen“ in Form von Sicherheit und Zuverlässigkeit als auch die Vorteile von Mikrofront-End-Lösungen - Einfachheit und Skalierbarkeit von Lösungen.
Mit Bit können verschiedene Teams unabhängig voneinander ihre eigenen Komponenten erstellen und veröffentlichen und mit anderen Teams auf der Ebene der Komponenten-API interagieren. Auf diese Weise können Sie die Webentwicklung in einen Prozess zum Erstellen von Projekten aus separaten Modulen verwandeln.
Zusätzlich zu den Tools für die komponentenbasierte Entwicklung bietet das Bit-Projekt eine Cloud-basierte Plattform für Entwickler. Mit der Plattform können Sie an Komponenten zusammenarbeiten, den Entwicklungsprozess effektiv verwalten und skalieren. Gleichzeitig bleiben die Teams, die an ihren eigenen Teilen eines bestimmten Projekts arbeiten, völlig unabhängig.
Bit bietet einen einzigartigen CI / CD-Prozess, der vollständig auf Komponenten basiert und darauf abzielt, die schnelle Montage von Projekten zu organisieren. Dies bedeutet, dass verschiedene Teams ohne Angst vor negativen Konsequenzen für das Projekt Änderungen an den Teilen der Projekte vornehmen können, die sie entwickeln. Sie müssen nicht auf andere Teams warten oder um Änderungen in der Hauptniederlassung des Projekts konkurrieren. Entwickler können kontinuierlich und sicher Änderungen an ihren Komponenten vornehmen, ohne befürchten zu müssen, dass Teile von Projekten, die nicht von ihnen belegt werden, durcheinander geraten. Diese Änderungen gelten für alle Anwendungen, die diese Komponenten verwenden.
Ein kontinuierliches Integrationssystem, das auf Komponenten basiert, ist 50-mal schneller als ein herkömmliches.
Infolgedessen wird der Entwicklungsprozess mit den folgenden Funktionen erweitert:
- Eine einfache Codebasis mit voneinander unabhängigen Teilen.
- Autonome Teams.
- Kompakte, gut definierte APIs.
- Unabhängige Prozesse zur Freigabe fertiger Bauteile.
- Möglichkeit einer kontinuierlichen schrittweisen Verbesserung der Komponenten.
Hier ist ein Beispiel für eine ähnliche Organisation der Arbeit an Projekten.
Wenn Ihr Team in der komponentenbasierten Entwicklung nach einer Lösung sucht, die die Mikrofront-End-Technologie nutzt und einen modularen Ansatz für die Arbeit an großen Anwendungen verfolgt, empfehle ich einen Blick auf die Bit- Plattform . Es ist durchaus möglich, dass dies genau das ist, was Sie brauchen.
2.Webpack 5 und Module Federation Architecture
Die JavaScript Architecture Module Federation (MF) wurde von Zach Jackson vorgeschlagen. Er initiierte auch die Erstellung eines Webpack-Plugins zur Implementierung dieser Architektur. Dank der Bemühungen des Webpack-Teams erschien dieses Plugin in Webpack 5 und befindet sich jetzt in der Beta.
Die Idee hinter MF ist, dass mehrere separate Baugruppen eine einzige Anwendung bilden sollten. Diese separaten Assemblys sollten keine Abhängigkeiten voneinander aufweisen, sodass Sie sie einzeln entwickeln und bereitstellen können. Dies ist ein Mikrofront-Schema.
Durch die Verwendung von MF kann eine JavaScript-Anwendung zur Laufzeit dynamisch Code aus anderen Anwendungen importieren. Das Modul erstellt eine Datei, die seine Funktionen exportiert. Dies ist der Einstiegspunkt in den Code, der von anderen Anwendungen geladen werden kann. Dies erfolgt durch entsprechende Konfiguration des Webpacks.
Dieser Ansatz löst unter anderem das Problem der Code-Abhängigkeiten und das Problem der wachsenden Bundle-Größe, indem die gemeinsame Nutzung von Abhängigkeiten organisiert wird. Wenn Sie beispielsweise eine React-Komponente laden, importiert eine Anwendung, die React bereits importiert hat, den Bibliothekscode nicht erneut. Das System verwendet den bereits importierten Reaktionscode und importiert nur den Komponentencode. Schließlich können Sie React.lazy und React.suspense verwenden, um einen Fallback bereitzustellen, falls der importierte Code aus irgendeinem Grund fehlschlägt. Auf diese Weise wird die korrekte Benutzererfahrung sichergestellt, auch wenn die Assembly, von der das Projekt abhängt, nicht funktioniert.
Die Module Federation-Architektur eröffnet sehr interessante Möglichkeiten für die Entwicklung von Mikrofront-Ends. Details zu dieser Architektur und ein Beispiel für ihre Verwendung finden Sie hier .
3. Single-Spa-Projekt
Die Entwickler des Single-Spa- Projekts definieren es als "JavaScript-Framework für die Verwendung von Microservices in der Front-End-Entwicklung". Wenn wir kurz sein Wesen beschreiben, können wir sagen, dass es die Idee des Lebenszyklus einer Entität implementiert, wie sie auf jede einzelne Anwendung angewendet wird, aus der das Projekt besteht. Jede Anwendung kann auf Routing-Ereignisse reagieren und muss wissen, wie sie bereitgestellt, im DOM bereitgestellt und vom DOM abgehängt wird. Der Hauptunterschied zwischen regulären SPA (Single Page Application) und dem, was Sie bei der Verwendung eines Single-Spa erhalten, besteht darin, dass Single-Spa-Anwendungen mit anderen Anwendungen koexistieren müssen, die Teil eines Projekts sind. Diese Anwendungen haben jedoch keine eigenen HTML-Seiten.
Als Ergebnis stellt sich heraus, dass Sie sich Single-Spa ansehen sollten, wenn Sie verschiedene Frameworks oder Bibliotheken auf derselben Seite verwenden müssen, die während der Ausführung des Projektcodes miteinander integriert werden müssen. Hier ist ein Video mit grundlegenden Informationen zum Projekt. Einige Beispiele finden Sie hier .
4. SystemJS-Modullader
Der SystemJS-Modullader ist kein Framework für die Entwicklung von Mikrofront-Ends. Dieses Projekt löst jedoch das Problem der browserübergreifenden Verwaltung unabhängiger Module, das der Schlüssel zur Implementierung von Mikrofront-End-Architekturen ist (dieser Ansatz wird auch in Single-Spa verwendet).
SystemJS kann als JS-Modul-Orchestrator betrachtet werden. Sie können verschiedene Funktionen solcher Module verwenden, z. B. dynamische Importe und Importkarten, ohne sich auf Standardbrowsermechanismen verlassen zu müssen. Und das alles - mit einem Leistungsniveau, das dem der integrierten Funktionen von Browsern nahe kommt. Unter den interessanten Funktionen von SystemJS können wir das Vorhandensein von Polyfills für veraltete Browser feststellen, indem Module mithilfe von Namen importiert werden (indem Modulnamen und Pfade mit ihnen abgeglichen werden) und mehrere Module mit einer Anforderung geladen werden (mithilfe der API werden mehrere Module als einzelne Datei dargestellt).
Mit SystemJS können Sie auch mit einer "Modulregistrierung" arbeiten, sodass der Entwickler wissen kann, welche Module zu einem bestimmten Zeitpunkt im Browser verfügbar sind. Hier Erste Schritte mit dem SystemJS-Tutorial.
5. Piraler Rahmen
Das Piral- Framework soll die Entwicklung von Portalanwendungen mithilfe von Mikrofront-End-Technologien erleichtern. Mit Piral können Sie modulare Front-End-Anwendungen erstellen, die zur Laufzeit mithilfe einer Mikrofront-End-Architektur und mithilfe unabhängiger Module namens pilet erweitert werden können. Die Tickets können unabhängig von anderen Teilen des Systems entwickelt werden, einschließlich des Codes und anderer erforderlicher Ressourcen. Hier ist ein Video, das zeigt, wie man mit Piral arbeitet.
Wenn Sie Piral verwenden möchten, benötigen Sie lediglich einen Code-Editor, ein Terminal, einen Browser und Node.js. Die Piral-Instanz (Application Wrapper) und Piles (Module) können im Emulator auf dem lokalen Entwicklungscomputer ausgeführt und debuggt werden.
Mit Piral arbeiten
6. Öffnen Sie das Komponentenprojekt
Das Open Components- Projekt zielt darauf ab, "serverlose Technologie in die Front-End-Welt zu bringen". Genauer gesagt wurde dieses Projekt als Framework für die Entwicklung von Mikrofront-End erstellt, das dem Entwickler alles bietet, was er benötigt, und ein Ökosystem schafft, das Tools für die Arbeit mit Komponenten, eine Komponentenregistrierung, Vorlagen und sogar ein Befehlszeilentool enthält. Das Open Components-Projekt besteht aus zwei Teilen:
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
Das Qiankun- Projekt wird als "eine Mikrofront-End- Implementierung beschrieben, die auf einem Single-Spa basiert , aber für die Produktion bereit ist". Dieses Projekt zielt darauf ab, einige der grundlegenden Probleme zu lösen, die mit dem Zusammenstellen großer Anwendungen aus kleinen Subsystemen (Subanwendungen) verbunden sind. Diese Aufgaben umfassen das Veröffentlichen statischer Ressourcen, das Kombinieren von Subsystemen, das Sicherstellen der Unabhängigkeit von Subsystemen voneinander während ihrer Entwicklung und Bereitstellung, das Sicherstellen der Subsystemisolation während der Codeausführung, das Behandeln von Abhängigkeiten und das Sicherstellen einer hohen Leistung von Lösungen.
Qiankun-Projekt
8. Luigi-Rahmen
Luigi ist ein geschäftsorientiertes JavaScript-Framework für die Mikrofront-End-Entwicklung, mit dem Sie Benutzeroberflächen erstellen können, die lokale und externe Komponenten verwenden. Luigi ist ein Framework für die Entwicklung von Webanwendungen, das unabhängig von bestimmten Frameworks und Bibliotheken ist. Dieses Framework bietet dem Entwickler die Möglichkeit, sicherzustellen, dass die einzelnen Teile, aus denen die Anwendung besteht, zusammenarbeiten.
Luigi
Das Luigi- Framework besteht aus zwei Subsystemen. Dies ist die Hauptanwendungs- und Clientbibliothek. Die Interaktion zwischen ihnen basiert auf der postMessage-API.
Hier ist ein Sandkasten, in dem Sie mit Luigi experimentieren können. Und hier ist das Projekt-Repository. SAP arbeitet übrigens daran.
9. FrintJS-Framework
FrintJS ist ein "modulares JavaScript-Framework zur Entwicklung skalierbarer reaktiver Anwendungen". Sie können damit Anwendungen laden, die von verschiedenen Bundlern kompiliert wurden, Anwendungen strukturieren und Mechanismen wie Routing und Abhängigkeitsbehandlung ordnungsgemäß ausführen. Dieses Framework unterstützt zusätzlich zu React (die Arbeit mit dieser Bibliothek ist gut dokumentiert und getestet) durch zusätzliche Pakete React Native und Vue.
FrintJS
→ Hier ist die interaktive FrintJS- Sandbox
10. Mosaik 9
Mosaic ist eine Reihe von Diensten und Bibliotheken, die durch Spezifikationen vereint sind, die definieren, wie Komponenten beim Organisieren großer Websites, die mithilfe einer Microservice-Architektur erstellt wurden, interagieren. Mosaic verwendet sogenannte „Fragmente“, die von separaten Diensten verwaltet und zur Laufzeit in der in der Vorlage angegebenen Reihenfolge kombiniert werden.
Mosaikarchitektur Das Mosaikprojekt
wird durch eine Vielzahl von Paketen dargestellt, die auf die Lösung verschiedener Probleme abzielen. Dazu gehören Routing, Erstellung von Seitenlayouts, Speicherung von Vorlagen, Präsentation von Schnittstellen.
11. Framework PuzzleJS
PuzzleJS ist ein "Mikrofront-End-Framework für die Entwicklung skalierbarer und schneller Websites". Sie können damit Projekte erstellen, die als "Gateways" und "Interfaces" (Storefront) bezeichnet werden und miteinander kommunizieren. Die Entwickler von PuzzleJS ließen sich in Bezug auf die Mikrofront-End-Architektur vom Facebook BigPipe- Projekt inspirieren .
PuzzleJS Mit
PuzzleJS können Sie unabhängige "Portale" und "Schnittstellen" erstellen, indem Sie deren Interaktion mithilfe einer Konfigurationsdatei anpassen. Sie können HTML-Vorlagen zur Kompilierungszeit in JavaScript-Funktionen konvertieren. Diese Operation ist unabhängig von Datenladeanforderungen. Infolgedessen beginnt die Funktion als Antwort auf eine Anfrage sehr schnell, Daten zu übertragen, was einen solchen Leistungsindikator für Webseiten wie die Zeit bis zum ersten Byte verbessert. Dieses Framework ist aufgrund der Verwendung des serverseitigen Renderns von Materialien in Bezug auf SEO gut. Wenn die für den Betrieb eines bestimmten Fragmentes der Seite erforderliche API nicht mehr auf Anforderungen reagiert, wird die Arbeit anderer Fragmente nicht gestört. Hier ist ein Beispiel aus der Praxis für die Verwendung von PuzzleJS.
Ergebnis
Andere Frameworks, die für die Mikrofront-End-Entwicklung verwendet werden können, umfassen Podium .
Wie Sie sehen, haben Sie definitiv eine große Auswahl, wenn Sie sich entscheiden, ein Projekt auf der Basis einer Mikrofront-End-Architektur zu erstellen.
Wie denkst du über Mikrofronts?
