SIGS DATACOM Fachinformationen für IT-Professionals

SOFTWARE MEETS BUSINESS:
Die Konferenz für Software-Architektur
03. - 07. Februar 2020, München

Sessionsdetails

Vortrag: Do 2.1
Datum: Do, 06.02.2020
Uhrzeit: 09:00 - 10:30
cart

Micro-Frontends auf Basis von Webcomponents entwickeln

Uhrzeit: 09:00 - 09:45
Vortrag: Do 2.1 1)

 

Micro-Frontends setzen die Unix-Philosophie "Mache nur eine Sache und mache sie gut!", die bereits hinter Microservices steckt, auch im Frontend um. Dadurch entstehen kleinere, fachlich, technologisch und architekturell unabhängige sowie abgeschlossene Softwarekomponenten. Sie lassen sich unabhängig voneinander entwickeln, ausrollen und zur Laufzeit kompositionieren. Die ideale technische Basis dafür stellen Webcomponents dar.

Zielpublikum: Architekten, Entwickler
Voraussetzungen: Kenntnisse in Webtechnologien, HTML, JavaScript, CSS und Architektur
Schwierigkeitsgrad: Fortgeschritten

Extended Abstract
Micro-Frontends unterliegen verschiedenen Interpretationen und eine einheitliche Definition fehlt. Die Motivation für Micro-Frontends sehe ich einerseits darin, Teile größerer Anwendungen parallel entwickeln zu können, ohne stets von einem dedizierten Frontend-Team für die Integration abhängig zu sein. Andererseits in der Notwendigkeit, insbesondere die im Webumfeld schnell veraltenden Technologie und wechselnden Präferenzen kompensieren zu können.
Deshalb ist es mir wichtig, einen Weg zu zeigen, wie sich Micro-Frontends rein mit standardisierter Technologie umsetzen lassen. Zum Einsatz kommen etwa Webcomponents, CSS Custom Properties, Webworker und andere offizielle Standards, abgerundet mit erprobten Prinzipien und Architekturmustern. So können sich Entwickler von Ökosystemen wie React, Vue oder Angular grundsätzlich freikaufen, sich aber die Option freihalten, diese innerhalb der Micro-Frontends natürlich wiederum zu verbauen.

 

UI-Integration über Micro-Frontends mithilfe von WebComponents

Uhrzeit: 09:45 - 10:30
Vortrag: Do 2.1 2)

 

In dem Groß-Projekt FX bei EOS wird ein Kern-System auf Basis von ca. 50 Self-contained Systems neu gebaut. Jedes Self-contained System liefert Micro-Frontends für seine jeweiligen Services aus.
Dabei enthalten die Oberflächen jeweils Micro-Frontends aus mehreren Systemen, die browserseitig mithilfe von Custom Elements (Teil des WebComponents-Standards) integriert werden. Der Vortrag stellt die konkrete Lösung dar. Außerdem werden Lessons Learned besprochen.

Zielpublikum: Entwickler, Architekten
Voraussetzungen: JavaScript-Kenntnisse
Schwierigkeitsgrad: Fortgeschritten

Extended Abstract
Mit dem Projekt FX erstellt die Otto-Tochter EOS eine neue zentrale Anwendung für die Inkassobearbeitung. FX besteht aus (zurzeit) ca. 50 Self-contained Systems (SCS), die jeweils für eine bestimmte Fachlichkeit verantwortlich sind (z. B. Zahlungszuordnung, Buchhaltung, Ablaufsteuerung oder Datenanalyse).
Jedes Self-contained System hat eine unabhängige Datenhaltung (PostgreSQL, MongoDB, Elastic Search, ...) und liefert die für den Aufruf der eigenen Services benötigten Oberflächen (Micro-Frontends) selbst aus. Die Kommunikation innerhalb eines SCS, also vom Micro-Frontend zum Backend, findet über ein Rest-API statt. Die Kommunikation zwischen Self-contained Systems erfolgt ausschließlich asynchron über Kafka.
Im Projekt FX haben wir uns für WebComponents als Werkzeug zur Integration unserer Micro-Frontends entschieden. Dabei verwenden wir das WebComponents-API, um bestehende React-Components zu „wrappen“. Die einzelnen Self-contained Systems benutzen dann lediglich die WebComponent, ohne zu wissen, dass im Hintergrund React seine Dienste versieht. Dieser Ansatz bietet folgende Vorteile:

  • einfache Integration im Frontend,
  • schlankes API,
  • Web-Standard,
  • Abhängigkeit zum verwendeten Framework (hier React) bleibt auf das einzelne Micro-Frontend beschränkt.

In dem Vortrag wollen wir unsere gewählte Lösung an einem Beispiel im Detail beschreiben und erläutern, welche guten und welche schlechten Erfahrungen wir gemacht haben.