React “reactive“ machen

Vor nicht allzu langer Zeit hatte ich mit einem Kollegen eine lebhafte Diskussion darüber, welche Frontend-Technologie wir für die Migration eines bestehenden Projekts einsetzen sollten. Das Frontend basiert aktuell auf Angular, während das Backend aus mehreren Java-basierten Microservices besteht – aber das ist hier eigentlich nicht relevant.

Die zentrale Herausforderung: Das neue Frontend muss Echtzeit-Datenströme über MQTT darstellen können.

Mein Kollege brachte ein Argument ein, das für ihn absolut entscheidend war: „React ist nicht reaktiv.“

Nicht der einzige Grund für seine Präferenz, aber dieser Satz ist mir im Kopf geblieben und wurde zum Ausgangspunkt dieses Artikels.

Ja, React ist nicht reaktiv.
Aber was bedeutet das eigentlich?

Reaktive Programmierung ist ein deklaratives Paradigma, das sich um Datenströme dreht. Ein System reagiert auf Ereignisse, anstatt aktiv nach Änderungen zu fragen. Anders gesagt: Die Anwendung möchte informiert werden, wenn sich der State ändert – ohne ständig nachfragen zu müssen, etwa durch periodische GET-Requests an eine REST API. REST wurde nicht dafür gebaut. Dafür gibt es Message Broker wie MQTT, Kafka oder WebSockets. (Okay, ich schweife schon wieder ab…)

Was mich an der Aussage meines Kollegen getriggert hat, war die implizite Annahme, dass React mit Datenströmen nicht umgehen kann. Meine Antwort? „Challenge accepted. Ich probiere es aus – hold my beer."

Weiterlesen (auf Englisch): Make React Reactive