© metamorworks/Shutterstock.com
Datenübertragung vom Client zum Server bis zur Datenbank

Streaming von Anfang bis Ende


Streaming ist für Entwickler keine neue Technologie. Zahlreiche Kernmodule wie Node.js basieren auf Datenströmen. Auch clientseitig wird beispielsweise mit der Bibliothek RxJS gearbeitet. Dieses flexible Prinzip kann nicht nur im kleinen Frontend für die Übertragung von Daten vom Server genutzt werden, sondern auch auf gesamter Strecke zwischen Client und Server bis hin zur Datenbank.

Datenströme sind ein Thema, das Entwickler schon sehr lange beschäftigt. Klassische Beispiele sind Pipes. Hier kommen Daten aus einer Quelle, einem beliebigen Kommando, und werden an ein weiteres Kommando weitergereicht. Diese Pipeline kann beliebig lang werden. Jedes Element der Pipeline kümmert sich dabei um einen ganz bestimmten Aspekt. Das Konzept von Datenströmen begegnet uns nicht nur auf Systemebene, sondern hat auch an zahlreichen Stellen in der Webentwicklung Einzug gehalten. Prominentestes Beispiel: Das HTTP-Protokoll. Client und Server haben die Möglichkeit, Nachrichten zu streamen. Dabei können nach einer initialen Anfrage mehrere Pakete, die zur gleichen Nachricht gehören, übertragen werden. Noch einen Schritt weiter geht Node.js. Die Plattform bietet ein Stream-Modul, mit dem sich les- und schreibbare Datenströme implementieren lassen. Dieses Modul bildet die Grundlage für zahlreiche weitere Kernmodule, aber auch Pakete von Drittanbietern. Sie können beispielsweise Daten in eine Datei streamen oder den Inhalt einer Datei über einen Stream verarbeiten.

Clientseitig finden Sie gerade bei den modernen reaktiven Frameworks immer wieder Ansätze von Datenströmen zur Verarbeitung von Informationen. Das offensichtlichste Beispiel ist hier die Bibliothek RxJS. Mit ihr können Sie asynchrone Datenströme modellieren und mit Hilfe von Operatoren verarbeiten. Diese Bibliothek bildet einen wichtigen Baustein von Angular. Hier sind Teile des Frameworks wie Reactive Forms, der HTTP-Client oder der Router mit RxJS umgesetzt und erlauben, dass Sie auf Ereignisse innerhalb der Applikation reagieren. Hier stellen sich die folgenden Fragen: Wenn schon ein Großteil der beteiligten Komponenten einer Webapplikation Streaming unterstützt, wie können Sie dieses Prinzip in Ihrer Applikation ausnutzen, was müssen Sie beachten und welche Vor- und Nachteile bietet das Streaming? Mit diesen Aspekten beschäftigen wir uns auf den folgenden Seiten.

Die Idee: Streaming vom Client bis zur Datenbank

Die Hauptaufgabe von Frontend-Bibliotheken und Frameworks wie Angular, React und Vue ist es, Daten zu präsentieren und einem Benutzer Interaktionsmöglichkeiten zu bieten. Sobald sich die Daten ändern, sorgt die Software dafür, dass diese Änderungen möglichst effizient zur Darstellung gebracht werden. Das Ziel ist hierbei eine nahezu verzögerungsfreie Visualisierung. Die Hersteller der Lösungen betreiben großen Aufwand, um ein Maximum an Performance zu erreichen. Dieses Potenzial kann jedoch nicht ausgeschöpft werden, wenn die Änderungen nicht oder nur zeitverzögert ankommen. Also ist die Idee, einen durchgängigen Datenstrom vom Client über den Server bis hin zur Datenbank zu implementieren. Die einzelnen Bausteine für eine solche Umsetzung liegen in Form der verschiedenen Technologien und Bibliotheken bereits seit mehreren Jahren vor, werden jedoch nur selten konsequent von Ende zu Ende eingesetzt.

Eine normale Single-Page-Applikation besteht im Kern aus einem Frontend, einem Backend und einer Datenbank. Die Ausgestaltung dieser Elemente unterscheidet sich natürlich von Applikation zu Applikation und wird von den verwendeten Sprachen und Bibliotheken stark beeinflusst. Im konkreten Fall setzen wir für das Frontend auf React, das Backend wird in Node.js umgesetzt und die Datenbank ist PostgreSQL (Abb. 1).

springer_streaming_1.tif_fmt1.jpgAbb. 1: Überblick

Das Frontend: reaktive Frontends mit React

Die meisten Single-Page-Applikationen lassen sich auf ein einfaches und grundlegendes Muster reduzieren. Der Zweck einer solchen Applikation ist es meist, Daten zu erzeugen, sie zu präsentieren, dem Benutzer die Möglichkeit zu bieten, die Daten zu modifizieren und auch wieder zu löschen, in Kürze: CRUD. Moderne Frontend-Lösungen bieten zum Umgang mit dieser Art der Aufgabenstellung eine Vielzahl von Hilfsmitteln. Und so ist es letztendlich eine Frage Ihres persönlichen Geschmacks, auf welche konkrete Implementierung Sie setzen. Der grundlegende Aufbau ähnelt sich. Den Kern des Frontends in unserem Beispiel bildet eine React-Applikation. Sie besteht aus einem Baum von Komponenten. Diese Bausteine stellen die einzelnen Teile der Applikation dar und finden sich in der Regel als sichtbare Elemente der grafischen Oberfläche wieder. Komponenten können von einem einfachen Button bis hin zu einer ganzen Sammlung einzelner Komponenten, wie bei einem Formular, alles sein. Interagiert ein Benutzer über Maus, Tastatur oder Touch mit der Oberfläche, werden Events ausgelöst. Ein wichtiges Merkmal solcher Events ist, dass sie nicht nur einmal, sondern kontinuierlich auftreten können. Sie können im weitesten Sinn die Benutzerinteraktion also als einen kontinuierlichen Event Stream ansehen, mit dem Sie umgehen müssen. Auf die Events reagieren Sie mit Funktionen, Event Handler, die im Kontext der Komponente ausgeführt werden. Der Zustand der Komponente wird in ihrem lokalen State festgehalten. Sobald sich der State ändert, wird die Komponente neu gezeichnet und die Änderungen werden dem Benutzer angezeigt. Dieses Prinzip funktioniert jedoch nicht nur auf der Ebene einzelner Komponenten, sondern auch mit ganzen Komponententeilbäumen in Ihrer Applikation. Hier folgt React einem Prinzip, das als „Lifting State Up“ bezeichnet wird. Teile oder gar der gesamte lokale State einer Komponente wird in eine Elternkomponente verschoben und über Props an die Kindkomponente übergeben. Die Props einer Komponente sind vergleichbar mit den Parametern einer Funktion. Sie können das Verhalten und Aussehen einer Komponente beeinflussen. Das Verschieben des States nach oben im Baum wird erforderlich, wenn mehrere Komponenten auf bestimmte Aspekte des States zugreifen müssen und Sie sicherstellen möchten, dass die Informationen in Ihrer Applikation konsistent sind. Auch bei einer Änderung der Props wird die Komponente neu gezeichnet. Grundsätzlich ist das Frontend einer Single-Page-Applikation so konzipiert, dass es auf den Benutzer reagiert.

Die Problemstellung: kontinuierliche Datenströme bis zum Server

Ihren reaktiven Charakter kann eine React-Applikation natürlich nicht vollständig leugnen. Es ist jedoch häufig so, dass sich die Arbeit mit den Eingaben eines Benutzers auf die reine Implementierung von Event Handlern zur Manipulation des States beschränkt. An dieser Stelle gibt es deutlich elegantere Lösungsansätze, bei denen der Streamingcharakter des Frontends deutlich besser erhalten bleibt und sogar noch etwas mehr herausgearbeitet werden kann.

Die Probleme enden jedoch an dieser Stelle noch nicht, sondern werden eher mehr, je weiter Sie in die Richtung der Serverschnittstelle gehen. In den meisten Fällen kommt...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang