Webentwicklung mit React: Event Streams im Frontend
Um sich schnell ändernde Daten in einem Webfrontend darzustellen, sind speziell angepasste Komponenten nötig. Wir zeigen Ihnen verschiedene Lösungen.
- Sebastian Springer
Typischer Einsatzzweck von React und anderen Single-Page-Application-Frameworks ist die Implementierung von Applikationen, die Daten anzeigen, erzeugen, modifizieren und löschen (Create, Read, Update, Delete). Multi-User-Anwendungen sind Teil eines größeren Verbundes, in dem sich an verschiedenen Stellen Änderungen ergeben. Das Frontend sendet dann Änderungen über HTTP an den Server, muss aber auch in der Lage sein, Änderungen vom Server zu empfangen, weil beispielsweise ein anderer Benutzer einen Datensatz bearbeitet hat.
Ein weiteres Szenario, bei dem der Server aktiv Änderungen an die angeschlossenen Frontends publizieren muss, ist, wenn die Datenquelle selbst Änderungen sendet, etwa ein Sensor oder ein externer Webservice. Temperatursensoren mit Wertanzeige lösen bei einem neuen Messwert ein Ereignis aus, das der Server zum Frontend sendet. Das Frontend zeigt den Wert dann an.
Die vom Server verursachten Änderungen erfordern es, die Architektur der Frontend-Applikationen anzupassen, da der Browser keine Kontrolle über den Eventfluss hat und die Daten wie gesendet verarbeiten muss. Sowohl Browser als auch Bibliotheken und Frameworks lösen das Problem unterschiedlich. Wir stellen Lösungen mit React und serverseitigen Event Streams vor.
Das war die Leseprobe unseres heise-Plus-Artikels "Webentwicklung mit React: Event Streams im Frontend". Mit einem heise-Plus-Abo können sie den ganzen Artikel lesen und anhören.