Interview mit Luca Mezzalira

State-Management in JavaScript: Was kann VueX?
Keine Kommentare

VueX ist eine State Management Library für das JavaScript-Framework Vue. Warum Sie es in Ihren Vue-Projekten einsetzen sollten, darüber sprachen wir mit Luca Mezzalira, Systemarchitekt bei DAZN und Google Developer Expert on Web Technologies.

Entwickler: Hallo Luca! Du stellst auf der iJS Conference 2018 das Projekt VueX vor. Kannst du uns kurz erklären, was VueX ist?

Luca Mezzalira: VueX ist ein Muster für die Zustandsverwaltung in Vue.js-Anwendungen. Man kann damit Code auf einfache, aber sehr effektive Weise strukturieren. Eine Webanwendung wird dabei in verschiedene Domänen aufgeteilt, um eine klare Separation of Concerns zu etablieren. Jedes Objekt erhält eine einzige, klar definierte  Zuständigkeit.

Entwickler: Wie genau funktioniert VueX?

Luca Mezzalira: VueX ist zunächst einmal ein Plug-in für Vue.js, das entwickelt wurde, um eine dezidierte Library für die Zustandsverwaltung von Vue.js-Anwendungen nutzen zu können. VueX umfasst mehrere Eigenschaften, die reaktiven Architekturen eigen sind, beispielsweise den unidirektionalen Datenfluss, die strikte Trennung der Belange und automatische Updates von DOM-Elementen über verschiedene Algorithmen, die von View-Libraries über das virtuelle DOM bereitgestellt werden.

Wie bei Projekten im Vue.js-Ökosystem üblich, gibt es auch für VueX eine einfache, aber sehr umfangreiche Dokumentation mit vielen Beispielen, die die Grundlagen dieser Library erklären.

Im Moment besteht das Pattern aus:

State

  • Zustand kann im strikten Modus nur durch Mutationen verändert werden.
  • Er kann nicht durch andere Teile einer Anwendung verändert werden.
  • Ein Zustand ist von jedem Teil der VueX-Anwendungen und auch von Vue.js-Komponenten aus zugänglich.

Getters

  • Getter exponieren berechnete Werte aus dem State und halten sie im Cache bereit, bis sie innerhalb des State geändert werden.
  • Getter werden innerhalb der Komponenten über berechnete Werte eingesetzt.

Actions

  • Actions werden durch Benutzerinteraktionen oder andere Aktionen getriggert.
  • Sie verwalten asynchrone Operationen.
  • Actions können andere Actions aufrufen, werden aber hauptsächlich zum Triggern von Zustandsmutationen verwendet.

Mutationen

  • Mutationen werden durch Actions aufgerufen.
  • Mutationen manipulieren den State direkt.
  • Nur Mutationen können den State im strikten Modus verändern.

Während der letzten VueConf in Amsterdam hat Evan You einige nette Änderungen an VueX angekündigt, die dieses Jahr implementiert werden sollen, um die Funktionsweise von VueX zu vereinfachen. Eine dieser Änderungen hat mit den Mutationen zu tun. Mutationen sollen aus der Library entfernt werden. Stattdessen werden die Actions den Zustand direkt ändern können, wie es bei anderen Zustandsverwaltungssystemen der Fall ist, zum Beispiel im MobX State Tree.

Entwickler: Bei welcher Art von Anwendung kommt VueX typischerweise zum Einsatz?

Luca Mezzalira: VueX kann in jedem Kontext verwendet werden, in dem Vue.js verwendet wird. Im Moment würde ich sagen, das sind hauptsächlich Webanwendungen. Aber Vue könnte auch in hybriden mobilen Anwendungen oder für die Entwicklung von SmartTV, Konsolen und Set-Top-Boxen eingesetzt werden.

Entwickler Was macht VueX zu einer guten Wahl für die Skalierung von Vue-Anwendungen?

Luca Mezzalira: Die größte Herausforderung beim Thema Skalierbarkeit in Frontend-Anwendungen ist nicht die Skalierung der Infrastruktur, sondern die Skalierung des Teams. VueX bietet eine konsistente und klare Möglichkeit, die elegante Vue.js-Basis zu verbessern und sie zu einer geeigneten und soliden Lösung für die Erstellung von Webanwendungen in großem Maßstab zu machen.

Jeder Entwickler kann das Pattern in wenigen Tagen, wenn nicht sogar Stunden, aufnehmen und sofort produktiv werden. Das Pattern macht es, dank des unidirektionalen Flows, zudem möglich, mehrere Teams, die auf der gleichen Codebasis arbeiten, ohne viel Kommunikationsaufwand zu koordinieren.

Das Debuggen von VueX-Anwendungen ist auch sehr einfach, da die Trennung von Belangen und die Prinzipien der Einzelverantwortung gut umgesetzt werden.

Entwickler: Was können die Teilnehmer aus deinem Vortrag auf der International JavaScript Conference mitnehmen?

Luca Mezzalira: Während meines Vortrags werde ich VueX vorstellen und erklären, wie reaktive Programmierung dabei hilft, VueX in unserer täglichen Arbeit in Vue.js-Anwendungen einzusetzen. Ich werde auch ein Beispiel für ein Kryptowährungs-Dashboard vorstellen, das ich entwickelt habe, um die Konzepte hinter VueX zu erklären.

Entwickler: Vielen Dank für dieses Interview!

Luca Mezzalira ist Systemarchitekt beim Unternehmen DAZN, Google Developer Expert für Web-Technologien, London JavaScript Community Manager und Autor des Buches Front-End Reactive Architectures. Auf der iJS Conference London 2018 ist er mit den Talks VueX: Vue.js applications at scale und Streams, Streams, Streams vertreten.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -