Angular, RxJS und der Fluxkompensator

Reactive Programming mit RxJS

Image for post
Image for post

EINLEITUNG

Der Weg von AngularJS (=Version 1) zu Angular (=Version 2+) war Anfangs kein leichter. Das Framework wartete mit einer neuen Form der asynchronen Programmierung names Reactive Programming und dem zugehörigen Framework RxJS auf. Gerade noch warf man fröhlich mit Callbacks und Promises um sich, da war das schon wieder ein alter Hut — Observables und Subjects sind nun en vogue. Mittlerweile fällt mir der Umgang damit leicht, doch zu Anfangs war es schwer. Daher widmet sich dieser BlogPost einigen Anwendungsfällen von RxJS innerhalb einer Angular Anwendung, welche dem WebWorker in seiner täglichen Arbeit des Öfteren begegnen. Dabei ist es wichtig zu verstehen, dass alle Abläufe zeitabhängig und nebenläufig sind. So passieren gewisse Dinge vor anderen Dingen obwohl man es so nicht erwartet. Ein Gespür für die Zeit, Zukunft und Vergangenheit ist dabei entscheidend … Doch was zum Geier ist ein Gigawatt?

GRUNDLAGEN VON RXJS

Das Thema ist sehr komplex und wer noch nie damit gearbeitet hat, dem wird das Folgende auch nicht groß weiterhelfen, daher am besten in aller Ruhe zuerst ein Buch wie RxJS in Action lesen. Nichtsdestotrotz hier die

  • Der Sender sendet eine oder mehrere Nachrichten innerhalb eines Zeitraumes.
  • Ein Empfänger (Subscriber) kann sich beim Sender mittels zum Empfang von Nachrichten registrieren.
  • Der Empfänger erhält beim subscriben eine Anmeldung (Subscription) mit derer er sich durch Subscription.unsubscribe() vom Empfang neuer Nachrichten abmelden kann.
  • Ein Sender () sendet mittels eine Nachricht an alle registrierten Empfänger.
  • Damit ein Empfänger nicht selbst einen Sender “missbrauchen” und einfach Subject.next(bla) senden kann, gibt man i.d.R. das Subject nicht an den Empfänger heraus sondern nutzt Subject.asObservable() (Kapselung).
  • Ein Observable<Typ> ist im Prinzip ein Subject dessen API nur Empfang (subscribe) anbietet.
  • Hat ein Sender seine letzte Nachricht gesendet, sendet er i.d.R Subject.complete().
  • Observables lassen sich mittels Operatoren wie , oder kombinieren.
  • Zeitpunkt des Sendens der ersten Nachricht (Subject).
  • Anzahl von Nachrichten die vom Sender gesendet werden (Subject).
  • Anzahl von Nachrichten die man empfangen möchte (Subscriber).
  • Zeitpunkt der Abmeldung vom Empfang (Subscriber).
  • Gewünschtes Verhalten beim Subscriben, wenn bereits zuvor Nachrichten gesendet wurden.
Image for post
Image for post

ANGULAR KOMPONENTEN LEBENSZYKLUS

Nachdem wir nun wissen, wie RxJS prinzipiell funktioniert, müssen wir auch verstehen wie der Angular Komponenten Lebenszyklus funktioniert. Viele kennen den ‘Konstruktor’ aus anderen Programmiersprachen wie Java. Doch so wie auch Java mit JSR-250 gewisse Lifecycle Hooks wie @PostConstruct() und @PreDestroy() anbietet, so implementiert Angular ein ähnliches Konzept für seine Komponenten.

Image for post
Image for post
‍vereinfachter Angular Komponenten Lebenszyklus

FALL 1: ZEITVERSATZ BEIM LADEN VON INITIALEN DATEN

Dieser Fall begegnet einem früher oder später in jedem Projekt. Nehmen wir an unsere Anwendung hat eine Config die beim Initialisieren der Angular Anwendung vom Backend geladen werden soll und künftig im ApiService zur Verfügung stehen soll.

Image for post
Image for post
‍’naiver’ Aufbau Fall 1
Image for post
Image for post
‍Zeitversatz Problematik

ZEITPUNKT DES SUBSCRIBENS UND DAS VERHALTEN VON RXJS SUBJECTS

Wir haben bereits einleitend den “Zeitpunkt des Subscribens” als wichtigen Faktor beschrieben. In der Regel erhält ein Subscriber nur die Nachrichten, die gesendet werden während er subscribed ist. Dies gilt wenn man die Klasse Subject verwendet. Will man dass der Empfänger auch die Nachrichten empfängt, die gesendet wurden, bevor er sich subscribed hat, so sollte man die Klassen BehaviorSubject und ReplaySubject nutzen. Wir erklären deren Verhalten kurz anhand folgender Darstellungen.

Image for post
Image for post
‍ReplaySubject mit zwei Subscribern
Image for post
Image for post
‍BehaviorSubject mit zwei Subscribern

ZURÜCK ZU FALL 1: REPLAYSUBJECT UND FLATMAP TO THE RESCUE

Nach diesem Exkurs zur Thematik des Subscribe-Zeitpunktes und den verschiedenen Subject-Typen, sollten wir nun in der Lage sein den für uns passenden auszuwählen.

FALL 2: UNSUBSCRIBEN IM DEKONSTRUKTOR MIT TAKEUNTIL OPERATOR

Wir haben bisher nur das Subscriben des Empfängers beim Sender behandelt. Doch was ist, mit dem Unsubscriben? Eine gute Frage. In der Angular Doku taucht an mehreren Stellen auf ‘Use ngOnDestroy() to unsubscribe Subscriptions’. Das kann man auf naive und elegante Weise tun. Nehmen wir an, wir haben eine Komponente, welche auf ScrollEvents reagiert und auch die neusten Aktienkurse per WebSocket gepushed bekommt. Kurz gesagt, die Komponente hört auf zwei Sender die über die Zeit mehrfach Nachrichten senden.

FALL 3: EXPLIZITE VERWENDUNG VON TAKE(ANZAHL)

Wie bereits in ‘Fall 2’ beschrieben finde ich den Ansatz mit dem takeUntil Operator sehr elegant. Doch auch dort, wo man weiß, dass man nur an der ersten Nachricht des Sender interessiert ist und man eigentlich weiß, dass der Sender nur einmalig sendet und sich dann completed, ist es wichtig explizit einen Operator zu verwenden, damit der Code lesbarer wird.

FAZIT

Wir haben gezeigt, was Subjects, Subscriptions und Observables sind. Wie sie vielfältig eingesetzt und mit Operatoren verknüpft werden können und wie man dieses Wissen richtig in Kombination mit dem Angular Komponenten Lebenszyklus nutzt. Interessant sind auch Projekte wie cartant/rxjs-marbles die das Testen von solchen Zeitversatz-Problemen erleichtern. Auch hilft es die interaktiven Diagramme auf rxmarbles.com zu nutzen, um sich Operatoren verständlich zu machen. Aber vergesst nicht die benötigten 1.12 GigaWatt für den Fluxkompensator!

comsystoreply

Innovation through insight.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store