My adventure with React + Flux: setting sails

If it's weekend, it's time for a ...

... new dev stack

I've decided to give React a proper check (finally). I've seen some tutorials, watched Egghead courses about React & Flux, I've even read a brief book. What for? Isn't Angular meeting my needs anymore? There were two major factors:

I can't help being annoyed with the number of changes between current state of Angular & what's planned in 2.0. I understand they are necessary & I agree that they are valuable, but I'm not that enthusiastic about manually converting all the legacy code I have in Angular 1.2/1.3. Lazy, yeah.
The main reason why I've started to love Angular was its composability - it is so easy to split the problem, encapsulate parts of the solution in independent directives & make them truly re-usable & independently testable: WIN. But - React gives me the same (in the very similar way to Flight that I've already praised some time ago), but it also totally simplifies the idea of a view lifecycle (2-Way binding? What for?!) & it's 100% reactive. WIN X 2.

So, in the end - I'm trying React. And Flux. Even if I already know there are some elements of React I don't like (for instance: mixing JS & HTML in render methods).

And not just React + Flux

As I've decided to use react-starter-kit to boost the development by removing the need of writing all the boilerplate code, I'm also evaluating (willy-nilly) some other components I didn't use yet - just to name a few:

webpack - I've used several other bundlers before, but not this one yet
gulp - I'm a grunt-man & I was never hiding that ;)
jest - as I more into Angular, I was dealing mainly with Karma & Protractor recently

Brace yourself

Before I dive into details - some relevant basics about my machine's spec & its software setup:

it's a Windows 7 machine (x64); Core i7 with 8GB of RAM
I tend to virtualize my dev environment, but in case of JavaScript applications it rarely makes much sense, so in this case I didn't
As I primary IDE I use WebStorm 10 - it's ultra-convenient because I develop in-browser apps separately to server-side logic.

Let's get going

Almost everything works great out-of-the-box. Almost. First things first.

react-starter-kit is almost flawless - downloading npm modules takes shitloads of time (lightweight seed, heh?), but in the end template works like charm: initial gulp setup with browserSync absolutely kicks ass:

all the code changes are reflected in the browser within 1-2 seconds (without a need of manual rebuild) (nothing you can't do with grunt, but it's so nice to get it running out-of-the-box)
run-time errors specific to React (like missing components) are very clearly being reported
there's JS lint tool (eslint) & jest test suite execution hooked to npm 'test' script, so you don't have to play too much with setting them up

But ... there are things that doesn't work that well ;/ And make me thing that the overall tooling for React is far less mature than Angular one (not that surprising if you consider how long both are present "on the market"):

standard eslint settings are very nazi (& they prevent jest from running), but it's not a rocket science to fix it
jest-cli requires contextify & this package caused me helluva problems:
- contextify refused to work on node 0.10.x (the version I was using, x was ~16); details: http://stackoverflow.com/questions/21148917/error-installing-contextify-node-gyp-rebuild-failed
- it refused to co-operate without Python; to keep things running I've installed the latest stable version of Python (3.4.x) just to find out that Python has two active forks alive - half of the world uses 2.x.y while the other half prefers 3.x.y & the latter is not backwards compatible... Surely I don't have to mention that contextify requires 2.x? :D
- the next things I was missing was ... Visual Studio 2010. No shit. contextify was trying to call msbuild for vcxproj in 2010 format. Fortunately there's a trick that saved me installing whole, old IDE (;PPP) & use 2013 instead; details: https://github.com/brianmcd/contextify/issues/129
- I've saved the best for last - https://github.com/facebook/jest/issues/243; Seriously, no shit - I've updated node to make contextify work, but it's a no go for jest-cli itself.
- This was the highest time to try something different - surprisingly, latest version of io.js was enough to prevent jest-cli from crashing. What is io.js? Hopefully you know all the drama behind the split of node (node / io) - if you don't, you can check the details here. Working with both node & io on the same machine is a bit troublesome, but people have managed to deal with forks (& multiple versions) by using dedicated version managers (like nvm, nvmw, nvm-windows, nodist). Funny thing is that now it seems that the split paths will join again.