Interview mit Max Gallo

State Management in JavaScript: Wie funktioniert MobX?
Keine Kommentare

Mit dem MobX State Tree lässt sich der Zustand von JavaScript-Anwendungen verwalten. Wie genau das geht, und wie sich MobX von anderen State-Management-Systemen wie Redux unterscheidet, haben wir mit Max Gallo, Software-Entwickler bei DAZN und Sprecher auf der International JavaScript Conference 2018 besprochen.

Die Fragen stellt Niko Köbler für entwickler.de

Niko Köbler: Du sprichst auf der International JavaScript Conference 2018 über den MobX State Tree. Das klingt ziemlich interessant! Ich bin ja selbst erfahrener React-Entwickler, kenne mich allerdings nur mit Redux aus, wenn es um den Zustand von Applikationen geht. Kannst du erst einmal kurz erläutern, worin sich MobX von Redux unterscheidet und was daran besonders ist?

Max Gallo: Der größte Unterschied zwischen Redux und MobX liegt darin, dass Redux auf dem Konzept der Unveränderlichkeit beruht, also auf unveränderlichen Zuständen. MobX hingegen arbeitet mit dem Konzept der veränderlichen Zustände und verwendet dazu Observables. Eines der wichtigsten Alleinstellungsmerkmale von MobX ist außerdem, dass man damit auf ähnliche Weise Zugang zum Konzept der reaktiven Programmierung hat wie in React.

Wenn man ein Property ändert, wird die Komponente neu gerendert, ohne dass man eine einzige Zeile Code dafür geschrieben hat. Wenn man in MobX einen Wert im Zustand ändert, wird die Komponente neu gerendert (wenn es ein Observer ist). Komponenten reagieren also auf Änderungen im observable Store. Zuerst fühlt sich das „magischer“ an als in Redux, wo man den gesamten Flow manuell schreiben muss. Als ich dann aber nach meinem MobX-Projekt wieder mit Redux gearbeitet habe, war meine erste Reaktion: Warum muss ich eigentlich diesen ganzen Code schreiben?

Niko Köbler: Welche Rolle spielt der MobX State Tree dabei? Die Website des Projekts auf GitHub sagt, dass MobX „opinionated“ – also eigenwillig oder speziell – sei. Worin unterscheidet sich der MobX State Tree also von anderen Frameworks?

Max Gallo: MobX ist selbst erst einmal nicht opinionated, da man es auf verschiedene Weisen und mit verschiedenen Ansätzen nutzen kann. Der MobX State Tree ist einer dieser Ansätze und ist insofern eigenwillig, als er die Erklärung dafür enthält, wie die Daten gemanagt werden. Das grundlegende Konzept sind die Trees, auch Stores genannt: Sie enthalten das Modell, in das mehr Trees verschachtelt werden können, die Actions und die Views.

Dieser Ansatz unterscheidet sich stark von Redux, wo Actions und Model normalerweise nicht so nah beieinander liegen. Die Daten im Tree sind stark typisiert, serialisierbar und veränderlich. Das Model wird über eine Action aktualisiert, und die Daten werden durch die Views abgeleitet. Die React-Komponenten reagieren auf Änderungen, die in einem bestimmten Store verfügbar sind, der explizit deklariert wird. Man muss hervorheben, dass man hier ein eingebautes Hot Module Replacement, Time Travelling und Lifecycle Methods für die Trees zur Verfügung hat.

International PHP Conference

Testing React Applications

by Hans-Christian Otto (Suora GmbH)

Building a Robo-Army with Angular

by Sebastian Witalec (Progress)

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Niko Köbler: Mit welchen UI Frameworks außer React kann man MobX verwenden?

Max Gallo: Diese Frage kann ich nicht wirklich beantworten, da ich MobX immer mit React verwendet habe. Ich weiß aber, dass es Projekte gibt, die darauf abzielen, MobX auf Angular oder Vue.js zu bringen. Mir fehlen da aber die Erfahrungswerte.

Niko Köbler: Ihr habt bei DAZN gerade Eure Website komplett neu geschrieben. Welche Herausforderungen sind dabei aufgetreten, die Ihr mit MobX und dem MobX State Tree gelöst habt?

Max Gallo: Die Neufassung des Frontends von DAZN war aus einer Reihe von Gründen notwendig, aber das State-Management-System gehörte nicht dazu. Wir wussten, dass wir uns für React entscheiden wollten, also mussten wir zwischen MobX und Redux wählen. MobX war vor einem Jahr weniger populär, aber wir haben bereits die Möglichkeiten davon gesehen.

Gerade für ein Team ist MobX eine sehr schöne Bibliothek, da sie recht einfach zu verstehen ist und einen dazu bringt, reaktiv zu programmieren, ohne dass man sich dessen bewusst ist. Wir haben dabei gelernt, dass es superleicht zu testen ist und einige Dinge wie das Routing auch ohne die Hilfe einer anderen Bibliothek problemlos möglich sind.

Niko Köbler: Das alles klingt sehr interessant und hat mich neugierig gemacht, MobX State Tree für eines meiner nächsten Projekte zu testen. Hast du weitere Empfehlungen für den Einstieg und einige Tipps und Tricks, um schnelle Ergebnisse zu erzielen?

Max Gallo: Ich denke, ein Konzept von MobX ist sehr wichtig: „Alles, was sich aus dem Anwendungszustand ableiten lässt, sollte abgeleitet werden.“ Das sollte man sich groß ausdrucken und an die Wand hängen! Im MobX State Tree haben wir am Anfang alle möglichen Daten in Modellen gespeichert. Aber bald haben wir erkannt, dass eine große Menge dieser Daten einfach aus dem Modell abgeleitet werden konnte.

Haltet also das Modell klein und verwendet Views, um berechnete Werte zu erzeugen. Auf diese Weise muss man sich nur noch darum kümmern, die Aktionen aufzurufen und das Modell zu modifizieren. Dann holt Euch ein Bier und schaut zu, wie alles von selbst passiert: zuerst kommen die berechneten Werte (Views), dann schließlich die React-Komponenten. Wir haben noch nicht über Geschwindigkeit geredet, aber soviel dazu: Schnappt Euch Euer Bier möglichst schnell!

Niko Köbler: Vielen Dank für dieses Interview!

I’m a pasta eater biped working at DAZN with hands-on experience as a Full Stack Developer, iOS Developer and UI/UX Designer. My areas of expertise are JavaScript and Front-End technologies. I like Functional & Reactive solutions both for programming and architectures. I use spaces, not tabs.
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 -