© BAIVECTOR/Shutterstock.com
Advanced Vue - Teil 1: Datenfluss und Dependency Injection

Durch-, Rum- oder Reinreichen?


Was soll denn dieser Titel schon wieder? Wie sich im weiteren Verlaufe dieses Beitrags herausstellen wird, handelt es sich durchaus um eine passende Etikette, um den ersten Teil unserer Serie über fortgeschrittene Themen rund um Vue einzuleiten. In diesem Beitrag geht es um die Frage der Kommunikation und des Datenflusses zwischen den Komponenten einer Vue-Anwendung und wie Dependency Injection hier eingesetzt werden kann.

Serie: Advanced Vue

Teil 1: Datenfluss und Dependency Injection

Teil 2: Mit Vue, React und ES Modules Microfrontend-Architekturen realisieren

Teil 3: Von der Anatomie einer Vue-Komponente hin zu Render Functions

Zunächst stellt sich die Frage, was es denn eigentlich ist, was hier durch-, rum- oder reingereicht werden soll. Das sind natürlich die Daten. Bei Geschäftslogik passiert das eher selten. Daten werden in modernen auf JavaScript setzenden Single-Page-Anwendungen immer weniger als Klassen und viel häufiger in Form von Funktionen (Stichwort „funktionale Programmierung“) realisiert. Organisiert werden sie über den Standard ES Modules in einer Ordnerstruktur. Über das import-Statement schließlich kann Funktionalität ganz leicht hinzugeholt und verwendet werden.

Aus anderen Programmiersprachen wie Java oder .NET kennt man Dependency Injection (DI) als Mittel, um sich Geschäftslogik, die aus einer ganzen Reihe voneinander abhängiger Bausteinen (Klassen) besteht, initialisieren und erzeugen zu lassen. Hier kann man zum Beispiel einen Service nennen, der ein DAO (Data Access Object) verwendet und auf eine Datenbankverbindung angewiesen ist, um letztendlich mit der Datenquelle zu kommunizieren. Es werden komplexe, voneinander abhängige Bausteine initialisiert, bereitgestellt und „reingereicht“ beziehungsweise injiziert, um sie letztendlich zu benutzen. Das ist die Anforderung, bei der Dependency Injection seine vollen Stärken ausspielt.

In einer Vue-Anwendung wird man eher weniger auf diese Anforderung stoßen. Wie eingangs erwähnt, reicht in den meisten Fällen der einfache Import der gewünschten Funktionalität, und wenn in einer Funktion doch mehr Abhängigkeiten benötigt werden, sieht man in der Praxis eher Fabrikmethoden als typisches DI.

Jetzt stellt sich natürlich die berechtigte Frage: Warum dann diesem Thema einen ganzen Beitrag widmen? Hier ist festzuhalten, dass es auch in JavaScript durchaus Situationen gibt, in denen DI hilfreich ist und auch genutzt wird. Zum Beispiel im Umfeld von Unit Testing. Beim Erzeugen von Mock-Objekten...

Neugierig geworden?

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