Eine neue Architektur für heise online: Janus – Teil 2
Nachdem wir in Teil 1 der Serie die Änderungen unserer neuen Janus-Architektur im Backend beschrieben hatten, widmen wir uns nun den Neuerungen im Frontend.
Im letzten Beitrag haben wir die Änderungen unserer neuen Janus-Architektur im Backend beschrieben. Heute wollen wir uns den Neuerungen im Frontend widmen.
Das Frontend von heise online war lange geprägt von den historischen Gegebenheiten. Aus der Backend-Sprache Perl hatten sich als Template-Engines zuerst HTML::Template und später dann Template Toolkit ergeben. Wenngleich letztere durchaus einen brauchbaren Funktionsumfang boten, ließen Neuerungen stets auf sich warten.
Mit Einführung der Janus-Architektur im Backend haben wir daher die Gelegenheit genutzt, auch das Frontend zu überarbeiten.
React SSR
Das Frontend basiert auf React, allerdings bisher ausschließlich Server-Side-Rendered (SSR). Die einzelnen Bereiche, aus denen heise online besteht, sind in klar separierten Komponenten aufgebaut und werden fertig gerendert vom Server ausgeliefert. Die einzelnen Komponenten werden anschließend zu einer gesamten Seite zusammengesteckt. Als Template-Sprache kommt JSX beziehungsweise in Verbindung mit TypeScript TSX zum Einsatz.
Wie bereits im Backend hat das für uns enorme Vorteile. Templates, die davon ausgehen, dass eine Variable immer vorhanden ist und dann einen rätselhaften Lückentext ausgeben, wenn das doch mal nicht so ist: Mit TSX völlig ausgeschlossen, der Editor weist bereits beim Erstellen des Templates darauf hin, dass eine Variable als immer gegeben behandelt wird, obwohl sie nur optional ist, und fordert eine Anpassung des Codes ein.
Komponenten-Entwicklung
In Storybook findet bei uns die Entwicklung der Komponenten statt. Storybook ist ein Tool, das es uns ermöglicht, Komponenten gekapselt zu entwickeln und alle möglichen Status zu betrachten. Für diverse Datentypen (z. B. Boolean, String und Number) der Komponenten-Parameter erzeugt Storybook automatisch Schalter und Eingabefelder, die sich später individuell anpassen lassen. Die Auswirkungen lassen sich live an der Komponente betrachten. Wie sieht beispielsweise die Komponente für die iX aus? Einfach die Marke im Dropdown auswählen. Und wie verhält sie sich, wenn die Überschrift länger wird? Einfach noch ein paar Zeichen dazu tippen. Und auf Mobilgeräten? Kurz den Breakpoint wechseln und schon ist auch diese Frage geklärt.
Ein wichtiger Vorteil von Storybook ist, dass wir auch Kolleginnen und Kollegen ohne Technikschwerpunkt im Job eine Komponente präsentieren und zum Anschauen und Testen geben können. Mussten wir früher bestimmte Varianten "herstellen" oder in Screenshots präsentieren, ist das nun nicht mehr nötig.
Rückenwind
Beim Styling haben wir uns von handgeschriebenem Sass nach dem BEM-Schema (Block Element Modifier) verabschiedet und setzen in Janus auf Tailwind. Mit den Jahren hat uns am BEM-Ansatz immer stärker gestört, dass wir permanent mit "Naming Things" beschäftigt waren und die Code-Basis stetig angewachsen ist. Zweifellos ist auch Tailwind nicht frei von Schwierigkeiten, aber aktuell erschienen uns diese als deutlich weniger gravierend (sollte sich das ändern, werden wir in diesem Blog sicherlich darauf zurückkommen). Bevor wir uns entschlossen, Tailwind auch für unsere neue Architektur einzusetzen, haben wir einen ersten Testlauf auf unseren AMP-Seiten absolviert.
Der mit Tailwind 3 eingeführte JIT-Compiler kommt uns sehr entgegen. So stehen uns beim Entwickeln zunächst alle CSS-Klassen zur Verfügung, aber in der finalen CSS-Datei landen ausschließlich die benutzten Klassen.
Dank der gelungenen Integration in den Editor (via VS Code Extension) ist ein Blick in die Tailwind-Dokumentation nur selten nötig. Arbeitet man beispielsweise innerhalb eines class- bzw. className-Attributs, erscheinen beim Tippen automatisch Vorschläge für passende Tailwind-Klassen.
Wie auch beim Backend haben wir natürlich auch im Frontend nicht alles auf einen Schlag auf die neue Technik umgestellt. In der Übergangsphase werden wir noch längere Zeit im Mischbetrieb arbeiten. Während etwa die Startseite von heise+ bereits fast vollständig aus der neuen Architektur kommt, soll die Startseite von heise online in den nächsten Tagen nachziehen. (hih)
