As you can tell from the content of my blog posts, I’ve been practicing and preaching Angular.js for quite some time now. It is an extremely productive web framework that felt like a big step forward from my days doing jQuery “sprinkles” and then Backbone.
But then recently, I started playing with Facebook’s React framework. And while I’m still not quite as productive as I was with Angular, I absolutely love the code that I’m writing. And on top of that, it has opened my eyes to a whole new paradigm for creating user interfaces.
I won’t make this an article comparing and contrasting the libraries (a google search will probably turn up dozens of these), but here are the main reasons I’ve made the switch:
- Small API surface area - you can learn 90% of React in 1 day (unlike Angular, where this is the common learning experience)
- Due to the efficiency of the virtual DOM, you don’t have to worry about updating the DOM. You just write a single
render()function that is run over and over and applied in an efficient manner. It makes writing your views more similar to how you’d write them on the server because your view is simply a reflection of your current state. Angular’s 2-way binding is nice, but it comes at a cost of speed and complexity.
- The “Everything is a component” paradigm is an extremely pleasant and simple way to create user interfaces.
And I’m sure there are others. Angular is still a great framework, but at the end of the day, I enjoy writing code in React quite a bit more. And interestingly enough, while I had previously been under the impression that React was a 1-trick pony that you used when performance was a big requirement, the fact that it’s extremely fast probably wouldn’t make the top 10 reasons why I would pick it over other frameworks.
One of the biggest differences between the two libraries is their scope (and this can be both good and bad). React only provides the view layer, while Angular provides quite a bit more, such as libraries for promises, http, dependency injection, etc, etc.
So how do we replace all these concepts in the React world? Let’s go over them one by one.
Angular has a new router that I hear is great, but all my experience had been with UI-Router, which I generally liked. There is a React-focused router called react-router that is really fantastic. It is highly inspired by Ember’s built-in router, but uses React’s JSX syntax to structure your routes.
finally() method. So if you need this feature, I recommend the Bluebird library.
For my early Angular projects, I used Restangular, but in later projects, I found myself just using $http with a service for each resource. Axios is a library that is very similar to (and, in fact, inspired by) $http. Like $http, it is promise-based, automatically transforms JSON, and allows you to setup request and response interceptors.
Modules / Dependency Injection
Angular includes its own dependency injection framework for importing other libraries. It has a quirky syntax, but it generally works pretty well. But it is Angular-only, so it can be a bit awkward to pull in 3rd party libraries that weren’t built for Angular. In React, you can just use NPM modules, which are widely supported, by using a bundling library such as WebPack or Browserify (I suggest Webpack). Then you can just require other modules like so:
var otherLib = require('some-other-library');
Unit Testing & Mocking
Easy unit testing is one of my favorite things about Angular, so it’s great to know that their test runner, Karma, isn’t specific to angular and can just as easily be used with React.
Facebook actually has their own test runner and flavor of Jasmine called Jest, which has two things going for it: It’s easy to setup and it auto-mocks your dependencies by default. But I found it to be painfully slow and quickly switched to Mocha plus Chai and running tests using Karma. And there are a few testing helper libraries included in React that can be used with any framework.
When I first moved from server-generated “traditional” web apps (and some light backbone apps) over to Angular, it felt like a huge step forward. While moving to React may not be as big of a step in terms of productivity, it feels like a huge move forward in terms of code simplicity and cleanliness. I’m officially a convert, and I highly suggest that you check it out. And now that you know the basics of the React ecosystem, there’s no excuse not to give it a try.