React bringt die Inhalte auf den Bildschirm.

React kümmert sich um die Darstellung interaktiver Web-Inhalte – sei es eine Website, eine App oder ein Videostreamingportal. Benutzerinteraktionen im Browser können zwar in reinem Javascript programmiert werden, doch bei komplexeren Fällen bietet sich eine Library oder ein Framework wie React an. So behalten wir die Kontrolle über jedes Detail in der Darstellung – ohne uns ständig um Details kümmern zu müssen.

React plus X

React legt das Fundament für eine effiziente Entwicklung. Und es öffnet die Tür zu einem Dschungel von weiteren Libraries (wir nennen es Ökosystem), die darauf aufbauen oder sich sehr gut kombinieren lassen:

  • Ein Widget? React.
  • Eine ganze Website mit Server-side Rendering? React und Next.js.
  • Eine App mit vielen möglichen Zuständen? React und XState.

TypeScript

TypeScript ist der neue beste Freund von Javascript. In Javascript ist alles möglich – auch Saltos mit blutiger Nase und Knochenbrüchen. TypeScript beendet den Wildwuchs, indem es die Entwickler*innen zwingt, Implizites explizit zu machen (Typisierung).Eine definierte Datenstruktur ist wie ein zahmes Känguru: Keine Boxhiebe, aber alles im Beutel. Das gibt Sicherheit. Das Resultat sind weniger Bugs und eine stabile Basis, die auch grosse Projekte langfristig wartbar macht.

XState

Viele mögliche Interaktionen bedeutet auch viele mögliche Zustände – etwa bei einem Verkaufsvorgang: Hat die Benutzerin schon ein Konto? Mit Adresse? Was ist im Warenkorb? In welchem Schritt ist der Bezahlvorgang?Hinter XState steckt ein Konzept aus der theoretischen Informatik: State Machines sind eine elegante Lösung, um Zustände und Abhängigkeiten zu modellieren und zugehörige Daten zu verwalten. So landen Benutzer*innen nicht in einer Sackgasse, sondern bewegen sich auf definierten Pfaden durch eine digitale Landschaft. Das schafft die Basis die für kritische Anwendungen wie z.B. ein Kassensystem.Robert hat auf unserem Blog ausführlich erklärt, was es mit State Machines und XState genau auf sich hat.

Tailwind

An CSS kommt im Web niemand vorbei. Layout, Farben, Schriften, Spacing – kurz: Das Erscheinungsbild jeder Website ist in Stylesheets festgelegt.CSS ist mittlerweile sehr umfangreich und bietet ausufernde Möglichkeiten. Das führt natürlich zu einer gewissen Komplexität, was wiederum eine Suche nach dem besten Ansatz zur Folge hat, um CSS zu bändigen.Der beste Anwärter auf den heiligen Gral ist unseres Erachtens Tailwind. Die Umsetzung von Designs beschleunigt es jedenfalls erheblich.