Im Interview mit Mirko Hillert auf den React Days in München, erläutert Tobias Struckmeier (Adesso AG) die Vorteile von Redux, berichtet an welche neuen Features gearbeitet wird und erklärt die Unterschiede zwischen Vue.js und React.

Mirko Hillert: Tobias, du bist Redux-Experte und hältst auch hier auf den JavaScript Days einen Vortrag zu dem Thema. Das Redux-Konzept ist momentan in aller Munde. Was ist der Vorteil daran?

Tobias Struckmeier: Der Vorteil ist, dass ich in diesem Konzept wenige Überraschungen beim Halten des Application State habe. Ich kann ihn sehr gut über meine Frontend-Applikation verteilen und habe durch das Konzept mit den Reducern zudem gut testbaren Code. Dieser kommt mir gerade in großen Projekten mit vielen Teammitgliedern zugute. Dafür habe ich zwar ein wenig Boilerplate-Code zu schreiben, der Gewinn sind jedoch weniger Überraschungen und gute Debuggingfeatures.

Mirko Hillert: Weshalb ist State in Webanwendung problematisch? Könntest du ein Beispiel nennen?

Tobias Struckmeier: Vielfach war der State ein Problem, weil verschiedene Teile meiner Frontend-Applikation diesen modifiziert haben. Dann kam React mit dem Flux-Pattern, das dafür gesorgt hat, dass das ein unidirektionaler Datenfluss ist – das hat schon mal einiges verbessert. Redux sorgt außerdem dafür, dass States einzeln gemanagt werden können. Ich habe viele kleine Reducer, die sich nur um einen kleinen Aspekt meines Application State kümmern und ich habe keine Seiteneffekte durch andere Teile meiner Applikation. Nachdem ich mit dem Reducer Änderungen auf den State ausgeführt habe, wird das mit Redux automatisch auf meine React-Anwendung angewandt.

Mirko Hillert: Redux wird oft mit React umgesetzt. Welche anderen Frameworks gibt es, die mit Redux funktionieren?

Tobias Struckmeier: Es gibt mittlerweile viele Frameworks, die sich zumindest an den Prinzipien orientieren. Auch für Angular gibt es eine Redux-Implementation. Für Vue gibt es das mit Vuex auch. Letzteres habe ich mir noch nicht genau angesehen, aber das Prinzip ist immer das gleiche: Man hat kleine Pure Functions. Das sind diese kleinen Reducer, die dann den State managen. Diese Idee hat sich durchgesetzt. Das fing bei React an, da derjenige, der sich Redux ausgedacht hat, dieses Konzept mit React umgesetzt hat. Die Vorteile haben dann auch andere Frameworks begeistert. Dementsprechend spricht auch absolut nichts dagegen, das auch in anderen Frameworks einzusetzen.

Mirko Hillert: Wie steht es denn momentan um das React-Framework? An welchen neuen Features wird gerade gearbeitet?

Tobias Struckmeier: Besonders spannend ist momentan die Context API, die demnächst herauskommt, also noch nicht final ist. Den Kontext, den ich schon jetzt in der React-Anwendung habe, kann ich mit dieser API weiter vereinheitlichen. Damit werden Schmerzen, die ich bisher mit dem Kontext hatte, beseitigt. Das wird auch Redux helfen, sich besser an die React-Komponenten zu binden.

Mirko Hillert: Ein anderes JavaScript-Framework, das momentan enormen Zuspruch findet, ist Vue.js. Wo liegen die Unterschiede zu React?

Tobias Struckmeier: Ich habe mir Vue.js bisher nur sehr oberflächlich angeguckt. Viele Konzepte, die man aus React kennt, findet man auch in Vue.js wieder. Ein großer Unterschied ist die Arbeit mit Templates. Während man bei React mit JSX arbeitet, kann man in Vue auch noch Templates benutzen, um sein HTML mehr von seinem Code zu trennen. So kennt man es ja bereits aus Angular und anderen Templatesprachen. Ich persönlich sehe den Vorteil von JSX, dass ich meinen Code und mein Template an der gleichen Stelle zusammen habe. Das ist natürlich Geschmackssache, aber da ist Vue tatsächlich ein wenig flexibler. Es gibt auch für Vue die Möglichkeit, mit JSX zu arbeiten. Dann sieht das schon sehr stark nach React aus. Ich würde also behaupten, dass ein Entwickler, der mit React klarkommt, auch schnell in Vue reinkommt.

Mirko Hillert: Für welche Art von Anwendung ist React und für welche Vue.js geeignet?

Tobias Struckmeier: Prinzipiell lassen die sich miteinander austauschen. Es sind beides Frontend-Anwendungen, beides kümmern sich um die Vue selbst und machen mir relativ wenige Vorgaben.

Mirko Hillert: Wo siehst du eventuelle Nachteile von Redux?

Tobias Struckmeier: Einer der Nachteile, den man gerade am Anfang oft hat, ist das viele Schreiben von Boilerplate-Code. Ich habe meine Action, meine Action Creator, ich muss meinen Action-Typ definieren und den muss ich dann in meinen Reducer importieren. Es gibt also mehrere Stellen, an denen ich erstmal viel Code schreiben muss. Es gibt dann Tools, die diese Probleme ein wenig minimieren: entweder Codegeneratoren, die mir schon Dinge vorgenerieren oder Libraries, die mir das Erstellen von bestimmten Teilen, die Redux erfordert, erleichtern. Das ist einer der großen Nachteile, der sicherlich viele Menschen ein wenig vor Redux zurückschrecken lässt. Ich finde allerdings, dass die Vorteile von Redux das auch wieder aufwiegen.

Mirko Hillert: Welche Alternativen siehst du zu Redux?

Tobias Struckmeier: In der React-Welt gibt es prinzipiell immer sehr viele Alternativen – das ist eine der Stärken in diesem Ökosystem. Es gibt beispielsweise MobX, mit dem man seinen State wesentlich einfacher verwalten kann, was aber ab einer bestimmten Team- oder Projektgröße ein bisschen schwieriger ist. Sehr stark im Kommen ist auch RxJS, wo eher mit Streams gearbeitet wird und die Prinzipien von Redux nachgeahmt und -empfunden werden können. Das sind die hippen Alternativen, die man noch hat.

Mirko Hillert: Warum sollte man einen Workshop besuchen, um Redux zu erlernen?

Tobias Struckmeier: Wenn man sich das erste Mal mit Redux beschäftigt und viele von den funktionalen Konzepten noch nicht kennt, kann einen das zunächst überfordern. Es gibt einiges, das man lernen muss und einige Stolpersteine, über die ich auch selbst schon gestolpert bin. Es gab viele Stellen, an denen ich dachte: „Warum muss ich das so und so machen? Das ist kompliziert.“ Ein Workshop ist für mich immer ein Kickstart, um leichter reinzukommen, diese Stolpersteine zu umschiffen und einfach gesagt zu bekommen, was man wie macht und aus welchen Gründen. Genau das kann man in einem Workshop direkter beantworten. Man kann den Teilnehmern direkt helfen und auf Fragen eingehen. Zwar sind in der eigentlich sehr guten Redux-Doku auch einige Informationen enthalten, aber manchmal sind die Zusammenhänge nicht so klar. Das kann man als Trainer dann ein bisschen besser vermitteln.

Mirko Hillert: Tobias, danke für das Interview.

Interviewt von: Mirko Hillert

Mirko Hillert verantwortet seit 2007 als Leiter der Entwickler Akademie den Trainingsbereich bei Software & Support Media. Er studierte Betriebswirtschaft an der Westsächsischen Hochschule Zwickau und der Universidad Valencia sowie Marketing an der Westfälischen Wilhelms-Universität Münster. Als ehemaliger Dozent und Ausbilder für Managementprozesse treibt er seit vielen Jahren die fundierte Aus- und Weiterbildung von Entwicklern und Softwarearchitekten im IT-Markt voran, unter anderem mit innovativen Eventformaten und hochwertigen Trainingsinhalten.