iframes – der heilige Gral bei verteilten Webanwendungen

Technische Ansätze zur Integration verteilter Benutzeroberflächen

Der einfachste Ansatz ist die Integration per Hyperlink. Über einen Link springt der Anwender von einem Microservice zu einem anderen. Der Vorteil liegt auf der Hand: Die technische Umsetzung ist denkbar einfach, da die Services auf diese Weise vollkommen isoliert voneinander laufen. Dadurch ist es möglich, sie technisch unabhängig voneinander zu entwickeln und bereitzustellen.

Der Nachteil: Die Anwendung ist keine Single-Page-Applikation (SPA) mehr. Der Absprung auf eine neue Seite über einen Link führt zu einem erneuten Ladevorgang und stellt einen Bruch im Benutzererlebnis dar. Außerdem ist es schwieriger, ein einheitliches Erscheinungsbild zu schaffen, da keine Möglichkeit besteht, die einzelnen Komponenten übergreifend von außen zu gestalten. Soll das Look & Feel über das Gesamtsystem hinweg gleichbleiben, erfordert das einen erhöhten Abstimmungsaufwand mit den anderen Teams. Außerdem gestaltet sich der Nachrichtenaustausch zwischen den Oberflächen aufwendig.

Ein alternativer Weg, sich dem Problem zu nähern, sind die sogenannten Web Components, die von allen neueren Browsern unterstützt werden. Sie basieren unter anderem auf der Custom-Elements-Technologie, die beim Entwickeln eigener HTML-Elemente unterstützt. Diese sind genauso wie native HTML-Elemente einzubinden und zu verwenden (beispielsweise <ui></ui>). Dadurch lassen sie sich bei der Integration einfach anpassen und stylen.

Microservices

Die Grundidee hinter Microservices ist nicht neu: Teile und herrsche. Was damals für die alten Römer funktionierte, klappt auch heute in der Softwarearchitektur. Ein System wird soweit zerlegt, dass sich die einzelnen Komponenten jeweils von einem eigenen Team entwickeln und auch unabhängig von den anderen deployen lassen. Dabei hat jede Komponente nur eine Aufgabe. Andernfalls entstehen schnell kleine Monolithen, die mit der Zeit wachsen und sich zum Wartungsmonster entwickeln. Unabhängige Deployments sind dann nicht mehr möglich, und Fehler können im schlimmsten Fall zum Ausfall des gesamten Systems führen.

Ihr größter Vorteil liegt darin, dass sie eine technologieunabhängige Entwicklung und einen einfachen Nachrichtenaustausch zwischen den Komponenten ermöglichen. Eine Voraussetzung der Web Components sind entsprechende Software-Artefakte ("auf Codeebene"). So sind sie für Systeme mit einer überschaubaren Anzahl an Entwicklerteams attraktiv, bei denen der Austausch von Artefakten über ein gemeinsames Repository einfach möglich ist. Mit steigender Anzahl an entwickelnden Teams, insbesondere im Enterprise-Umfeld, gestaltet sich die Nutzung eines gemeinsamen Repositorys allerdings zunehmend schwieriger.

Ein weiteres Beispiel ist das single-spa-Framework, das es ebenfalls erlaubt, die einzelnen GUI-Module technologieunabhängig zu entwickeln. Es wird als "Metaframework" geführt, das auf Basis einer Konfiguration einzelne Single-Page-Applikationen zu einer Gesamt-Applikation vereint. Auch hier besteht der Nachteil, dass die einzelnen Software-Artefakte vorliegen müssen. Außerdem entsteht so eine Abhängigkeit zu dem Framework selbst, die eigentlich auf der darunter liegenden Ebene vermieden werden soll. Zudem ist bei einem nachträglichen Umstieg auf das Framework zunächst eine Migration des bestehenden Codes durchzuführen.

Eine weitere Möglichkeit der Integration von Benutzeroberflächen bieten iframes (inline frame). Der Vorteil dabei ist deren starke Isolation, die ein getrenntes Deployment sowie Technologieunabhängigkeit gewährleistet. Iframes bewahren sich die Freiheit des Hyperlink-Ansatzes, übernehmen allerdings auch dessen Probleme im Zusammenhang mit einem einheitlichen Erscheinungsbild. Aufgrund der Isolation durch iframes liegt die Verantwortung für ein gleichmäßiges Erscheinungsbild vollumfänglich in den einzelnen Entwicklerteams.

Anders als bei den Web Components ist es hierbei nicht – oder mit viel Aufwand nur sehr rudimentär – möglich, übergeordnete Anpassungen am Styling der einzelnen Komponenten vorzunehmen. Dabei bieten iframes jedoch einen ganz entscheidenden Vorteil gegenüber den anderen Ansätzen: Sie ermöglichen eine vollwertige Single-Page-Applikation, ohne dass der Code oder die Software-Artefakte vorliegen müssen. Auf diese Weise lassen sich die GUI-Module unabhängig voneinander deployen, über einen Web-Link bereitstellen und in andere Web-Anwendungen integrieren.

Wie sich mit iframes aus verteilten UIs eine zusammenhängende Benutzeroberfläche erstellen lässt, ist in Abbildung 2 zu sehen. Die Shell fordert dabei die einzelnen Komponenten an und bündelt sie zu einem Frontend für den Anwender. Ist das Styling entsprechend abgestimmt, merken Benutzer nicht, dass sich die Oberfläche im Hintergrund aus mehreren Services zusammensetzt. Aufgrund der starken Entkopplung der einzelnen Module stellt sich gleichzeitig jedoch auch eine Herausforderung in dem Austausch von Zuständen.

Microservices liefern ihren Teil der Oberfläche selbst aus, eine Shell bündelt sie mithilfe von iframes zu einem Frontend für den Anwender (Abb. 2) (Bild: Volkswagen AG)