Single Page Applications mit Vue.js: Angulars kleine, flotte Schwester
Das Projekt von Jana zum myInnovationDay:
Nachdem ich am letzten myInnovationDay (Hier) in Angular.js hineingeschnuppert habe, war dieses Mal das neuere Vue.js Framework an der Reihe. Vue.js ist stark von Angular inspiriert, versucht aber gleichzeitig die Kritik, die an Angular geübt wird, aufzugreifen. Es ist sozusagen Angulars “kleine Schwester”.
Mir hat das Framework auch auf Anhieb sehr viel besser gefallen, weil es weniger strikte Vorgaben zur Architektur der App erzwingt und gleichzeitig eine sehr einfache Struktur vorschlägt. Im folgenden will ich das etwas genauer erklären.
Viele kleine Bausteine: Modularisierung
Ein zentraler Aspekt von Frontend-Frameworks ist es, Funktionen bereitzustellen, die es ermöglichen, einzelne Blöcke der Anwendung getrennt voneinander zu entwickeln. Dies bietet Übersichtlichkeit und begrenzt so Fehlerquellen in ihrer Reichweite. Außerdem wird ihre Identifizierung leichter gemacht. Vue.js nennt diese Bausteine "components". Wie auch bei Angulars "custom directives", können sie HTML Markup, CSS Styling und JavaScript Logik zusammenfassen.
Vue.js geht allerdings soweit, dass es ermöglicht, all diese drei Teile eines Components in einer Datei zusammenzufassen und geschlossen als Modul zu importieren. Diese extreme Modularisierung ist wohl Geschmackssache, habe ich aber bei kleinteiligen Modulen als sehr angenehm empfunden, weil immer alle Informationen auf einen Blick verfügbar sind.
Das Herz des Biests: Application Layer und Components
Natürlich müssen aber diese vielen Einzelteile miteinander kommunizieren, um eine funktionierende Anwendung zu stellen. Hier übertrifft Vue.js' Modell das von Angular um Längen in Klarheit, bei gleichzeitiger Flexibilität und Power. In Angular ist die Kommunikation zwischen Modulen, oder zur übergeordneten Elternanwendung umständlich über injezierte Module abgelaufen, die mir undurchsichtig blieb.
Vue.js hingegen hat ein zwei Wege Modell: Elterncomponents (oder die Anwendung selbst) geben ihren Kindcomponents Daten über sogenannte "props" weiter, Schnittstellen, die nicht direkt an das Elternelement gekoppelt sind. Kindcomponents kommunizieren mit ihren Eltern oder anderen Components über Events, die ebenso lose an die übergeordnete Anwendungsinstanz gekoppelt sind.
Dies bedeutet, dass Components ohne Änderung zwischen Anwendungen ausgetauscht werden können. (Ich vermute, dass dies auch bei Angular umzusetzen ist, aber dennoch ist Vue.js hier in seiner einfachen Zugänglichkeit kaum zu übertreffen.)
Fazit: Vue.js macht Spaß
Wenn man sich ein paar wenige Stunden mit der (großartigen) Vue.js Dokumentation beschäftigt, kann man schon loslegen und die Möglichkeiten des Frameworks für eine komplexe JavaScript-Anwendung ausnutzen. Gleichzeitig erscheint es mir aufgrund der starken Modularisierung und klaren Kommunikationsmodells zwischen den Components gut skalierbar zu sein.
Für Vue.js muss (im Vergleich zu Angular) nur wenig neue Syntax gelernt werden und viele Funktionen sind nicht von Haus aus Teil des Frameworks, sondern werden absichtlich der Ergänzung durch weitere, spezialisierte Libraries überlassen. Vue.js macht also, meinem Eindruck nach, seinem Ruf als schnelles, leichtes, und flexibles Framework alle Ehre.