Developers love to pit technologies against each other in search of “The One True Way” to build things. Over the past 9 months I’ve built actual products with both Angular.js and React, and I believe both are excellent frameworks that fill vastly different niches in front end development. If you know what you’re trying build, and what your constraints are, it’s actually not that hard to choose one.
Angular.js: Easy Mode
Angular is the easiest way I’ve found so far to render a view model in the browser, and update it based on user interaction. You don’t have to wrap your data like Knockout or Backbone force you to do, nor do you have to worry about cleaning up event handlers and correctly binding context.
Angular is batteries included framework, so you can (usually) build your entire application without having to install other libraries. It’s a liberating experience to build something without a dependency on jQuery. You can just include Angular as a script tag and get coding. It requires very little setup up front to be productive.
The two things I’ve found that make Angular a poor fit for many projects is it’s dependency injection implementation and lack of server rendering. Since Angular has its own dependency injection system you’ll find yourself either adapting all your code to fit that style, or relying on script tag ordering to correctly resolve dependencies. This results in either having code that’s locked in to being an angular library, or having to jump through hoops to mix Angular’s DI syntax with something else like Common JS or Require JS.
That said, I think Angular.js has a bright future, and the core team seems well aware of the rough spots. It looks like Angular 2.0 will address things like the Dependency Injection implementation.
React: Code Reuse and Server Rendering
The sweet spot for building React web applications is using node.js, npm and browserify for building lots of small components that can be rendered on either the client or server. This means you don’t have to do anything special to having easily crawable sites, and you can create modules that are easy to reuse across multiple applications.
This means you’ll also find yourself having to bootstrap quite a bit of infrastructure up front to get a usable app in the browser. Whether it’s Grunt or Gulp, you’re going to want to use a build system that can watch for file changes, transform JSX templates, rebuild your browserify bundle, and restart your node.js server.
Since React is also a purely view focused framework, you’re going to need to choose libraries to include to provide other functionality. While Angular provides date and number filters out of the box, you’ll need to include moment.js for date formatting and numeral.js for number formatting. You’ll also need to decide on 3rd party libraries for routing, validation, etc. If you’re comfortable integrating libraries this isn’t a problem, but can be a lot of work for teams making their first venture into more sophisticated front end development.
Choose Angular.js if you:
- Want a framework that provides complete functionality out of the box.
- Want a large, established community to help provide troubleshooting support.
Choose React if you:
- Are using node.js for your app server.
- Already have a large codebase managed with npm.
- Need your app to render seemlessly on both the client and server.