Zurück zu Ressourcen
Blog 2020-06-03 3 min Lesezeit Jonathan Holz

Webentwicklung mit ColdFusion und ReactJS

Frontend und Backend mit ReactJS, ColdFusion, REST und JSON entkoppeln und Webanwendungen modular entwickeln.

Die Webentwicklung verändert sich laufend. Neue Endgeräte, höhere Erwartungen an Bedienbarkeit und wachsende Anwendungen verlangen eine klare Struktur. Eine Möglichkeit besteht darin, Frontend und Backend voneinander zu entkoppeln. ReactJS übernimmt die Benutzeroberfläche, während ColdFusion Daten und Geschäftslogik über eine REST-API bereitstellt.

REST-APIs als Verbindung

Eine REST-API stellt Ressourcen über klar definierte HTTP-Endpunkte bereit. Client und Server tauschen dabei typischerweise JSON-Dokumente aus. Die Schnittstelle bleibt zustandslos: Jede Anfrage enthält die Informationen, die zu ihrer Verarbeitung notwendig sind.

Austausch zwischen Client, REST-API und Datenbank

Der Client kommuniziert über HTTP und JSON mit einer REST-API.

Diese Trennung hat einen praktischen Vorteil. Das Backend kann neben der Weboberfläche auch mobile Apps oder andere Systeme bedienen. Das Frontend wiederum muss die interne Datenhaltung nicht kennen.

ColdFusion im Backend

ColdFusion eignet sich zur Umsetzung der Geschäftslogik und der REST-Endpunkte. In der beschriebenen Architektur strukturiert das Framework CFWheels die Anwendung nach Models und Controllern. Models repräsentieren Daten und Regeln; Controller verarbeiten HTTP-Anfragen und liefern die passenden Antworten.

Zusätzliche Services kapseln fachliche Funktionen, die nicht direkt in einen Controller gehören. Der Datenbankzugriff kann über ein ORM erfolgen. Das Ergebnis ist ein Backend, dessen Verantwortlichkeiten getrennt und dessen Funktionen über eine einheitliche API erreichbar sind.

ColdFusion-Backend mit Controller, Services, ORM und Datenbank

Controller koordinieren Services und Datenzugriff und liefern JSON an den Client.

ReactJS im Frontend

ReactJS bildet die Benutzeroberfläche aus wiederverwendbaren Komponenten. Eine Komponente verbindet Darstellung und Verhalten für einen klar abgegrenzten Teil der Anwendung. Änderungen am Zustand führen dazu, dass React die betroffenen Bereiche neu rendert.

Das Frontend ruft die REST-Endpunkte asynchron auf und verarbeitet die gelieferten JSON-Daten. Es kann dadurch unabhängig vom ColdFusion-Code entwickelt und ausgeliefert werden, solange der Vertrag der API stabil bleibt.

Authentifizierung ohne serverseitige Sitzung

Bei einer zustandslosen API wird die Anmeldung nicht über eine klassische serverseitige Sitzung gesteuert. Stattdessen kann der Server nach erfolgreicher Authentifizierung ein JSON Web Token (JWT) ausstellen. Das Token enthält einen Header, Nutzdaten und eine kryptografische Signatur.

Aufbau eines JSON Web Tokens aus Header, Payload und Signatur

Das Token transportiert die für nachfolgende Anfragen benötigten Angaben.

Der Client übermittelt das Token bei weiteren Anfragen. Der Server prüft Signatur und Gültigkeit, bevor er die angeforderte Aktion ausführt. Das Frontend kann das Token lokal vorhalten; bei der konkreten Umsetzung müssen Speicherort, Ablaufzeit, Erneuerung und Schutz vor Angriffen bewusst festgelegt werden.

Performance und Weiterentwicklung

Die entkoppelte Architektur erlaubt es, Daten asynchron nachzuladen und nur die Teile der Oberfläche zu aktualisieren, die sich geändert haben. Frontend und Backend können als getrennte Pakete entwickelt, getestet und bereitgestellt werden.

Gleichzeitig entsteht eine klare Grenze: Die REST-API ist ein Vertrag, der gepflegt und versioniert werden muss. Fehlerbehandlung, Authentifizierung und Berechtigungen gehören ebenso zu diesem Vertrag wie die Struktur der JSON-Antworten.

Fazit

ColdFusion und ReactJS ergänzen sich in dieser Architektur. ColdFusion stellt Daten und Geschäftslogik bereit, ReactJS liefert eine komponentenbasierte Oberfläche. REST und JSON verbinden beide Seiten. Die Entkopplung verbessert die Wiederverwendbarkeit und erleichtert parallele Entwicklung, verlangt aber eine sorgfältig definierte und abgesicherte API.

Bereit für den nächsten Schritt?

Erzählen Sie uns von Ihrer aktuellen Landschaft und Ihren Zielen. Wir geben Ihnen eine ehrliche Einschätzung zum nächsten praktischen Schritt.

Konkrete Umsetzung

Aus der Ressource einen umsetzbaren nächsten Schritt machen

Besprechen Sie Ihre konkrete Ausgangslage mit heureka. Gemeinsam ordnen wir Prioritäten, Verantwortlichkeiten und den sinnvollsten Startpunkt.