Webentwicklung mit ColdFusion und ReactJS

Die Informatik ist ein sich stetig änderndes Themengebiet. So auch die Entwicklung von Webanwendungen. Während vor einigen Jahren noch die Programmierung von Frontend und Backend verknüpft wurde, werden diese nun meist strikt voneinander getrennt. Dies hängt stark mit dem ebenso wachsenden Bedürfnis nach hoher Codequalität zusammen.

Jonathan Holz, 03.06.2020

Was sind REST (REpresentational State Transfer) APIs?

Wenn von einer strikten Trennung des Backends vom Frontend gesprochen wird, liegt der Begriff „REST-API“ nie fern. Es handelt sich um ein Design Pattern, welches bei Webservern angewandt wird. Dabei wird der Programmcode von Front- und Backend separiert und eine Verbindung besteht erst, wenn der Client (z.B. ein Browser) einen HTTP Request an den Server startet. Der Server erhält so die Informationen, welche Aktionen auszuführen sind und welche Daten der Client benötigt. Wurde der Vorgang verarbeitet und stehen die Daten der REST API zur Verfügung, stellt diese die Daten in einem JSON zur Verfügung. Der Client wartet während der Verarbeitung auf die Antwort der REST API und erhält die Daten. Hierbei ist die Zustandslosigkeit ein wichtiges Merkmal. Diese beschreibt die Art der Kommunikation zwischen Client und API, da die Anfragen für das Backend unabhängig von dem Zustand das Frontends sein müssen. Dies ist der Fall, da das Backend keine Daten mehr aus dem Client auslesen kann. So kann die API weder Cookies noch Sessions verwenden und nur die Daten nutzen, welche mit dem HTTP Aufruf übertragen wurden. Die Idee hierbei ist: Die Entkopplung des Backends vom Frontend, die Vereinheitlichung der Schnittstelle und das Auflösen von Abhängigkeiten.

Rest - API

Doch wie verhält sich diese strikte Trennung bei ColdFusion?

ColdFusion eignet sich in Kombination mit CFWheels hervorragend als REST-API. Die Backend Anwendung wird so in Model und Controller eingeteilt. Die Controller sind hierbei dazu da, Anfragen vom Client zu verarbeiten und an das weitere Backend zu verteilen. Hierbei spielen die Models eine wichtige Rolle. Diese bestehen zum einen aus dem ORM System und zum anderen aus den Services. Das ORM System liest die Daten aus der Datenbank aus. In den Services wird im Gegenzug mit diesen Daten gearbeitet, wobei hier die Daten erst mithilfe des ORM Systems abgerufen, dann weiterverarbeiten und schließlich in einer komplett neuen Form bereitgestellt werden.

Backend

Das ReactJS Frontend als Client.

Da das Frontend so nun nicht mehr von ColdFusion beeinflusst wird, kommen hier neue technologische Möglichkeiten ins Spiel, z.B. ReactJS. Es ist ein JavaScript Framework für die Erstellung von Webseiten. Es wirkt wie eine objektorientierte Version von HTML und erlaubt es dem Entwickler, eigene Tags als Klassen zu programmieren. Außerdem bietet ReactJS zahlreiche Frameworks aus der Community und ein mächtiges Lifecycle System. Mit seinem großen Umfang eignet es sich sehr gut als Frontend Framework in Kombination mit einer ColdFusion REST-API.

Wie funktioniert Authentifizierung ohne Sessions?

Wie bereits zuvor erwähnt, kann das Backend sich mit dem beschriebenen Ansatz nicht mehr an Sessions bedienen. Jedoch funktioniert die Authentifizierung des Frontends mit den Sessions, welche die Daten für den Nutzer halten. An dieser Stelle kommt eine neue Technologie mit ins Spiel: Der JSON Web Token (JWT). Bei dem JWT handelt es sich um die Standardisierung einer verschlüsselten Datenstruktur, zum Austausch von Daten. Er besteht aus drei Komponenten: Einem Header mit Metainformationen, einem Payload mit Daten und einer Prüfsumme, welche die Korrektheit sicherstellt.

JWT

Die einzelnen Komponenten werden jeweils mit dem Algorithmus im Header verschlüsselt und ergeben so drei Teile. Diese werden in einer Zeichenkette verbunden und mit Punkten getrennt. Die so entstandene Zeichenkette ist der JWT. Der JWT wird bei einer Anmeldung im Frontend vom Backend generiert und im Local Storage des Clients gespeichert. Er wird bei jeder Anfrage vom Client an das Backend übermittelt, vom Backend überprüft und authentifiziert. Sollte dies fehlschlagen, verweigert das Backend die Verarbeitung der Anfrage. Bei einer erfolgreichen Authentifizierung wird die Anfrage durchgeführt und die Antwort zurück übermittelt.

Betrachtung der Performanz.

Die Performanz kann bei dem Vorgehen und der richtigen Umsetzung ebenso profitieren. Aufgrund der asynchronen Abfrage von Daten, können diese in kleineren Paketen eingeteilt werden und müssen nicht komplett verfügbar sein, bevor die Seite geladen werden kann. Somit muss erst nur die HTML Seite dem Client zur Verfügung stehen und die kann die Daten, je nachdem wie sie benötigt werden, nachgeladen werden.

Was kann man als Fazit ziehen?

Ob architektonisch im Hintergrund oder funktional im Vordergrund, die klare Trennung des Frontends vom Backend bringt viele Vorteile mit sich. Neben der übersichtlicheren Trennung vom Code und erhöhten Dynamik der Frontend Seiten profitiert auch die Performanz von der Umstellung und Umsetzung mit einer ColdFusion REST-API und einem ReactJS Frontend. Somit ist eine solche Architektur bei einer aufwendigen Web Applikation vorzuziehen.


Author


Jonathan Holz
Jonathan Holz


Kontakt

 

 

Contact