Moving to React-Redux in baby steps
In the past few months the conversation among the FED 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, as most starter kits and examples are assembled from React + ES2015 + Webpack.
Recently at the company that I work (Bizzabo) we decided to go for it. We wanted to take a ready-made feature written in backbone + handlebars + requireJs and completely re-write 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 is still in beta, but mostly because React is less compelling 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 mostly how do you combine all the new technologies with the technologies we already have? we looked at plenty of tutorials, starter-kits that combine ES2015, Webpack, React, and Redux but still we remained with the big Challenge of learning all of these new technologies and also combining it with the stack we already use.
Instead of going all-in at once, we decided to develop the feature over and over again, in each iteration introducing a new tool to the stack.
First Phase — Backbone + RequireJs + Handlebars + React
So 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 our enhancements to reduce development time and not get stuck on the little things for now. 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’.
as you can see, it’s a mix-and-match of our current stack combined with React.
Next — 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:
<script src="/dist/bundle.js"></script>pretty soon we started using the import feature. this required a change, we needed to re-write the files by removing RequireJs modules and using ES2015 modules instead.
Whats Next? adding Redux
This is the phase we are currently at. 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, as a lot of the ramp-up we needed about ES2015, React and Webpack was already behind us, so all we needed is to write reducers and some actions and we were good to go.
Conclusion
All i can say is, for us, integrating piece by piece without starting from scratch was the right direction. It gave us the confidence to go towards this change, that now we know was good for us, in several aspects, not only technology-wise but also for personal development. So don’t be scared, go for it, baby-steps are also steps that navigate you in the right direction.
