4.8.2021 |

Notizen zum Webinar "Komponenten-orientierte Frontends"

Als Teil der Techlounge Summer Edition fand am 04.08.2021 das Webinar Komponenten-orientierte Frontends mit Golo Roden und David Losert statt.

Hier sind ein paar Notizen zum Webinar.

Micro-Services (Backend)

  • Skalierbarkeit
  • Flexibilität: autarke Teilbereiche
  • Modularisierung: vertikale Schnitte, jedes Modul repräsentiert ein Feature

Vorteile, die Micro-Services im Backend bieten, sind nicht 100% auf das Frontend übertragbar. Aber der Gedanke, fachlich zu schneiden und "in Features zu denken", ist anwendbar (konzeptionelle Vorgangsweise).

Micro-Frontends

Frontends, die versuchen, die einzelnen fachlichen Bereiche unabhängig voneinander zu gestalten.

Vertikalisierung als Stichwort bezeichnet den Übergang von der technologiebasierten Orientierung auf fachlichen Fokus.

Historisch gesehen wurde horizontal geschnitten (MVC-Architektur).

Das gesamte Team ist für ein Feature verantwortlich, dazu gehören alle Aspekte (auch der Betrieb/DevOps). Das Team hat die Autonomie über das gesamte Feature.

Komplexität entsteht in der Anbindung und Integration der verschiedenen Features. Zudem gibt es "cross-cutting concerns", also Aspekte, welche alle Teams und alle Features betreffen.

Integrationsmuster

Zur Laufzeit

iframes

Recht einfach umzusetzen, aber schwierig, diese konsistent einzubinden (z.B. Routing, styling).

URLs

Unterschiedliche, eigenständige Funktionalitäten werden in unterschiedlichen Seiten implementiert. Beispiel: AWS.

Scripte

Mit JavaScript-Skripten client-seitig arbeiten. Es muss alles in JavaScript gebundled sein. Drittanbieter-Features wie Google Analytics sind Beispiele für solche Skripte.

Zur Compile-time

Beispiel: es werden eigenständige React-Komponenten gebaut. Im Integrationsteam werden diese Komponenten zu Seiten gebaut. Es wird viel automatisiert.

Man muss sich auf ein gemeinsames Framework mit gleicher Version festlegen.

Beispiel eines Micro-Frontends

GitHub Repository

Backend-for-Frontend

Kompletter Durchstich vom Frontend bis zum Backend und der Datenbank.

API Gateway

Dient als Aggregator (Facade) vor dem Backend und verteilt Anfragen auf das Backend.

tl;dr Micro-Frontends

Es geht nicht um einen Technologie-Shift, sondern um einen Mindset-Shift. Es geht darum, fachlich an die Themen heranzugehen und alles, was damit zusammhängt (Teamzusammensetzung, Kommunikation, etc.).

Zur Übersicht
Sophia Brandt

Mehr vom Devsquad...

Sophia Brandt

Notizen zum Webinar "Angular-Performance: So zünden Sie den Turbo"

Jonathan Zbick

Bildschirm von Smartphones auf dem Macbook teilen

Hallo

Wir sind für Sie da und freuen uns auf Ihre Fragen oder Ihr Feedback.