Developers Club geek daily blog

1 year, 10 months ago
(transfer, original of article)

Angular 2 reached a beta and has every chance to break monasteries of a top framework in 2016. Time of dismantling. Let's look that it can oppose React, the sweetheart from 2015.

Disclaimer: I worked with the first Angular, but switched to React in 2015. I published the Full course of React and Flux. So yes, I am prejudiced. But I will attack both parties.

Well, it is time to begin. Also there will be blood.

Angular 2 against React: Also there will be blood

You compare round and soft.


* Sighing * Yes, Angular is a framework, and React — library. Someone will tell that the difference does these things incomparable. As if not so!
The choice between Angular and React it as the choice between the assembled desktop PC and collecting of the of separate component parts.

It is a post in fact considers these two approaches. I will compare syntax and the component React and Angular model. It already how to compare the ready CPU to crude CPUs 1. I.e. to compare soft to soft.

Benefits of Angular 2

Let's consider benefits of Angular 2 over React.

Fast start


Angular of this a framework, it gives much more opportunities and functionality from a box. With React, you should pull a pool of libraries of third-party developers for application programming. For certain, to be necessary libraries for routing, for the organization of the unidirectional flow, the appeal to API, testing, the manager of dependences, etc. The quantity of solutions is quite extensive. Therefore there are many starting packets for React (I publishedtwoam 2).

Angular proposes a set of solutions from a box which help you to start without fear of acceptance of a large number of solutions at once. Single solutions, also help developers to change projects needlessly again to penetrate into development process.

I am excited as the Angular developers master TypeScript that leads to the following benefits...

TypeScript = Way of purity


Of course, TypeScript have no general adoration, but its use in Angular 2 is a big victory. In all web you will encounter two options of use React — it is provided to ES5 and ES6 approximately equally that in turn leads to three different options of declaring of components. It confuses beginners. (The truth of Angular suggests to use decorators together of expansions, many consider it as benefit.)

When Angular 2 does not demand TypeScript, the design team continues to use it, by default, in documentation. It means that projects open source and the corresponding examples are done by a code to more uniform. Angular already provides the bright examples showing how to use the compiler TypeScript. (it is necessary to recognize, there is no universal distribution of TypeScript yet, but I suspect, hundred soon after start it will become the standard de facto). Such approach helps to avoid misunderstanding, frequent at start of work with React.

Decrease in outflow


2015 was year of Javascript of fatigue. React was a key factor. The fact that React did not reach version 1.0, speaks to us about critical changes in the future. The ecosystem of React developed wild rates especially it concerned shades of Flux and routing. Means, all that you write today most likely will become outdated at React 1.0 output, and, most likely, it is necessary to rewrite in general.

In this sense of Angular 2 this careful, methodical reconsideration of a complete framework. Therefore Angular 2 not to see such outflow of clients and a headache after release. And as the complete framework, Angular more is suitable for the long-term solutions provided by one command. In React it is your responsibility to gather a set, quickly developing, libraries with the open code in one stable application. It is labor-intensive, unpleasant and continuous process.

Universal support


As you will see below I consider JSX as big achievement. Nevertheless the tools with support of JSX are necessary for you. React became on so much popular that tools stopped being a problem. But new tools such as IDE and linter will hardly quickly support this format in the first day 3. Storage of templates of a marking Angular in line or the separate HTML files do not demand separate instruments of support (though there are already smart tools for work with the line Angular templates on the fly). I want to tell, approach of Angular has the set of reefs that serves as a good eyeliner to a subject of benefits React...

Benefits of React


Well, let's look that React can offer us.

JSX


JSX is HTML the similar syntax compiled in JavaScript. The marking and a code are in one file. This solution allows to insert links to functions, components and variables. To the contrary, the lower case Angular templates pull for themselves explicit minuses: there is no syntax highlighting in many editors, there is no complete support of autocompilation and illumination of errors in a code. It would have to seemed it to lead to an awful output of error messages, but the Angular command wrote the own HTML parser of a code. (Bravo!)

If you do not like the lower case Angular templates, you can take out templates in the separate file, but then you receive what I call "old days": to write a code in two files in mind, without support of autocompletion or check of syntax before compilation compilation. It seems a big problem so far you enjoy life in React. Components in one file with syntax check, it is one of the most important reasons of superiority of JSX.

Compare how many as Angular 2 and React process an open tagAngular 2 against React: Also there will be blood
For the best understanding of benefits of JSX look at JSX: The Other Side of the Coin

Error React — quickly and accurately


When you do a typographical error in React'vovom JSX, it will not want to be compiled. It is a magnificent thing. You precisely know at once in what row an error. It is clear that it is an open tag or the link to the declared variable. Actually, the JSX compiler will specify row number in which you made a mistake. It significantly increases development speed.

To the contrary, when you are mistaken with the link to a variable in Angular 2, nothing will occur. Angular 2 quietly to itself will fall at the runtime, but not compilations. Such errors slow. I start the application and I ask a question why my data are not displayed. Cheerful it is not enough.

React JavaScript tsentrichen 4


Here it. Key distinction of React and Angular consists in it. Unfortunately, Angular remains to HTML oriented. Angular 2 was not succeeded to solve the most basic problem of architecture:

Angular 2 continues to place JS in HTML. React places HTML in JS

I to select this split not enough. It essentially influences experience of development. In Angular HTML the oriented design remains its weak place. As I also emphasized in JSX: The Other Side of the Coin, JavaScript more powerful than HTML. It is much more logical to strengthen possibilities of JavaScript for support of a marking, than to expand HTML with logic. HTML and JavaScript all the same have to be somehow stuck together and JavaScript the oriented approach of React is undoubted superiority over Angular, Ember and Knockout c of their HTML the oriented approach.

That is why...

JavaScript the oriented React = simplicity


Angular second continues approach of the first version in attempt to make HTML more powerful. Therefore you have to use special syntax of Angular for simple things like cycles or conditional statements. For example, Angular offers different syntax for a one-sided and double-sided data bind:
{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

In React, the binding does not change syntax (it is processed in other place, it is meant that and has to be). Anyway it looks so:
{myVar}

Angular supports the built-in shablonizator by means of such syntax:
<ul>
  <li *ngFor="#hero of heroes">
    {{hero.name}}
  </li>
</ul>

In the stated above fragment of a code there is a search of an array of heroes. I have several concerns.
  • The declaration of "shablonizator" through an asterisk is unevident.
  • The grid before hero declares local variable in a template. This key concept looks as unnecessary noise (at desire you can use var).
  • ngFor semantichno adds a cycle to HTML with the help of Angular of attribute.

Contrary to Angular, React uses "pure" JS: (the truth of key it is specific).
<ul>
  {heroes.map(hero =>
    <li key={hero.id}>{hero.name}</li>
  )}
</ul>

Cycle it is native JS is supported. React JSX can involve easily all power of JS for similar things.

Just read Angular 2 Cheat Sheet. It is not HTML. It is not JavaScript. It is Angular.
For reading Angular learn the long list of syntax, specific to Angular
For reading React learn JavaScript

React unique in the simplicity and the concept of syntax. Let's consider iterations in popular JavaScript frameworks/libraries today:
Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. :)

Everything, except React, use specific syntax for replacement standard in a JS cycle. Here in what React charm. It contains all power of JavaScript for processing of a marking so nothing additional is required.

Syntax of Angular 2 continues to surprise with a binding of the processor of click on an element:
(click)=”onSelect(hero)"

At the same time React uses simple JavaScript, again:
onClick={this.onSelect.bind(this, hero)}

And, as, React includes the superstructure over event system (also as well as Angular 2), you should not worry about influence on productivity of such declarations of event handlers.

Why to stuff the head additional with unique syntax of a framework if you can not do it? Why it is simple not to use all power of JS?

Magnificent experience of development


JSX autocompletion, check in compilation time and an informative error handler already creates excellent base for development that very much saves set time. But if to integrate all this with Hot Reloading with Time Travel and you get unique experience as anywhere any more.

The size matters


Here the sizes of the mentioned libraries/frameworks, minifitsirovanny:

Ember: 580k
Angular 2: 565k (759k with RxJS)
React + Redux: 204k
Angular 1: 145k

To look at the actual size I created the Tour of Heroes application in Angular and React (for React I used new starter kit of React Slingshot)
Angular 2: 764k minified
React + Redux: 216k minified

So Angular 2 more than is three times more than React + Redux in comparable prostote5. (After the last release of Angular grew thin a little)

Of course I recognize that concerns concerning the sizes of a framework are a little exaggerated.
Big appendices are contained, as a rule, by at least several hundred code kilobyte, often it is more, regardless a postrena they with a framework or without. Abstractions are necessary for developers for creation of difficult applications, regardless from a framework they or hand-written, they negatively influence application performance.
Even if you will get rid of all frameworks, a set of applications will still weigh code kilobytes
— Tom Dale

The volume is right. Such frameworks as Angular or Ember big because they contain a set of solutions from a box.

Anyway, I consider that many applications do not need in complete lists of opportunities of a framework. In the world where microservices and microapplications occupy more and more vital space, React gives you strength to select only necessary components for the application. In the world where there are more than 200 000 npm of modules this undoubted benefit.

React includes UNIX Philosophy

React is a library. It precisely resists to philosophy of complex frameworks, such as Angular and Ember. So when you select React, you are free to select modern, the best in the class, libraries. You will be able to solve your problem in the best way. JavaScript develops very quickly, and you are free to include in your React the application the best libraries instead of waiting of updating of a framework.

Unix sustained check time. That is why:
The philosophy of small, compound, one-target tools will never get out of fashion
React is the focused, compound, serving one purpose tool used by many websites in the world. It speaks about the big future. (It is worth noticing that Angular has not smaller distribution)

Summing up the results


Angular 2 is a big step on comparison with version 1. The new component model is simpler for understanding than the directive in the first version, it supports isomorphic/universal rendering, and he uses the virtual house that gives 3–10 multiple gain of performance. These changes do Angular to 2 very competitive React. Let's not deny that its full-function, self-confident nature offers some clear advantages due to reduction to "fatigue JavaScript".

Nevertheless, Angular 2 the size and syntax stops me. Commitment of Angular to the HTML oriented design does it difficult in comparison with more simply on the JavaScript-oriented React model. In React, you should not learn specific HTML syntax such as ngWhatever. You spend time for writing of pure JavaScript. I believe that it has a future.

To comment here Reddit or here Hacker News.

About the author: Cory House is the author of "Building Applications with React and Flux", "Clean Code: Writing Code for Humans" and many other courses on Pluralsight. He is software architect in VinSolutions and the coach of software developers at the international level in the field of a frontend of development and a pure koding. Cory of Microsoft MVP, Telerik Developer Expert, and founder of outlierdeveloper.com

1 — forgive, did not understand that such raw CPU
2 — at me too such is
3 — here I do not agree with the author already there is a support in all IDE (though I in MS did not check) and already saw many expansions for linter
4 — it seems to me in this case tsentrichen approaches more
5 — comparable simplicity

P.S. (from the translator) Personally I use React, and this article seemed to me interesting. I like expansion more, but not decorators. I like my starter kit and an opportunity to change framework contents. I not really love TypeScript and I prefer ES6. But always with interest I participate in angularny projects :)

Write me about errors, typographical errors and inaccuracies I will try to make quickly changes in article!

This article is a translation of the original post at habrahabr.ru/post/274523/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus