Frontend / Backend Synchronisierung in der Webentwicklung
In modernen Webanwendungen ist die Synchronisierung zwischen Frontend und Backend von zentraler Bedeutung. Nutzer erwarten reaktive Oberflächen, unmittelbares Feedback und konsistente Daten – selbst wenn mehrere Personen gleichzeitig an denselben Inhalten arbeiten. Doch die Umsetzung ist technisch anspruchsvoll und erfordert je nach Anforderungen der Anwendung verschiedene Ansätze.
Im Folgenden werden einige Methoden vorgestellt, mit denen das Frontend mit dem Backend kommunizieren kann, sowie weitere Methoden, die im Frontend und Backend eingesetzt werden können.
Methoden zur Kommunikation
Damit Frontend und Backend effizient miteinander synchronisiert werden können, sind geeignete Kommunikationsmethoden erforderlich. Jede Technologie hat dabei ihre eigenen Stärken und Schwächen.
Websockets
Websockets ermöglichen eine dauerhafte, bidirektionale Verbindung zwischen Client und Server. Dadurch wird eine Echtzeitkommunikation mit geringer Latenz ermöglicht, die besonders in Anwendungen wie Chats oder Kollaborationstools von Vorteil ist. Allerdings erhöht sich auch der Aufwand, Websockets in die Anwendung zu integrieren, und nicht jeder Proxy bzw. Load Balancer unterstützt diese in der Standardkonfiguration.
Server Side Events (SSE)
SSE ermöglichen eine einseitige Verbindung vom Server zum Client, über die kontinuierlich Updates geschickt werden können. SSE sind einfacher zu implementieren als Websockets, bieten aber keinen bidirektionalen Datenaustausch. Beispielhafte Anwendungsfälle wären Live-Dashboards oder Benachrichtigungen.
HTTP
Die am häufigsten genutzte Kommunikationsmethode ist die über HTTP-Requests. HTTP wird meist in REST-APIs verwendet und ist auch in anderen Bereichen weit verbreitet. Es ist leicht zu implementieren und für CRUD-Operationen gut geeignet. Allerdings können darüber keine Daten vom Server aus gepusht werden und es ist immer eine clientseitige Anfrage erforderlich. Ein solches Polling, das in regelmäßigen Abständen durchgeführt wird, kann in Anwendungen schnell zu Performanceproblemen führen.
gRPC
gRPC (Google Remote Procedure Calls) ist ein moderner Ansatz zur Kommunikation zwischen Systemen, der auf HTTP/2 und Protocol Buffers basiert. gRPC ist sehr performant, da Daten als Bytes über das Netzwerk gesendet werden und das Format, in dem die Daten während der Laufzeit der Anwendung aussehen, in den Protocol Buffers fest definiert ist. Zudem unterstützt gRPC Streaming in beide Richtungen. Ein Nachteil von gRPC ist, dass die Kommunikation zur Entwicklungszeit nicht lesbar ist, da alles als Bytes transportiert wird. Häufig wird dieses Protokoll in Microservices genutzt, um Backends miteinander kommunizieren zu lassen.
Frontend Methoden
Neben der Wahl der passenden Kommunikationsmethode spielen auch Frontend-Techniken eine entscheidende Rolle bei der Synchronisierung. Sie beeinflussen, wie Nutzer Interaktionen erleben und wie effizient Anfragen verarbeitet werden. In vielen Anwendungen ist das Bearbeiten von Anfragen im Frontend durch das normale Abarbeiten der eingehenden Daten meist völlig ausreichend. In manchen Anwendungen werden jedoch weitere Techniken benötigt.
Decouncing
Wenn bei einer Anwendung Daten mit sehr hoher Frequenz empfangen werden, ist es nicht immer möglich, diese Daten direkt an den Benutzer über die UI zu übergeben. Bei einem Sensor beispielsweise mit einer sehr hohen Empfindlichkeit könnten innerhalb kurzer Zeit mehrere hundert Datenpakete versendet werden. Wenn die UI bei jedem dieser Aktualisierungen neu gerendert werden müsste, würde dies zu großen Performanceeinbußen führen. Beim Debouncing wird nicht bei jedem Datenpaket eine Aktualisierung durchgeführt, sondern die Datenpakete werden aggregiert und erst nach einem bestimmten Zeitraum oder einer bestimmten Menge wird die UI aktualisiert. Dies führt zu einer deutlich performanteren Anwendung. Natürlich wird dem Benutzer bei diesem Ansatz nicht jede Datenänderung angezeigt, doch das ist auch nicht immer nötig. Oder kannst du 100 Sensor-Aktualisierungen pro Sekunde lesen?
Optimistic UI
Die Optimistic UI gibt dem Nutzer sofortiges Feedback, noch bevor das Backend eine Anfrage möglicherweise vollständig bearbeitet hat. Dadurch entsteht die Illusion, dass die Anwendung extrem schnell ist, selbst wenn die Bearbeitung eigentlich viel länger dauert. Allerdings ist dieser Ansatz sehr komplex, da bei einer fehlerhaften Anfrage auch der Zustand des Frontends zurückgesetzt werden muss. Andernfalls würde der Benutzer mit einem Frontend interagieren, dessen Zustand nicht mit dem des Backends übereinstimmt.
Datenkonsistenz im Backend
Die Konsistenz der Daten zwischen Frontend und Backend ist von signifikanter Relevanz. Wenn dies nicht gegeben ist, können ungewollte Zustände entstehen, die zu Fehlverhalten sowohl im Frontend als auch im Backend führen. Dies ist besonders bei Anwendungen wie Google Sheets problematisch, bei denen mehrere Nutzer zur gleichen Zeit an einem Datensatz arbeiten.
Im Folgenden werden zwei Beispielmechanismen gezeigt, wie die Datenkonsistenz gewährleistet werden könnte.
Conflict-Free Replicated Data Types (CRDTs)
CRDTs ermöglichen es, dass mehrere Datensätze unabhängig voneinander bearbeitet werden können, ohne dass sie synchronisiert werden müssen.
CRDTs sorgen dafür, dass die Datensätze nach einer Bearbeitung konsistent sind, jedoch nicht unbedingt in Echtzeit.
Zustandsbasierte CRDTs funktionieren, indem der gesamte Datensatz an andere Replikate geschickt wird, um einen Merge durchzuführen. Bei Google Docs würde bei dieser Art das gesamte Dokument gesendet werden.
Operationsbasierte CRDTs senden lediglich die Operationen, die an einem Datensatz durchgeführt wurden. Jedes Replikat sorgt dann unabhängig voneinander dafür, dass alle Operationen angewendet werden. Am Beispiel von Google Docs würde bei operationsbasierten CRDTs nur die Änderung versendet werden. (Zeile x, Spalte y, „Hello” durch „Bye” ersetzen).
Operational Transformation (OT)
OT ist ebenfalls ein operationsbasierter Vorgang, der sich allerdings in der Konfliktlösung von CRDTs unterscheidet. Bei CRDTs werden Konflikte direkt beim Endgerät mathematisch gelöst. Bei OT können die Operationen transformiert werden, beispielsweise die Reihenfolge der Operationen. Dies kann beispielsweise durch Änderung der Reihenfolge der Operationen erfolgen. Für diesen Vorgang wird ein zentraler Server benötigt, um die Koordination zu übernehmen.
Fazit und Empfehlung
Die Synchronisierung von Front und Backend ist in der Webentwicklung ein wichtiges Thema. Es gibt keine Lösung die auf jeden Anwendungsfall passt. Stattdessen muss die richtige Kombination aus verschieden Ansätzen und Techniken genutzt werden um sie auf die spezifischen Anforderung einer Anwendung anzuwenden.
Die Kunst liegt darin, die Methoden nicht isoliert zu betrachten, sondern sie so zu kombinieren, dass Performance, Nutzerfreundlichkeit und Datenintegrität gleichermaßen gewährleistet sind.
Wenn Du vor einer solchen Entscheidung stehst, unterstützen wir Dich gerne. Wir bieten verschiedenste Schulungen und Beratungen zu verschiedenen Themen rund um die Softwareentwicklung.
Auch für individuellen Bedarf können wir Workshops und Schulungen anbieten.