RxJS Workshop mit André Staltz

An der UphillConf besuchten Angela Stempfel und ich dieses Jahr nicht die Konferenz sondern einen eintägigen Workshop, der uns eine Einführung in RxJS gab. Dieses Framework verwenden wir bereits in einem Kundenprojekt und mit diesem Workshop wollten wir unser Wissen vertiefen.

Folgende Themen standen auf dem Programm des Workshops:

  • Rx Observable, Observer, Subscription
  • Converting Things to Observables
  • Basic Operators
  • Debugging Techniques
  • Subjects and Multicasting

Zu jedem der obenstehenden Themen werden wir in diesem Blogpost kurz einen Einblick geben:

Rx Observable, Observer, Subscription

Observable und Observer sind Interfaces, die folgende Methoden zur Verfügung stellen:

Im Gegensatz zu einer Function, die einen Output sofort liefert, gibt ein Observable mehrere Outputs asynchron zurück. Das Observable stellt den Producer dar. Ein Observer startet mittels subscribe eine Ausführung, die mehrere Outputs asynchron liefert. Er ist der Consumer.

Allgemein kann gesagt werden, dass das Observable der Producer ist, der Werte generiert und der Observer der Consumer, der diese konsumiert.

Dies sind die 2 wichtigsten Konzepte in RxJs.

Folgendes Beispiel wurde anhand einer Übung von André gezeigt:

Es wird ein neues Observable erstellt, das alle Werte eines Arrays zum Observer liefert. Wichtig ist einerseits das subscriber.complete(), damit der Observer mitkriegt, wann die Verarbeitung abgeschlossen ist, sowie das subscribe, damit der Code auch ausgeführt wird.

Observable Grammatik

Die Grammatik des Observables wird mit folgender Regular Expression definiert:

Die obenstehende Regular Expression beschreibt, wie sich ein Observable verhalten sollte. Sie stellt den „Contract“ auf. Auf kein oder mehrere next folgt kein oder ein error oder complete. Nach einem error oder complete wird nichts mehr ausgeliefert.

Subscription

Eine Subscription ist ein Objekt, das die Beziehung zwischen Observer und Observable repräsentiert. Die Subscription hat eine wichtige Methode unsubscribe, die diese Beziehung auch wieder auflöst. Das heisst, dass die Ausführung des Observables für diesen Observer beendet wird.

Converting Things to Observables

Es gibt verschiedene Arten, ein Observable zu erstellen. Folgendes Beispiel erstellt ein Observable, das ein „hi“ an jeden Subscriber schickt:

Observables können somit mit new Observable erstellt werden. Meistens werden diese aber mit den zur Verfügung gestellten Funktionen of, from, interval usw. erstellt. Dazu einige Beispiele:

  • Erstellung eines Observables von einem Event:
  • Erstellung eines Observables, das in einem Intervall von 1s aufsteigende Zahlenwerte zurückliefert.
  • Erstellung eines Observables mit der Funktion of

Basic Operators

Operatoren sind Funktionen, die auf ein bestehendes Observable angewendet werden und dabei ein neues Observable auf Basis des bestehenden erstellen. Das bestehende Observable bleibt unverändert!

Auf dem Kurs-Programm standen folgende Gruppen von Operators:

  • Transformation
  • Filtering
  • Combination
  • Multicast
  • Flattening
  • Misc

Auf alle Gruppen von Operators einzugehen, würde den Rahmen dieses Blogposts sprengen. Hier deshalb ein Beispiel aus dem Kurs mit 2 Operators aus der Gruppe Filtering und 1 Operator aus der Gruppe Transformation:

filter filtert Werte und nimmt in obigem Beispiel jeweils nur gerade Nummern. take beschränkt die Verarbeitung auf die ersten 5 Werte. map transformiert die Werte und multipliziert sie mit 100. Das ergibt folgenden Output:

Marble Diagrams

Damit ersichtlich wird, wie sich Observables verhalten und wie sich Operators auf die Ausführung auswirken, werden sogenannte Marble Diagrams eingesetzt. Diese helfen enorm für das Verständnis, was wie abläuft.

Obiges Beispiel lässt sich wie folgt darstellen:

Eine Zeile stellt jeweils die Werte eines Observables dar, dann folgt der Operator und auf der nächsten Zeile sieht man die Auswirkung des Operators. Da ein Operator ein neues Observable erstellt, kann dieses wiederum als Input für den nächsten Operator verwendet werden usw.

Debugging Techniques

Wenn mehrere Operators verknüpft werden und beim Output Fehler auftreten, gibt es eine einfache Möglichkeit, ein wenig Licht ins Dunkel zu bringen. Der tap Operator kann an mehreren Punkten in der Verknüpfung eingefügt werden. Er bietet die Möglichkeit, beispielsweise ein Console Log Statement zu platzieren und den aktuellen Wert der Verarbeitung auszugeben.

Beispiel:

Der Output sieht wie folgt aus:

Subjects and Multicasting

Ein Subject ist ebenfalls ein Observable, das man subscriben kann. Es bietet aber die Möglichkeit, Werte per Multicast an mehrere Observers zu liefern. Aus Sicht eines Observers kann nicht unterschieden werden, ob die Werte aus einem normalen unicast Observable kommen oder von einem Subject.

Wenn sich ein Observer bei einem Subject subscribed, wird im Gegensatz zu einem unicast Observable keine neue Execution gestartet. Der Observer reiht sich einfach in die Liste der Observer ein und erhält von diesem Moment an ebenfalls Werte. Hier spricht man etwa auch von einem „Hot subscribe“ im Gegensatz zum „Cold subscribe“ beim Unicast.

Beispiel:

Ein Subject gibt einem die Möglichkeit, aus einem unicast Observable ein multicast Observable zu machen, indem man das Subject beim Subscriben als Argument übergibt.

Beispiel:

Fazit

André Staltz hat uns auf interessante, einfach verständliche und sympatische Art RxJS näher gebracht. Dank einer guten Mischung aus Theorie und selbständigen Übungen war der Tag auf dem Berner Hausberg sehr kurzweilig. Der Workshop hat uns geholfen, den Code unseres Frontend-Spezialisten besser zu verstehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.