Tipps für eine moderne Webarchitektur

Die richtige Architektur für erfolgreiche Webanwendungen

Heute werden Webtechnologien für Softwareanwendungen aller Art eingesetzt. Worauf bei der Wahl der richtigen Architektur zu achten ist und welche Vorteile JAMstack bringt, schildert der Senior Software Engineer Ken Blum.

26.03.2019Text: tnt-graphics0 Kommentare

Softwareanwendungen werden immer häufiger in Form von Web-Apps realisiert, vom Online-Shop über intern genutzte Business-Anwendungen bis zur Maschinensteuerung. Für das Frontend und das Backend der webbasierten Lösungen gibt es die unterschiedlichsten Entwicklungs- und Laufzeitumgebungen. Sie stammen teils aus verschiedenen Epochen der Geschichte der Webentwicklung und funktionieren nach unterschiedlichen Architekturkonzepten. Die Wahl der passenden Technologien fällt nicht gerade leicht, vor allem wenn neben den rein technischen Aspekten weitere Faktoren wie das vorhandene Entwickler-Know-how und die Integration von Umsystemen hinzukommen.

Trennung von Backend und Frontend ist Trumpf

«Zuallererst muss die Architektur stimmen», hält Senior Software Engineer Ken Blum von bbv fest. Für den Webentwicklungs-Experten gehört zu einer korrekten Webapp-Architektur die saubere Trennung von Backend und Frontend: «Bei dieser Frage trennt sich bei den Technologien die Spreu vom Weizen.» Ein Beispiel für eine altgediente Technologie, die diesen Anforderungen nicht genügt, ist ASP.NET MVC: Dabei werden die Webseiten komplett auf dem Server generiert, wobei sie direkt aus der Datenbank in HTML umgewandelt werden. Diese starke Kopplung ist für Entwickler bequem – sie müssen sich nur mit einer Technologie und einer Entwicklungsumgebung auseinandersetzen.

Man gewinnt jedoch mehr Flexibilität für den Einsatz der optimalen Frontend-Technologie, wenn das User Interface vollständig auf dem Client erzeugt wird, für Web-Apps typischerweise in einem Browser. Dennoch muss das Frontend mit dem Backend kommunizieren. Dazu dient ein API – eine standardisierte Schnittstelle mit klar definierten Datenstrukturen für den Befehls- und Informationsaustausch. Damit wird eine lose Kopplung zwischen Frontend und Backend erreicht. Als breit anerkannter Standard für diesen Austausch hat sich der REST-Architekturstil in Verwendung mit dem JSON-Format sowie Alternativen wie GraphQL etabliert.

Aus Wartungssicht ist eine Architektur mit starker Kopplung langfristig kostspielig: Eine ältere Anwendung lässt sich nur mit Aufwand in eine moderne Web-App umwandeln, da zuerst ein API erstellt werden muss. Ähnliche Beispiele sind Ruby on Rails sowie Content-Management-Systeme wie WordPress, die Webseiten auf dem Server bei jedem Aufruf neu zusammenstellen.

Lose Kopplung mit API

Ein API hat den Vorteil, dass es aufgrund der losen statt fixen Kopplung nicht auf bestimmte Kombinationen von Frontend- und Backend-Technologien festgelegt ist: Wenn das Backend gegenüber der Aussenwelt über ein API exponiert ist, lassen sich die Backend-Funktionen mit verschiedenen Frontend-Technologien nutzen. Das kann im Verlauf des Lebenszyklus einer Applikation nützlich werden, wenn die ursprünglich gewählte Frontend-Technologie den Ansprüchen der Anwender nicht mehr genügt. Zum Beispiel wenn neue Anforderungen wie Optimierung für Mobile oder bessere Performance hinzukommen – dann lässt sich das Frontend mit einer anderen Technologie einfach neu entwickeln, ohne dass Änderungen am Backend nötig sind.

Der JAMstack kommt

Als Musterarchitektur für Web-Apps tritt der JAMstack (jamstack.org) zunehmend ins Rampenlicht. Das Konzept vereint drei Prinzipien:

  • Für die Programmierung des Datenverkehrs zwischen Frontend und Backend kommt JavaScript zum Einsatz. Dabei läuft alles auf der Client-Seite. «JavaScript» kann ein beliebiges Frontend-Framework wie Angular oder React bedeuten, oder auch selbst entwickelte Frontend-Komponenten.
  • Die gesamten serverseitigen Prozesse und Datenbankzugriffe werden über ein wiederverwendbares API zur Verfügung gestellt. Der Zugriff erfolgt mit JavaScript über das HTTPS-Protokoll.
  • Der gesamte HTML-Code (Markup), der sich nicht dynamisch ändert, wird entweder im Browser generiert (Single-Page-Web-App), oder für statischen Content einmalig mithilfe eines Static Site Generators wie Gatsby oder Jekyll.

Web-Apps in JAMstack-Architektur laufen schneller (weniger serverseitige Prozesse), skalieren besser (statische Inhalte können über ein Content-Delivery-Netzwerk effizient verteilt werden), sind sicherer (geringere Angriffsfläche durch das API) und lassen sich bequemer entwickeln, debuggen und testen (lose Kopplung bringt Klarheit, und es gibt eine Vielzahl guter Tools).

Entwickler-Know-how nötig

Mit der Entwicklung von modernen webbasierten Anwendungen ist allerdings eine gewisse Lernkurve verbunden. Ein Entwickler, der bisher mit Java oder einer anderen klassischen Programmierumgebung gearbeitet hat, lässt sich nicht von heute auf morgen auf Webstandards «umstellen». Dazu kommt, dass JavaScript und die ganze Web-Umgebung zwar auf den ersten Blick gesehen rasch zu verstehen sind – aber der Teufel steckt im Detail. JavaScript ist eben nicht die einfachste Programmiersprache und birgt zahlreiche unerwartete Fallstricke. Hier hilft nur intensive Schulung der eigenen Entwicklerteams – oder aber man holt sich externe Hilfe.

Der Experte

Ken Blum

Ken Blum war als Software Engineer bei bbv tätig – und brennt für digitale Produkte. Mit seinem Know-how als Product Owner, Scrum Master und Entwickler ist er in der Lage, Software-Projekte aus unterschiedlichen Blickwinkeln zu betrachten und umzusetzen. Ken Blum leitete zudem die Web Community von bbv.

BIM2FM: So geht digitales Gebäudemanagement

BIM-Daten im Facility Management wirksam nutzen

Individuallösung
6 Tipps, wie Sie Ihr Team effizienter machen

Müde Augen ade: So helfen kurze Codezeilen

Agile
Digitalisierung im Gesundheitswesen

«Die Digitalisierung scheitert, wenn sie dem Menschen die Autonomie nimmt»

Digitalisierung

Artikel kommentieren

Attention!

Sorry, so far we got only content in English for this section.

Achtung!

Entschuldigung, bisher haben wir für diesen Abschnitt nur deutschsprachige Inhalte.

Attention!

Sorry, so far we got only content in English for this section.

Achtung!

Entschuldigung, bisher haben wir für diesen Abschnitt nur deutschsprachige Inhalte.