Angular 2 vs. React: And there will be blood
(translation, original article )
Angular 2 reached beta and has all chances to disrupt the laurels of the top framework in 2016. Showdown time. Let's see what he can oppose React, the sweetheart of 2015.
Disclaimer: I worked with the first Angular, but switched to React in 2015. I published the React and Flux Complete Course . So yes, I am biased. But I will attack both sides.
')
Well, it's time to start. And there will be blood.
* Sigh * Yes, Angular is a framework, and React is a library. Someone will say that the difference makes these things incomparable. No matter how wrong!
The choice between Angular and React is like a choice between a assembled desktop PC and the collection of your own from individual components.
This post essentially considers these two approaches. I will compare the syntax and component model of React and Angular. This is how to compare the finished CPU with raw CPU 1 . Those. compare soft with soft.
Angular is a framework, it provides much more features and functionality out of the box. With React, you have to pull a pool of third-party libraries to build an application. Surely, you need libraries for routing, for organizing a unidirectional flow, accessing the API, testing, dependency manager, etc. The number of solutions is quite extensive. Therefore, there are many starter packs for React (I posted two 2 ).
Angular offers many out-of-box solutions that help you start right away without fear of making a lot of decisions. Unified solutions also help developers change projects without having to re-enter the development process.
I am delighted how Angular developers master TypeScript, which leads to the following advantages ...
Of course, TypeScript has no universal adoration, but using it in Angular 2 is a big win. Throughout the web, you will come across two options for using React - it is presented in ES5 and ES6 about equally, which in turn leads to three different options for declaring components . It confuses newbies. (True Angular suggests using decorators instead of extensions, many consider this an advantage.)
When Angular 2 does not require TypeScript, the development team continues to use it, by default, in the documentation. This means that open source projects and related examples make the code more uniform. Angular already provides illustrative examples showing how to use the TypeScript compiler . (I have to admit, there is still no widespread TypeScript distribution , but I suspect that soon after launching it will become a de facto standard). This approach helps to avoid misunderstandings, which are common when starting work with React.
2015 was the year of javascript fatigue . React was the key factor. The fact that React never reached version 1.0 tells us about future critical changes. The React ecosystem was developing at a wild pace, especially with regards to shades of Flux and routing. I mean, everything that you write today is likely to become obsolete when React 1.0 is released, and, most likely, you will have to rewrite it altogether.
In this sense, Angular 2 is a thorough, methodical rethinking of a holistic framework. Therefore, Angular 2 will not see such an outflow of customers and headaches after the release. And as a holistic framework, Angular is more suitable for long-term solutions presented by one team. In React, it is your responsibility to bring together many, rapidly developing open source libraries into one stable application. This is a laborious, unpleasant and continuous process.
As you will see below, I consider JSX a great achievement. However, you need a JSX enabled toolkit. React has become so popular that tools are no longer a problem. But new tools such as IDE and linters are unlikely to quickly support this format on the very first day 3 . The storage of Angular markup templates in lines or separate HTML files does not require separate support tools (although there are already smart tools to work with Angular string templates on the fly). I want to say, the Angular approach has its many pitfalls, which serves as a good liner to the topic of the benefits of React ...
Well, let's see what React has to offer.
JSX is an HTML-like syntax compiled into JavaScript. Markup and code are in the same file. This solution allows you to insert links to functions, components, and variables. And vice versa, Angular lowercase templates draw obvious minuses: there is no syntax highlighting in many editors, there is no full support for auto-compiling and highlighting errors in the code. It would seem that this should lead to a terrible error report, but the Angular team wrote their own HTML parser. (Bravo!)
If you don’t like Angular lowercase patterns, you can put the patterns in a separate file, but then you get what I call the “old days”: write the code in two files in your mind, without support for autocompletion or syntax checking before compiling. This does not seem like a big problem until you enjoy life inside React. Components in a single syntax-checking file, this is one of the most important reasons for the superiority of JSX.
Compare only how Angular 2 and React handle unclosed tag.
For a better understanding of the benefits of JSX, see JSX: The Other Side of the Coin
When you make a typo in JSX from React, it will not want to compile. This is a great thing. You immediately know exactly which series of errors. It is clear that this is an unclosed tag or a link to a declared variable. In fact, the JSX compiler will indicate the line number in which you made a mistake . This significantly increases the speed of development.
Conversely, when you are mistaken with a reference to a variable in Angular 2, nothing will happen. Angular 2 will fall silently at runtime, not compilation. Such errors are slow . I run my application and wonder why my data is not displayed. Little fun.
Here it is. This is the key difference between React and Angular. Unfortunately, Angular remains HTML oriented. Angular 2 failed to solve the most fundamental problem of architecture:
I have not highlighted this split enough. This fundamentally affects the development experience. In Angular HTML oriented design remains its weak point. As I emphasized in JSX: The Other Side of the Coin , JavaScript is more powerful than HTML. It is much more logical to increase the possibilities of JavaScript to support markup than to extend HTML with logic. HTML and JavaScript should still be somehow glued together and the JavaScript oriented approach of React is a definite superiority over Angular, Ember and Knockout with their HTML oriented approach.
That's why...
Angular 2 continues the approach of version 1 in an attempt to make HTML more powerful. Therefore, you should use Angular's special syntax for simple things like loops or conditional statements. For example, Angular offers different syntax for one-way and two-way data binding:
React, ( , , ). :
Angular :
. .
Angular, React «» JS: ( key ).
JS. React JSX JS .
Angular 2 Cheat Sheet. HTML. JavaScript. Angular.
React . JavaScript /:
, React, JS . React. JavaScript , .
Angular 2 :
React JavaScript, :
, , React ( Angular 2), .
, ? JS?
JSX , , . Hot Reloading with Time Travel .
/, :
Ember: 580k
Angular 2: 565k (759k with RxJS)
React + Redux: 204k
Angular 1: 145k
Tour of Heroes Angular React ( React React Slingshot)
Angular 2: 764k minified
React + Redux: 216k minified
Angular 2 React + Redux 5. ( Angular )
, .
. Angular Ember .
, , . , React . 200 000 npm .
Unix . :
Angular 2 1. , / , 3–10 . Angular 2 React. , , “JavaScript ”.
Angular 2 . Angular HTML- JavaScript- React. React, HTML ngWhatever. JavaScript. .
Reddit Hacker News.
: “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” Pluralsight. VinSolutions . Microsoft MVP, Telerik Developer Expert, outlierdeveloper.com
1 — , raw CPU
2 —
3 — IDE ( MS )
4 —
5 — comparable simplicity
.. ( ) React, . , . . TypeScript ES6. :)
, !
Angular 2 reached beta and has all chances to disrupt the laurels of the top framework in 2016. Showdown time. Let's see what he can oppose React, the sweetheart of 2015.
Disclaimer: I worked with the first Angular, but switched to React in 2015. I published the React and Flux Complete Course . So yes, I am biased. But I will attack both sides.
')
Well, it's time to start. And there will be blood.
You are comparing round and soft.
* Sigh * Yes, Angular is a framework, and React is a library. Someone will say that the difference makes these things incomparable. No matter how wrong!
The choice between Angular and React is like a choice between a assembled desktop PC and the collection of your own from individual components.
This post essentially considers these two approaches. I will compare the syntax and component model of React and Angular. This is how to compare the finished CPU with raw CPU 1 . Those. compare soft with soft.
Advantages of Angular 2
Let's look at the benefits of Angular 2 over React.Fast start
Angular is a framework, it provides much more features and functionality out of the box. With React, you have to pull a pool of third-party libraries to build an application. Surely, you need libraries for routing, for organizing a unidirectional flow, accessing the API, testing, dependency manager, etc. The number of solutions is quite extensive. Therefore, there are many starter packs for React (I posted two 2 ).
Angular offers many out-of-box solutions that help you start right away without fear of making a lot of decisions. Unified solutions also help developers change projects without having to re-enter the development process.
I am delighted how Angular developers master TypeScript, which leads to the following advantages ...
TypeScript = Path of Purity
Of course, TypeScript has no universal adoration, but using it in Angular 2 is a big win. Throughout the web, you will come across two options for using React - it is presented in ES5 and ES6 about equally, which in turn leads to three different options for declaring components . It confuses newbies. (True Angular suggests using decorators instead of extensions, many consider this an advantage.)
When Angular 2 does not require TypeScript, the development team continues to use it, by default, in the documentation. This means that open source projects and related examples make the code more uniform. Angular already provides illustrative examples showing how to use the TypeScript compiler . (I have to admit, there is still no widespread TypeScript distribution , but I suspect that soon after launching it will become a de facto standard). This approach helps to avoid misunderstandings, which are common when starting work with React.
Reduced outflow
2015 was the year of javascript fatigue . React was the key factor. The fact that React never reached version 1.0 tells us about future critical changes. The React ecosystem was developing at a wild pace, especially with regards to shades of Flux and routing. I mean, everything that you write today is likely to become obsolete when React 1.0 is released, and, most likely, you will have to rewrite it altogether.
In this sense, Angular 2 is a thorough, methodical rethinking of a holistic framework. Therefore, Angular 2 will not see such an outflow of customers and headaches after the release. And as a holistic framework, Angular is more suitable for long-term solutions presented by one team. In React, it is your responsibility to bring together many, rapidly developing open source libraries into one stable application. This is a laborious, unpleasant and continuous process.
Widespread support
As you will see below, I consider JSX a great achievement. However, you need a JSX enabled toolkit. React has become so popular that tools are no longer a problem. But new tools such as IDE and linters are unlikely to quickly support this format on the very first day 3 . The storage of Angular markup templates in lines or separate HTML files does not require separate support tools (although there are already smart tools to work with Angular string templates on the fly). I want to say, the Angular approach has its many pitfalls, which serves as a good liner to the topic of the benefits of React ...
Benefits of React
Well, let's see what React has to offer.
Jsx
JSX is an HTML-like syntax compiled into JavaScript. Markup and code are in the same file. This solution allows you to insert links to functions, components, and variables. And vice versa, Angular lowercase templates draw obvious minuses: there is no syntax highlighting in many editors, there is no full support for auto-compiling and highlighting errors in the code. It would seem that this should lead to a terrible error report, but the Angular team wrote their own HTML parser. (Bravo!)
If you don’t like Angular lowercase patterns, you can put the patterns in a separate file, but then you get what I call the “old days”: write the code in two files in your mind, without support for autocompletion or syntax checking before compiling. This does not seem like a big problem until you enjoy life inside React. Components in a single syntax-checking file, this is one of the most important reasons for the superiority of JSX.
Compare only how Angular 2 and React handle unclosed tag.
For a better understanding of the benefits of JSX, see JSX: The Other Side of the Coin
React mistakes - quickly and clearly
When you make a typo in JSX from React, it will not want to compile. This is a great thing. You immediately know exactly which series of errors. It is clear that this is an unclosed tag or a link to a declared variable. In fact, the JSX compiler will indicate the line number in which you made a mistake . This significantly increases the speed of development.
Conversely, when you are mistaken with a reference to a variable in Angular 2, nothing will happen. Angular 2 will fall silently at runtime, not compilation. Such errors are slow . I run my application and wonder why my data is not displayed. Little fun.
React javascript centric 4
Here it is. This is the key difference between React and Angular. Unfortunately, Angular remains HTML oriented. Angular 2 failed to solve the most fundamental problem of architecture:
Angular 2 continues to put JS in HTML. React places HTML in JS
I have not highlighted this split enough. This fundamentally affects the development experience. In Angular HTML oriented design remains its weak point. As I emphasized in JSX: The Other Side of the Coin , JavaScript is more powerful than HTML. It is much more logical to increase the possibilities of JavaScript to support markup than to extend HTML with logic. HTML and JavaScript should still be somehow glued together and the JavaScript oriented approach of React is a definite superiority over Angular, Ember and Knockout with their HTML oriented approach.
That's why...
JavaScript oriented React = simplicity
Angular 2 continues the approach of version 1 in an attempt to make HTML more powerful. Therefore, you should use Angular's special syntax for simple things like loops or conditional statements. For example, Angular offers different syntax for one-way and two-way data binding:
{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding
React, ( , , ). :
{myVar}
Angular :
<ul>
<li *ngFor="#hero of heroes">
{{hero.name}}
</li>
</ul>
. .
- «» .
- hero . ( var).
- ngFor HTML c Angular .
Angular, React «» JS: ( key ).
<ul>
{heroes.map(hero =>
<li key={hero.id}>{hero.name}</li>
)}
</ul>
JS. React JSX JS .
Angular 2 Cheat Sheet. HTML. JavaScript. Angular.
Angular Angular
React JavaScript
React . JavaScript /:
Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. :)
, React, JS . React. JavaScript , .
Angular 2 :
(click)=”onSelect(hero)"
React JavaScript, :
onClick={this.onSelect.bind(this, hero)}
, , React ( Angular 2), .
, ? JS?
JSX , , . Hot Reloading with Time Travel .
/, :
Ember: 580k
Angular 2: 565k (759k with RxJS)
React + Redux: 204k
Angular 1: 145k
Tour of Heroes Angular React ( React React Slingshot)
Angular 2: 764k minified
React + Redux: 216k minified
Angular 2 React + Redux 5. ( Angular )
, .
, , , , . , , .
,
— Tom Dale
. Angular Ember .
, , . , React . 200 000 npm .
React UNIX
React . , Angular Ember. React, , , . . JavaScript , React .Unix . :
, ,React , , . . ( Angular )
Angular 2 1. , / , 3–10 . Angular 2 React. , , “JavaScript ”.
Angular 2 . Angular HTML- JavaScript- React. React, HTML ngWhatever. JavaScript. .
Reddit Hacker News.
: “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” Pluralsight. VinSolutions . Microsoft MVP, Telerik Developer Expert, outlierdeveloper.com
1 — , raw CPU
2 —
3 — IDE ( MS )
4 —
5 — comparable simplicity
.. ( ) React, . , . . TypeScript ES6. :)
, !
Source: https://habr.com/ru/post/274523/
All Articles