Microfrontends einfach erklärt

Von Patrick Arnold , 17.02.2020, 10:44
Microfrontends

Ziel dieses Blogposts soll es sein, das Konzept von Microfrontends in einfachen Worten zu erklären und aufzeigen, wie man diese benutzen kann.

Header Body Footer

Was sind Microfrontends?

Grob gesagt, teilen Microfrontends eine komplexe Webanwendung in kleinere, spezifischere Projekte auf und fügen sie am Ende wieder zu einer vollständigen Seite zusammen. Eine Möglichkeit für das Zusammenführen wäre zum Beispiel Iframes.

Iframes sind nicht die einzige Lösung, dies zu tun. Wir werden unterschiedliche Frameworks/Methoden in diesem Blogartikel beschreiben. Zuerst sollten wir uns jedoch die Frage stellen, warum Microfrontends überhaupt momentan bei Firmen so beliebt sind.

Warum Firmen auf Microfrontends setzen?
 

Microfrontends

 

 

 

 

 

Es ist einfacher, 10 Projekte mit je 10 Personen zu verwalten als ein großes Projekt mit 100 Personen. Das Schlüsselkonzept ist hier die Skalierbarkeit. Durch das Aufbrechen großer Projekte erhalten wir:

  • Separierte Repositories
  • Unabhängige Deployments
  • Schnellere Builds & Releases
  • Autonome Teams
  • Einfachere Möglichkeiten für Debugging und Wartung

Domainspezifische Frontends – Ablösung von Monolithen
 

Domainspezfische Frontends

 

 

 

 

 

 

Stellen wir uns vor, wir haben eine Fahrzeugvermietung. Unser Webauftritt ist aktuell in einer monolithischen React-Applikation implementiert. Wir haben auf dieser Applikation eine große Menge an Entwicklern sitzen, da diese unser vollständiges Kerngeschäft abdeckt. Dennoch ist sie nur sehr schwer wartbar und die Implementierung von neuen Funktionalitäten dauert relativ lange, da alles voneinander abhängig ist. Daher entscheiden wir uns, die Applikation in ihre einzelnen Domains zu zerteilen:

  • Benutzerprofil
  • Fahrzeugkatalog
  • Vermietungskonfiguration
  • Payment

Für jede dieser Domains entwickeln wir nun ein eigenes Microfrontend und setzen ein autonomes Team dafür ein. Um den Kunden eine vollständige Anwendung zu bieten benötigen wir noch eine Komposition unserer vier Frontends auf einer Seite.

Sollten wir nun z.B. eine neue Zahlmethode einführen wollen, so müssen wir nur eine Veränderung in der Payment-UI vornehmen und können diese eigenständig entwickeln (da eigenes Team) und auch eigenständig releasen

Was sind die technischen Möglichkeiten?

Iframes

Der einfachste Weg, um zu beginnen. Wir können das window postMessage() zur Kommunikation zwischen den Anwendungen verwenden.

 

Single SPA

Es handelt sich um ein Framework zur Komposition von Microfrontends. Wenn man ein neues Projekt startet, so wäre folgendes Framework empfehlenswert: single-spa.js.org

 

Frint

Ein weiteres Framework, um Microfrontends auf einer Seite zu kompensieren. Flexibler als Single SPA, aber neuer und weniger beliebt: frint.js.org

 

Web Components

Bei Web Components handelt es sich nicht um ein Framework aber um eine Browserfunktion, welche auch von der W3C spezifiziert wurde. Zukünftig wird man diese Funktionalität sehr häufig beim Website-Implementierungen vorfinden: https://www.webcomponents.org/introduction

 

Tailor

Bei der Komponente Tailor handelt es sich um ein Backend, welches mit Hilfe von node.js die Komposition der unterschiedlichen Microfrontends durchführt. Weitere Informationen können unter folgendem Link abgerufen werden: https://github.com/zalando/tailor

Zusammenfassung

Microfrontends werden immer mehr zum Trend. Sie bringen Autonomie, Geschwindigkeit und lassen uns unsere Software in saubere Domains unterteilen. Potentiell steigt dadurch die Komplexität, da wir einen monolithischen Ansatz in ein verteiltes System umbauen - allerdings kann die Komplexität in einem monolithischen Ansatz je nach (direkten) Abhängigkeiten ebenfalls schon hoch bis nicht mehr handhabbar sein. Für die Komposition stehen uns unterschiedliche technische Möglichkeiten zur Verfügung. Der aktuell standardisierte und unabhängige Standard „Web Components“ scheint hier der zukunftsträchtigste zu sein.
Alles in allem ist zu sagen, dass die Vorteile welche uns Microfrontends bringen, den Nachteil der potentiell höheren Komplexität deutlich zu überwiegen scheinen und den Bau von Web-UIs in der Zukunft neu ausrichten werden.

Neuen Kommentar schreiben

Ich habe die Datenschutzhinweise zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden.