A Changing of the Guard in Web Technology (ES6 For The Win Part 2)

At MYOB we started writing Javascript with the ES6 (ES2015) syntax a while ago and choose to go with Babel to transform it back to old Javascript. Babel comes as a command line tool or as a plugin for all the various task runners and so you have to choose which way you are going to go. At the time we had an elaborate Grunt pipeline and so our first foray into ES6 territory was using the grunt-babel plugin. However, Grunt showed its limits to us, mainly in term of build performance (we were doing more than transpiling), and after evaluating alternatives from Gulp to plain command line and everything in-between we found a diamond in the rough: Webpack. In this post we will see how to setup Webpack to use Babel and will build a simple React + Flux page using some of the new features of Javascript like classes with the very latest React syntax (as of version 0.13.x). If you want to learn more about React, Flux and Webpack, stay tuned as the next articles will get into the meat of those libraries and tools we use at MYOB to create our new generation of web based products.