Die Entscheidung, Ende 2019 von jQuery Abstand zu nehmen, war die perfekte Vorbereitung, um tiefer in React einzusteigen. Durch das Schreiben von Vanilla JavaScript im gesamten Jahr 2020 konnte mich mich mit den enormen Fortschritten der Sprache vertraut machen. Nur wenige Wochen nach dem Entschluss habe ich jQuery für den eigenen Code vollständig aufgegeben.
Meine erste Single-Page-Application
Der Begriff Single-Page-Application (SPA) bezeichnet eine Website oder Anwendung, die nur eine einzelne HTML-Seite lädt und den Seiteninhalt dynamisch aktualisiert – ganz ohne vollständige Neuladung. Wer Facebook nutzt, kennt das Prinzip: Man ruft die Seite auf, kann Beiträge durchstöbern, Fotos ansehen und Kommentare hinterlassen, ohne dass die Seite jemals neu geladen wird.
Meine erste echte Berührung mit diesem Ansatz hatte ich bereits 2015, als ich versuchte, eine mobile App zu bauen. Das Frontend setzte auf Cordova und funktionierte grundsätzlich gut, aber das Schreiben der dafür nötigen Layout- und Interaktionslogik war aufwändig. Mit React ist das inzwischen deutlich einfacher. Nach einem intensiven JavaScript-Refresher und wachsender Routine mit React hatte ich schliesslich die Gelegenheit, erstmals eine SPA für einen Kunden zu entwickeln.
Einsatz der AutoScout24-API auf einer Kundenwebsite
Eine lokale Garage pflegt ihre Fahrzeugbestände über die AutoScout24-Website und wollte diese auch auf der eigenen Website verfügbar machen. Dafür musste die Schnittstelle von AutoScout24 angebunden und die Daten in eine interaktive Single-Page-Application (SPA) überführt werden.
Zuerst entwickelte ich ein eigenes REST-Endpoint, das stündlich auf Serverebene neue Fahrzeugdaten von AutoScout24 abruft und im WordPress-Datenbestand zwischen speichert. Das Frontend greift dann über die WordPress-REST-API (Schnittstelle) auf diese Daten zu und stellt sie in einer übersichtlichen Listenansicht dar. Beim Klick auf ein Fahrzeug wird die Detailansicht geladen – inklusive einer interaktiven Bildergalerie.
Sofortiges Sortieren und Umschalten zwischen Listen- und Detailansicht
Dank der überschaubaren Anzahl an Fahrzeugen gab es keinen Grund, die Daten nicht vollständig auf einmal zu laden. Der gesamte Datensatz umfasst rund 110 KB – ausreichend für alle Informationen, die die Seite benötigt. Die Bilder werden bei Bedarf per Lazy-Loading nachgeladen.
Das hat zur Folge, dass jede interaktive Änderung auf der Seite – vom Anzeigen der Fahrzeugliste über Sortierung und Filterung bis hin zur Detailansicht – sofort erfolgt. Auch der Wechsel in die Detailansicht eines einzelnen Fahrzeugs geschieht verzögerungsfrei, da alle benötigten Daten bereits vorliegen.
Das lässt sich live ausprobieren: einfach die Listenansicht aufrufen, ein Fahrzeug auswählen und mit dem Link «Nächstes Fahrzeug» zum nächsten weiter klicken.
Die Lernkurve betrifft weniger den Code selbst
Das Erlernen eines neuen Programmieransatzes braucht Zeit, doch wer bereits Erfahrung mit reinem JavaScript hat, findet den Einstieg in React vergleichsweise einfach. Was sich jedoch als besonders zeitaufwändig erwies, war die Strukturierung des Codes in einzelne Komponenten. Die Fahrzeugliste besteht aus Karten-Komponenten, wobei eine Karte wiederum aus Bild, Titel, Beschreibung, Button und weiteren Elementen zusammengesetzt ist.
Obwohl diese SPA relativ simpel umzusetzen war, besteht sie aus über 30 einzelnen Komponenten. Einige davon werden mehrfach verwendet – zum Beispiel die Darstellung des Fahrzeugpreises, sowohl in der Listen- als auch in der Detailansicht. Genau hier liegt einer der grossen Vorteile von wiederverwendbaren Komponenten: Hätte ich für jedes Informationselement eine eigene Komponente gebaut, hätte ich nahezu doppelt so viele Elemente verwalten müssen.
Das ist das eigentliche «Neuland» bei der Arbeit mit React – und genau in diesem Projekt habe ich viel darüber gelernt, wie man Code effizient strukturiert. Ich bin sicher, dass zukünftige Projekte dadurch einfacher und schneller umzusetzen sein werden: einerseits durch die gewonnene Erfahrung, andererseits, weil viele der entwickelten Komponenten künftig wiederverwendet werden können.
