Moving To React-Redux In Baby Steps

In the past few months the conversation among the FED (front end developer) community was all about React, ES2015 (with Babel) and a whole bunch of new frameworks and tools. ES2015 is great, the way Javascript advances is amazing, but trying to make steps toward moving to these new technologies is a bit overwhelming, since most starter kits and examples are assembled from React + ES2015 + Webpack.

Recently at the company that I work for (Bizzabo) we decided to go for it. We wanted to take a ready-made feature written in backbone + handlebars + requireJs and completely rewrite it using react and redux, and basically the whole “React stack” – React + Redux + ES2015 + Webpack.

Why We Chose React To Begin With?

Why React and not Angular 2 for example? First, because React was more mature at this point while Angular 2 was still in beta. But more so, because React is less complex and you can integrate React alongside Backbone by just replacing the View layer with React and leave the model and controller as is.

The Big Challenge

How do you completely re-write a feature that is already working with our Backbone + RequireJs + handlebars + Grunt and how do you combine all of the new technologies with the technologies we already have?

We looked at plenty of starter-kits that combine ES2015, Webpack, React, and Redux but still we had to actually learn how to use all of these new technologies while combining them with the stack we already use.

Instead of going all-in all at once, we decided to develop the feature over and over again, in each iteration we introducing a new tool to the stack.

Phase 1: Backbone + RequireJs + Handlebars + React

We developed the feature in react and combined it with our backbone stack. We didn’t use view and models, we just used the Backbone’s Router and our main handlebars file with all of our enhancements to reduce development time and to avoid getting stuck on the little things.

So our code looked like this :  backbone router is in charge of creating the view and attaching it to the DOM. In this case it initialises a react view and attaches it to the DOM, and our handlebars file has an element ‘community-main’.

Phase 2:  Dropping RequireJs, adding Webpack + ES2015  –  import capability

We decided to drop RequireJs, mostly due to the fact that we wanted to integrate React-router, and Redux, and all the examples were with ES2015 import feature, lots of node modules that we wanted to use and we needed this feature to enable importing these node modules, so pretty quick we added Webpack:

Now all you need to do is add the following to your handlebars and you are good to go:

Pretty soon we needed to re-write the files by removing RequireJs modules and using ES2015 modules instead.

Phase 3: Adding Redux

We learned mostly by example and by watching Dan Abramov’s Redux course on egghead.io. Pretty quickly we were refactoring our code using Redux and React-Redux libraries. It was pretty simple, since a lot of the ramp-up we needed regarding ES2015, React and Webpack was already behind us. So all we needed was to write reducers and some actions and we were good to go.

Conclusion

All I can say is, for Bizzabo, integrating piece by piece without starting from scratch was the right direction. It gave us the confidence to implement this change. In hindsight, we know switching was the right decision not only technology-wise but also for personal development. So don’t be scared, go for it, baby-steps can help you develop yourself and your tech!