In diesem Blogbeitrag möchte ich den Tech-Stack vorstellen, den wir im Ackee-Frontend-Team für die Erstellung moderner Web Apps verwenden. Wir verfügen über mehrere verschiedene Stacks für konkrete Anwendungsfälle, doch fast alle sind von der JAMstack-Architektur abgeleitet, die in den letzten Jahren an Popularität gewonnen hat.
JAMstack
JAMstack steht für Javascript, API und Markup. Diese Methode dient zur Entwicklung von Client-Web Apps in Javascript, zur Kommunikation mit einem Backend-Server via HTTP-Protokoll und zur Bereitstellung statischer Dateien (oft vordefiniert) über ein Content Delivery Network (CDN).¹
Dieses Konzept verwenden wir schon seit über fünf Jahren. Dabei wird es von uns ständig aktualisiert und modernisiert. Unser Basis-Stack kann je nach Größe und Anwendungsfall eines Projekts in drei Kategorien unterteilt werden. Hier fasse ich alle kurz zusammen.
Einseitige Web Apps
Ein großer Teil unseres Portfolios sind Enterprise- und hoch interaktive Web Apps. Wir entwickeln diese als Single Page Applications (SPA) in React in Kombination mit Redux für die Statusverwaltung auf einer spezifischen Fork der Create React App (CRA) als Grundgerüst für unsere Projekte. Das CRA-Gerüst eignet sich für die Aktivierung von Progressive Web Apps (PWA)-Funktionen wie Content Caching oder Browser-Push-Benachrichtigungen. Die Kommunikation mit einem Backend-Server, in der Regel REST API geht direkt von Javascript über das HTTP-Protokoll oder gRPC. Für diesen Zweck verfügen wir über eine kleine Bibliothek namens Antonio.
Der zentrale Vorteil dieses Ansatzes ist das vom Backend entkoppelte Web-Frontend, das eine unabhängige und skalierbare Entwicklung ermöglicht. Wir favorisieren die Prinzipien und Denkmodelle von React, da sie oft elegante Lösungen für komplizierte Aufgaben bieten und vollständig anpassbar sind.
Microsites und statische Websites
Gatsby.js ist die erste Wahl für Microsites und eher statische Websites. Es wird von uns sehr geschätzt, denn es ermöglicht die Entwicklung einer Website in React wie jede andere Web-App. Zur Kompilierung wird diese dann automatisch in ein statisches HTML-Markup umgewandelt. Wir können sogar beim JS-in-CSS-Ansatz mit Fela-Bibliothek bleiben, der sich für ein zustandsgesteuertes Design und Atomic CSS bewährt hat. Eine weitere gute Funktion ist die Datenabfrage aus vielen Quellen (z. B. Google Docs/Sheets) zur Kompilierung. Nicht zuletzt kann die Gatsby-Site leicht in eine PWA umgewandelt werden. So haben wir es mit unserer Website für Open-Source-Projekte gemacht.
Isomorphe Web-Apps
Beide genannten Kategorien entsprechen den JAMstack-Grundsätzen, doch wenn es um SEO geht, schneiden isomorphe Web Apps besser ab. Bei der Entwicklung solcher Projekte behalten wir unser CRA-Gerüst bei und erweitern es um einen Node.js-Server für die Ausgabe gerenderter HTML-Seiten. Dieses Setup ist in der Regel etwas schwieriger zu warten und hat im Vergleich zu den beiden vorherigen einige Tücken.
Bereitstellung
Continuous Integration/Delivery und Deployment aus dem GIT-Repository ist für uns Standard. Web Apps und Microsites werden als statische Dateien in Google Cloud Bucket bereitgestellt. Inhalte aus dem Bucket werden über das Cloudflare Content Delivery Network (CDN) bereitgestellt, sodass eine schnelle Auslieferung garantiert ist.
Fazit
In diesem Blogbeitrag wurden die Technologien vorgestellt, die wir für die Web App-Entwicklung verwenden, und gezeigt, wie wir diese einsetzen. Wir diskutieren häufig neue Möglichkeiten und aktualisieren regelmäßig unsere Tools, um mit der schnellen Entwicklung im Frontend-Bereich Schritt zu halten und optimale Dienstleistungen anzubieten.
[1] Jamstack.org
