Angular 2 against ReactJS: there will be blood!

Now available in BETA version, AngularJS 2 is about to become the hot new framework in 2016. Now is the time for evaluation. Let's see how it fares against the darling of 2015: ReactJS.
Disclaimer : I really enjoyed working with version 1 of AngularJS but I changed to ReactJS in 2015. I may not be completely objective, but believe me, I attack from both sides.
Come on, let's bleed!

JS-REPUBLIC Angular 2 vs ReactJS
Photo credit: @jwcarrol

Don't try to compare fruits and vegetables

Yes, AngularJS is a framework while ReactJS is a library. For some, this makes an objective comparison impossible. This is not my opinion !

Choosing between AngularJS and ReactJS is a bit like choosing between buying a ready-to-start computer or buying spare parts to build your own.
This article pays particular attention to both approaches considering their respective advantages and disadvantages. I compared the syntax and component model of ReactJS and AngularJS. This therefore corresponds to comparing an assembled computer processor to a processor purchased at retail, a feasible comparison.

The advantages of AngularJS 2

Let's start with the advantages of AngularJS 2 over ReactJS.

No complicated decision

AngularJS is a framework, which means that it provides a large number of native options and features. With ReactJS, it is necessary to add external component libraries to have the same amount of functionality. You will need to add elements for “routing”, to force unidirectional flows, to call APIs, set up tests, manage dependencies, etc. The developer decides everything and the slightest technological evolution is based on his choices.
AngularJS allows a number of options to be used directly, which makes it possible to start a project more quickly without being intimidated by the choices to be made at startup. This standardization also makes it very easy to change developers since the projects are based on embedded and de facto standard components, also facilitating teamwork.
I also admire the adoption of TypeScript by the AngularJS development team, this leads us to the second important advantage of AngularJS.

TypeScript = ClearPath

TypeScript is not unanimous. AngularJS 2 has the essence of JavaScript even if it's not just JavaScript. For its part, the presented examples of ReactJS are sometimes in ES5, sometimes in ES6 in the same proportions. And ReactJS now allows you to use three different declarations for the same action: the component declaration. This has the effect of confusing newcomers.
Even if AngularJS 2 does not constrain the use of TypeScript, the hard core of AngularJS developers strongly pushes in this direction, especially through the documentation. This means that most of the examples available in Open Source projects will offer a syntax familiar to developers who follow this standard since most follow this standard. AngularJS has examples that demonstrate how to use the TypeScript compiler (These demonstrations are admirable by the way, not everyone uses TypeScript these days, but I'm willing to bet it will soon become standard). This way of working avoids any error related to a bad decision that could occur in ReactJS.

Reduce Churn

2015 was the year of some vanilla JavaScript running out of steam. ReactJS was one of the actors of this change. while React is at version A 1.0, more changes should come in the future. The ecosystem around ReactJS continues to suffer from a churn phenomenon, particularly around the components used within Flux. This means that anything written in ReactJS today will likely be obsolete when ReactJS 1 is released or will require at least a major rewrite.
By contrast, AngularJS 2 is a methodological and careful re-invention of the previous version. This version is more mature, more understandable. So yes, updates to a later version of AngularJS will be much less painful than those of ReactJS. And as a complete framework, when we decide to work with AngularJS, we know that the elements embedded and available natively work well together because they were chosen to work together. In ReactJS, it is your responsibility to choose the components which in some cases may have compatibility, performance etc issues. Component updates may also generate additional difficulties and debugging. We all know these phases are frustrating, can be time-consuming, and seem truly endless.

A wide range of supported tools

As you can see below, I consider React JSX to be a great step forward, although it is necessary to choose components that support JSX. React has become so popular that support for a particular tool is rarely an issue, just be patient. Indeed, new tools rarely have JSX support when they are launched (examples: IDEs, linters, etc.). AngularJS 2 templates and their string markup are stored in separate HTML files. In fact, this method does not require any particular tool to facilitate their reading.

Compatible with Web Components

The design of AngularJS 2 respects the standards of Web Components. In a nutshell, components you build in AngularJS 2 should be much easier to convert to pure components than those produced in ReactJS. Browser support remains limited, but this could be a long-term accelerator during your migrations for example.
Now that we have a better understanding of the highlights of AngularJS 2, it's time to review the highlights of ReactJS.

The Benefits of ReactJS

So what really sets React apart?

JSX

JSX is a pseudo-language with a syntax close to HTML compiled by JavaScript. The markup and the application code are composed in the same file. The advantage is that this architecture allows for efficient autocompletion during development, especially when entering a variable, a keyword, etc. This is an important difference with AngularJS 2. As a result, ReactJS has good, consistent and complete syntax highlighting in most editors, often moreover with at least partial autocompletion and the ability to identify errors. writing at the design stage (without waiting for compilation). That said, AngularJS offers a homemade parser to overcome this difficulty (bravo!).
If you are allergic to templates based on strings like in AngularJS, it is also possible to split the content into several files but at the cost of returning to an “old-fashioned” file architecture.
JS-REPUBLIC Angular 2 vs ReactJS

ReactJS quickly identifies errors

When we make a syntax error in ReactJS, it won't compile. It's a great thing. This means that you are able to immediately identify which row has an error. The JSX compiler immediately tells us when an element is not closed for example or when a property is misused or does not exist in the context of the page. This approach considerably streamlines the development phases.
In contrast, when a bad variable reference type error is made in AngularJS 2, there is no indication… AngularJS 2 crashes silently, but still compiles. The error is identified during launch. This has the effect of slowing down development. We load the application and then we have to ask ourselves why the data is not loading, for example…

ReactJS is Javascript Centric

Here it is, the fundamental difference between ReactJS and AngularJS 2. Unfortunately, AngularJS 2 remains HTML-centric rather than JavaScript-centric.. This is actually a fundamental design problem:

AngularJS 2 continues to add JavaScript to HTML. ReactJS puts on HTML in the JavScript.

This fundamentally impacts the development experience. The HTML-centric approach is AngularJS's biggest weakness. JavaScript is much more powerful than HTML. Thereby, it seems more logical for JavaScript to support HTML markup than not. HTML and javascript need to work together, they are related. The javascript approach of ReactJS is therefore fundamentally superior to the approach of AngularJS, EmberJS or Knockout which is based on the opposite paradigm.
here's why

ReactJS: JavaScript-centric design = simplicity

AngularJS 2 is the continuity of the AngularJS approach. The approach is always to give HTML more power. We therefore use the AngularJS 2 syntax for simple processing such as loops, conditions, etc. Unfortunately, this lacks standard. For example AngularJS 2 offers two binding methods (simple or bidirectional) with a different syntax:

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

In ReactJS, either accepts the same type of syntax.

{myVar}

AngularJS 2 supports an 'inline' syntax directly in the element:

<ul>
<li *ngFor="#hero of heroes">
    {{hero.name}}
  </li>
</ul>

The code example above loops over an array called 'heroes'. I have several questions at this point:

  • A 'master' model must be declared via a preceding instruction.
  • the hash (#) before hero declares a local variable. This key concept in AngularJS sounds like unnecessary noise. You can also use var if you prefer.
  • The ngFor statement adds looping semantics to the HTML through AngularJS-specific attributes.

There is an important contrast between the syntax of AngularJS 2 above and that of ReactJS which is in pure javascript (below).

<ul>
  { heroes.map(hero =>
<li key={hero.id}>{hero.name}</li>
  )}
</ul>

Since JavaScript basically supports loops, ReactJS's JSX reuses all the power of JavaScript directly for this type of operation, and many others, such as maps, filters, etc.

To read AngularJS: it is essential to know a large number of keywords specific to AngularJS.
To read ReactJS: you just need to know JavaScript.
The syntax of ReactJS is therefore a conceptually quite simple syntax compared to other frameworks which offer specificities.

  • Ember: {{# each}}
  • Angular 1: ng-repeat
  • Angular 2: ngFor
  • Knockout: data-bind=”foreach”
  • React: JUST USE JS. 🙂

All, except ReactJS use specific keywords replacing the native instructions available in JavaScript: a loop. Here is the beauty of ReactJS. This respects the conventions of JavaScript and retains its power. There are no nasty surprises or questionable grammar.
The quirks of AngularJS 2 continue with click binding:

(click)=”onSelect(hero)"

In contrast to the naturalness of native javascript in ReactJS

onClick={this.onSelect.bind(this, hero)}

ReactJS also includes an event system (like AngularJS 2 for that matter). Therefore declaring events does not pose a performance problem when declaring listeners.
Why learn a framework-specific code syntax and grammar when it is possible to keep only pure javascript in mind?

A luxurious development experience

Autocompletion support for JSX, real-time validation and a wealth of error messages can speed up development considerably.

The question of weight

Here is the weight of the most popular frameworks (source)
Angular 2: 566k (766k with RxJS)
Angular 2 : 764k minified
ember : 435k
Angular 1: 143k
React + Redux : 151k minified
So AngularJS 2 is 4 times heavier than ReactJS + Redux which are of comparable simplicity. AngularJS 2 will probably lose weight in the coming months and before the final release of the official version, but still!
Frameworks like AngularJS or EmberJS are heavier in terms of weight because there are many more features available natively.
This raises questions. Many applications do not need all of these elements offered in these frameworks. In the world where more and more micro-services or micro-apps are emerging, ReactJS offers a good capacity power by allowing you to embed only the bare necessities. In a world that knows more than 200.000 NPM-type modules, this is an interesting positioning.

ReactJS respects the philosophy of the UNIX world

Remember, ReactJS is a library. This is precisely the opposite of the philosophy of larger frameworks like AngularJS and EmberJS. When you select ReactJS you are free to choose the best modern complementary library to solve this or that difficulty. Javascript is advancing rapidly, and React makes it possible to go from a small piece of code to an application embedding larger libraries in the blink of an eye.

In short

AngularJS 2 is a considerable improvement on what was offered in its first version. The new component model is easier to understand and integrate than the version 1 directives. This version supports isomorphism / universal rendering and uses a virtual DOM version offering a 3 to 10 times improvement performance. These changes make AngularJS 2 a framework that does not have to be ashamed when compared to ReactJS. We can not deny that the features offered by AngularJS 2 are complete and offer significant benefits by reducing the writing of JavaScript.
However the weight of AngularJS 2 and its syntax raise questions. The fact that AngularJS is HTML-centric makes it complex to compare with ReactJS which is JavaScript-centric. In React, there is no need to learn a particular language to use the framework. You just need to know JavaScript. However, ReactJS doesn't write anything for the developer, so there's a lot more code to write overall, even if it's just JavaScript. This is the future I believe in.
Original article by Cory House, published on medium.freecodecamp.com
Translated from English by Matthew Breton –CTO JS Republic
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]