Taking a quick glance at what makes Google's AngularJS different from Facebook's React JS framework

Jun 19, 2015 13:53 GMT  ·  By

Getting started with a Web project was once a one-horse race, most people choosing jQuery for any type of work. As technologies evolved, and the Web expanded to mobile phones, new tools were also introduced, not to rival jQuery or MooTools, but to improve the developers' workflow.

AngularJS and React are currently the two most prominent JavaScript frameworks on the market, two top dogs engaged in a fight for their userbase, but each taking its own approach.

With Google backing up AngularJS development and Facebook (the Instagram team to be more accurate) driving React innovation, both frameworks have a solid base behind them so you can rest assured none will drop out of the sky like MooTools or Prototype did in the past.

AngularJS is usually larger and slower because it needs to do more

Both frameworks support plugins, which was to be expected, but this is where all other similarities end. AngularJS is a full-on MVC framework, compared to React, which only handles the V(iew) from MVC.

Because it needs to do more stuff, AngularJS performance-wise is usually more sluggish than React, which is lighter, faster to load and handles things faster when comparing common operations.

Each uses its own different way of building Web apps

Using AngularJS is "relatively" simple compared to something like Ember.js. We say relative because it's easy to learn, but it may take some time until you get used to some of the lingo, like directives, filters, controllers, scopes, services, and factories.

Now, on the other hand, when you delve into React, things will look much simpler. There are only three terms you'll need to get used to, and that's components, states, and properties.

If in AngularJS you create applications using directives, which means blending JS, CSS and HTML code, in React it requires only JavaScript, using a syntax called JSX that allows you to blend HTML within your JavaScript code.

This (Angular's method) can be a problem for developers that adhere to the concept of "separation of concerns," but React doesn't provide a better alternative either, with its quirky and odd JSX syntax. So you can call it a tie, both contending for the title of "weirdest guy at the Prom" award.

Other differences related to application creation process include the way the frameworks work with the DOM, AngularJS utilizing two-way data binding on the real DOM, while everything in React is a one-way street, applied to a virtual DOM. But these concepts are a little too complex for the scope of this article, and will probably be one of the last things you'll get acquainted with when reading each of the frameworks' documentation.

The conclusion we, you, and the rest of the community have reached by now is that React is and will be a much better fit at handling smaller applications, something like one-page apps, single-page websites, or frontend UIs, cases where developers need to render the UI without having absolute control over it and its data.

For any other cases, or if you're willing to drop everything you know about classic JavaScript programming and learn Google's magic syntax and 'ng-' coding structure, AngularJS can provide a good alternative.

Below is a basic infographic put together by Kshitiz Shankar of StackHive.

AngularJS vs. React comparison
AngularJS vs. React comparison