#frontend #opensource #webentwicklung #javascript #vuejs

Einfachere Vue-Entwicklung mit Vue States und Vue History

Ein neues State-Management-System für Vue.js, und noch ein Logging-Plugin obendrauf

In modernen Frontend-Applikationen wird für das State-Management häufig ein eigenes System eingesetzt, das nicht nur Logik aus dem UI-Layer löst, sondern auch Tooling und Analysierbarkeit bietet. Das Problem mit bestehenden Lösungen wie Vuex ist, dass vor allem große Applikationen schwer zu pflegen und zu analysieren sind. Auch werfen die Unterscheidungen zwischen State/Getters und Mutations/Actions immer wieder Fragen auf.

Basierend auf unserer Erfahrung mit Vue/Vuex und komplexen Frontend-Applikationen hat Johannes (Lamberts) mit Vue States und Vue History zwei neue Plugins entwickelt, die in ihrem Zusammenspiel die Komplexität des State-Managements und des Debuggings auf neue Art und Weise lösen.

In aller Kürze – die technischen Details beschreibt Johannes in A New State Management for Vue.js –, Vue States erlaubt über das Provide-Inject Pattern sowohl die Abbildung von globalen, als auch von lokalen States. Die Beschreibung über Vue-Komponenten erlaubt dabei nicht nur einen einfachen Einstieg, sondern auch eine nahtlose Integration mit der Applikation. Vue History hingegen erzeugt vollautomatisch Traces von aufgerufenen Methoden. Durch die Abbildung von asynchronen Prozessen, Fehlern und von verschachtelten Aufrufen können selbst komplexe Prozesse betrachtet werden. Von beiden Plugins profitieren besonders erfahrene Teams, die mittelgroße bis große Applikationen bauen und die Implikationen des Provide-Inject Patterns einschätzen können.

Vue States
Wann Vue States sinnvoll ist.

Beide Plugins sind ab sofort frei verfügbar:

Wir und vor allem Johannes freuen uns auf Feedback aus der Vue-Community!

(Wer eine persönliche Vorstellung von Vue States und Vue History erleben will, hat dazu je nach Abstimmung eine Gelegenheit auf der JSUnconf Hamburg, wo beides ggf. direkt vorgestellt wird.)