Karsten Sitterberg Selbstständig

„Mit Angular Elements soll die Lücke zu React und vergleichbaren Libraries geschlossen werden: Auch für die Umsetzung einzelner unabhängiger UI-Elemente soll sich Angular damit eignen und es Entwicklungsteams so ermöglichen, auf vorhandenes Wissen zurückzugreifen.“

Mit Angular Elements soll die Lücke zu React und vergleichbaren Libraries geschlossen werden: Auch für die Umsetzung einzelner unabhängiger UI-Elemente soll sich Angular damit eignen und es Entwicklungsteams so ermöglichen, auf vorhandenes Wissen zurückzugreifen.

Analog zu Microservices im Backend-Bereich werden in letzter Zeit auch im Frontend Maßnahmen getroffen, die eine stärkere Modularisierung zum Ziel haben. Auch das Angular-Framework bietet dem Entwickler verschiedene Möglichkeiten zur Modularisierung an. Eine dieser Optionen ist Angular Elements. Angular war bisher vor allem ein Framework, das den kompletten Frontend-Stack von Komponenten und Services bis Routing abgebildet hat. Damit positionierte sich Angular klar im Bereich von Frontends für große Enterprise-Anwendungen, während sich die von Facebook stammende React Library zunächst vor allem auf das Erstellen einer UI im Sinne von Komponenten fokussiert.

Stand heute lässt sich eine Angular-Anwendung intern durch das Angular-Modulsystem und die Angular-Komponenten strukturieren. Zwischen verschiedenen Anwendungen können ganze Angular-Module in Form von NPM Libraries wiederverwendet werden. Java-Entwicklern dürften diese Mechanismen vertraut sein: Das Java-9-Modulsystem, OSGi und Maven erfüllen ähnliche Zwecke.

Modularisierung mit Komponenten

Ein typischer Einsatzzweck von isolierten Komponenten ist die Wiederverwendung alleinstehender Komponenten von verschiedenen Teams innerhalb einer Organisation. Eine weitere gut denkbare Einsatzmöglichkeit ist die Einbettung von abgekapselter Frontend-Logik in klassischen CMS-Systemen als Widget oder Seitenelement. Klassischerweise sind Komponenten als unabhängige Widgets zu verstehen, die in beliebigen anderen Umgebungen, Projekten oder Frameworks verwendet werden können, bis hin zu statischen Webseiten. Damit lassen sich in ansonsten etwa mit Spring Boot und Thymeleaf serverseitig gerenderten Anwendungen komplexere oder grafisch anspruchsvolle UI-Komponenten ebenso umsetzen wie aus Modulen zusammengesetzte clientseitige Anwendungen (SPAs).

Abbildung 1 verdeutlicht das Konzept: Die blaue, mit Angular Elements umgesetzte Komponente bildet eine übergreifende Funktionalität ab. Das kann beispielsweise eine Navigation oder auch ein Kontaktformular sein. Diese Komponenten können unabhängig von Anwendungsstruktur und -framework in jede Anwendung eingebunden werden. Anwendungen, in der Grafik rot und grün, können von einem beliebigen Anwendungstyp sein. Sowohl serverseitig generierte Anwendungen als auch clientseitig gerenderte Anwendungen, zum Beispiel Vue.js- oder auch Angular-Anwendungen unterschiedlicher Angular-Versionen, kommen in Frage.

Abb. 1: Verwendung von Custom Components in verschiedenen Anwendungskontexten

Abb. 1: Verwendung von Custom Components in verschiedenen Anwendungskontexten

Der Nutzen von Komponenten zur Implementierung übergreifender Logik dürfte sich jedem erschließen, der schon einmal Elemente wie YouTube-Videos, Google Maps oder einen Facebook-Like-Button eingebunden hat: Typischerweise liegen sie als JavaScript Includes vor, die entweder über URL-Parameter oder globale JavaScript-Variablen konfiguriert werden. Neuere Browser unterstützen mit Web Components einen Standard, mit dem sich solche Komponenten eleganter umsetzen lassen. Ein wichtiger Bestandteil dieses Standards sind Custom Elements, selbst definierte HTML-Elemente, die durch Attribute konfigurierbar sind und somit eine intuitive API bereitstellen.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Java Magazin 11.18 - "Java & Kubernetes"

Alle Infos zum Heft
579860415Architektur mit Angular Elements
X
- Gib Deinen Standort ein -
- or -