Das letzte Jahrzehnt war aus Frontend-Sicht turbulent und prägend: Der Aufstieg von JavaScript zur meistgenutzten Programmiersprache und die Standardisierung von CSS3 waren sicher Meilensteine in der Entwicklung der Disziplin. Parallel zur Evolution der reaktiven Frameworks fanden sich Frontend-Teams jedoch jahrelang in einer Optimierungsschleife wieder, deren Ergebnisse nach Migration in ein Backend-System wieder zunichte waren. Das letzte Jahrzehnt läutete den Durchbruch von Node.js, der heutigen Serverumgebung des Frontend, ein. Sie bringt uns die Hoheit über Performance und Mikro-Optimierung.
Bei EnergieSchweiz nutzen wir das Server Side Rendering (SSR) als Lösungsansatz für eine schnelle Entwicklungszeit mit hoher Performance.
Viele Wege führen ins WWW
Digitale Projekte lassen sich auf diverse Arten umsetzen. Am wenigsten mag ich jedoch den Approach, welcher am längsten dauert und am wenigsten abgibt. Das Leben ist zu kurz für ein Webprojekt, und das NPM Package von gestern ist morgen vielleicht schon nicht mehr auffindbar. Fortschritt bedeutet nicht, alte Technologien auf die Spitze zu treiben, sondern neue Ansätze zu probieren. Dank Contentful als Headless CMS sowie dem dynamischen Projektteam von EnergieSchweiz war uns von Beginn an klar, dass Performance und Systemintegrität vom Frontend über die Ziellinie gefahren werden. Und ab hier befinden wir uns auf der anderen Seite der Macht, oder eben einfach im neuen Jahrzehnt.
Gatsby vs. Next.js
Bei einer Entwicklungsphase von wenigen Monaten und einem Content-getriebenen Datenmodell sowie einem Design, welches nach keinem State Management schreit, schien uns die Extraktion von statischen HTML-Seiten als plausibel. Eine App-Architektur war nicht notwendig. Redux als State Management wäre wenn nötig auch jederzeit mit Gatsby nutzbar. Obwohl ich Next.js als Liebhaber von dedizierten Express.js Renderer nicht sonderlich vertieft kenne, war ich mir bewusst, dass ein SSG (static site generator) vorhanden wäre. Am Ende überzeugte aber das Plugin Environment von Gatsby und dessen grundlegender Core-SSG-Ansatz.
Das Gatsby-Prinzip
Mit Gatsby wird die komplette Website im HTML-Format vorgerendert, um danach als statische Files ausgeliefert zu werden. Sämtliche Datensätze werden beim Build in allen Sprachen bezogen und direkt in das Rendering eingebettet. Eine herkömmliche Caching Middleware wird an diesem Punkt obsolet, der Server ist zur Response-Zeit von jeglichem Arbeitsaufwand entlastet und bedient einzig die Anfragen mit statischen Files. Ein kompletter Build in drei Sprachen und total ungefähr 600 Seiten dauert bei uns 6 bis 10 Minuten. Die Build-Zeit ist Teil des Deployment-Prozesses. Für den Publisher Preview läuft parallel ein Node.js Server mit Gatsby im Development-Modus und ohne statischen Build-Prozess (JavaScript SPA). Über die Preview API von Contentful wird der Preview-Server laufend mit den aktuellsten Content-Daten versorgt. Damit ist es für den Publisher jederzeit möglich, innert Sekunden eine adäquate Vorschau zu generieren.
Gelebte Agilität
Im Fokus stand die frühzeitige Sichtbarkeit von Text und Bild. Ein sichtbares Preview gibt einerseits den Publisher Sicherheit, anderseits fördert es die zeitnahe Fertigstellung des gesamten Content Model. Das Content Model wiederum stellt die Basis der Kommunikation zwischen Content API und Client, denn ohne die Datenarchitektur zu kennen, können auch keine Daten bezogen werden. Die Designumsetzung erhält an diesem Punkt einen dezentralen Aspekt und wird parallel über das ganze Projekt gezogen. Somit befanden wir uns in einem wechselnden Parallelprozess zwischen Datenmodellierung, Applikationsarchitektur und Designumsetzung. Diese Flexibilität erlaubt es uns, den Fokus der täglichen Arbeit auf die zum Zeitpunkt relevanten Aufgaben zu richten und uns auf die Bedürfnisse des Kunden, der User und der Publisher zu konzentrieren. Anstatt sich komplett dem Design zu unterwerfen, wird die Designumsetzung lediglich ein paralleler Prozess in einem gesamtheitlichen Puzzle.
Am Anfang war der Datensatz
Das Frontend pinselte in den letzten Jahren oftmals Wandtapeten, welche danach über funktionale Datenprozesse geklebt wurden und sich für das Erscheinungsbild verantwortlich zeigten. Mit dem Austausch einzelner Backsteine musste auch die Tapete zumindest in Teilen neu geklebt werden. Mit dem neuen Prozess stellen wir das Erscheinungsbild als Puzzle, welches wiederum die komplette technische Palette für einen modernen Webauftritt beinhaltet. Mit der Erfahrung von Single Page Applications konnten wir diese Puzzleteile in Form von SEO, Performance, Architektur, Accessibility und Design nahtlos integrieren. Jeder Entwicklungsstand repräsentierte zugleich den finalen Zustand der Website, da der Code nicht in weitere Umsysteme migriert wird. Dies führt zu einem jederzeit messbaren Progress, was der Planung und der weiteren Entwicklungsstrategie zugute kam.
Energie verkaufen
Den Umsetzungsfokus setzten wir von Beginn auf Performance, wobei wir mit dem PWA Plugin von Gatsby bereits frühzeitig eine Sicherheit für Caching und Ladeperformance gewinnen konnten. Das ausgereifte Plugin Ecosystem von Gatsby zeigte sich hinsichtlich Mehrsprachigkeit, Ladezeiten und Datenabstraktion als enormen Zeitgewinn. Mithilfe von Page Transitions animierten wir die statischen Seiten im Look and Feel einer vollwertigen PWA. All diese Faktoren verleihen einem Projekt Flügel: Die Performance wird alleine durch die Grundarchitektur sichergestellt und bedient sich keiner Caching Middleware. Die komplette Agilität im Zusammenspiel mit Content-Modellierung, Content-Publishing sowie den Experten vom Hosting und SEO spart Entwicklungskosten und zeitintensive Abstimmungen im interdisziplinären Kommunikationsfluss.
Die Macht des Frontend
Der Begriff Energie wird auf das Griechische zurück geführt und bedeutet im Sinne «wirkende Kraft». Einfach erklärt bedeutet es die Möglichkeit, eine Arbeit zu verrichten, Wärme abzugeben oder eben Licht und somit auch Farben zu projizieren. Im übertragenen Sinne steht Energie somit für jenes, was das Frontend im UX Bereich seit Jahren verrichtet. Nur eben war es am Ende nie die wirkende Kraft, sondern bloss das Lämpchen am Dynamo.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
