Notes on transitioning from Angular to React: the good parts and the bad parts

Last month I’ve released my first project built on top of React & Flux. I’ve spent my last year working on an Angular single page webapp, and moving from one to the other has been an excellent opportunity to discover new patterns and workflows.

Our current setup:

• Build system using Gulp.
• Webpack with Babel (Babel loves react!)
• Scss.

The good parts

Moving away from a big framework to smaller libraries

Angular is a big framework, it provides all the tools needed to build anything a web application needs. On the other hand, React is just a library to handle DOM manipulation and Flux is just a way to architecture a web application. Anything is provided by vanilla javascripot modules.

I had fun breaking old habits

I embraced Jsx. I used to be a defender of keeping things clean, HTML files hold structural UI elements, CSS is for presentation and Javascript is for logic.

Now JSX is my new language for UI elements. Today it still feels weird putting html entities inside scripts, but by keeping them close it’s much more manageable and easier to keep things working.

I also embraced CommonJS, breaking down components to smaller pieces to make them easier to handle. Declare only one components per file

Also I broke the line that separated the browser and node by moving away from bower in favour of Browserify and, in the end, Webpack.

Eslint

JSHint has been a good tool, like a good friend in the last years. It has been there to help me prevent issues in my code.
But during that time it hasn’t learn that many new tricks, and in the future it might forget some old ones.

At the moment I started using JSX syntax he had some issues. Researching it seemed that ESlint is about to hit 1.0. The good parts is that it’s extensible & very configurable. So moving away from JSHint to ESLint is simple enough, even if it takes a little while to set up things since it doesn’t share the same format.

ES6 and Sourcemaps

Using browserify with babelify, or webpack with babel, lets you work with some of the cool features the browsers will have in the future today.

The arrow function is a bless when your language tends to forget where this should be pointing and decided that the global object is good enough.

I haven’t gone crazy with classes yet, but being able to work in a superset of features that gets converted to ES5 compatible syntax is really neat.

The bad parts

Missing pieces you usually have for granted

I missed $http and $routeProvider a lot the first days.

I’ve been so used to use first jQuery.ajax, and now Angular’s own $http that not having a “de facto” way of loading external data bothered me. I did a research on how Flux applications handled this, but I was missing the point. The new approach is work with small specialised libraries. In the end I found superagent, the perfect tool to complement any web application with Ajax calls. Another good candidate would have been Github’s fetch polyfill.

For routing I’ve been using React Router, but I’m still not conviced by it.

No IE8 support without polyfills

This is not a bad per se, but I wasn’t planning to use any polyfill since we weren’t given any support for it. Since we are loading React in a global vendor.js file, I couldn’t fire a redirect in javascript at all, it was just throwing errors. In order to have it working on IE8, it needs both es5-shim.js and es5-sham.js. In the end we did a server-side redirect to an outdated.html page without any script on it.

Package.json grows, a lot

Every time our Hard Drive based CI cleans and runs npm install, it takes around 5 to 6 minutes to download everything. This is not an issue with SSD disks, but the amount of small node modules needed for the project has increased quite a lot.

In the end, I think using React & Flux has been really satisfying. But as usual, there’s not a right tool for everything. Some of the Flux patterns can be implemented anywhere, even in Angular, and having worked previously in Angular made my transition to React quite smooth.

No mater what, this are interesting times for being a FrontEnd, the tools have never been this good and the community never been this big.

If you want to give it a try I recommend the following articles:

Originally published at www.blaipratdesaba.com on April 13, 2015.