Comparison between Angular 2 and react

Source: Internet
Author: User

The choice of Angular 2 and react is really just a style preference. React is focused on rendering speed and can handle complex UI designs in client or native applications, while angular 2 is more development-wide. It can not only guide us to build our own applications, but also provide some expressive and reusable UI design mechanism.
Reactjs Quick Review

Reactjs is a set of JavaScript Web libraries built by Facebook and used primarily to build high-performance and responsive user interfaces. React is responsible for solving a common problem faced by other JavaScript frameworks, namely the processing of large data sets. The ability to use the virtual DOM and to re-render the dirty part of the DOM with a patch installation mechanism in the event of a change react the speed performance of far beyond the other frames. Advantages:

The great thing about 1.React is that it puts forward the novel idea of virtual DOM, and this idea derives from react Native, which is likely to unify web/native development. On the performance side, because of the virtual DOM technique, Reactjs only updates the DOM when calling SetState, and updates the virtual DOM first, then compares the actual DOM with the actual DOM. This process compared to the Angularjs bind method, one is to update the DOM less times, the second is to update the content of the DOM less, the speed is certainly fast.

2.ReactJS more attention to the UI component, and the one-way update of the data, proposed a new concept of flux architecture, now react can be directly with the JS ES6 syntax, and then Webpack compiled into a browser-compatible ES5, development efficiency has some advantages.
React native generated by the app is not run on WebView, but the system native Ui,react through JSX generation system native Ui,ios and Android React UI components or similar, a lot of code can be reused

3. Maintain the state of the UI, Angular is used in the $scope, in the React is used this.setstate. The advantage of React is that it is simpler and more intuitive. All state changes have only one entry this.setstate (), Angular is more complex and does not know what black magic is used behind it. Disadvantages:

React is a target UI component that can often be used in combination with other frameworks and is not currently suitable for a single complete framework. React even with the combination of Flux can not be called a complete framework, such as you want to use promise Ajax. I'm sorry no, I'm looking for a ready-made library. and third-party components far less than angular. At present in the big stable project to adopt react, I also only know has Yahoo's email. React itself is just a V, so if a large project wants a complete set of frameworks, it may also be necessary to introduce flux and route-related things. and angular offers more than react in this respect. Angular 2 full load hardening mechanism

Angular 2 is a series of enhancements compared to Angular 1. First, Angular 2 is highly concerned with creating reusable front-end components. Although angular 1 can achieve the same effect to some extent, the new version of the framework addresses a number of challenges that affect usability, such as dependence on $scope and controllers. The instructions are also significantly simplified, making the angular 2 code easier to input and read than the previous generation. Angular 2 also takes into account the collaboration requirements with typescript, eliminating a large number of code to ensure type safety. Coupled with a number of performance and framework improvements, the Angular 2 does give a fresh feel. Advantages:

Angularjs is a complete set of frameworks, angular has its own data binding, render rendering, Angularui library, filters, filter, filter,directive (templates), Service (services), service (services), Q (Defer), route, route, HTTP, Cookie, cookie, inject (dependency injection), factory,provider ..., etc. a series of tools, basically as long as you're doing web development, it has one. But these things are not react themselves.

ANGULARJS's structure is clear, the Division of labor is clear, the expansion is good, model,view,controller who when to do what things say very clearly, angular can let the programmer really focus on the business logic, the JS ability requirements are not high (basically only need to write business logic, It doesn't really have the advanced JS skills and knowledge, and because it's not very intrusive to HTML, it's easy to collaborate with the designer. The whole frame is full of Di ideas, the coupling is very low, the objects are inject, which means that each object can be easily replaced without affecting other objects.

Angular high productivity, unidirectional data flow what the idea is very good, but it's too cumbersome to write. I just want to change a very simple data also go through action, dispatcher, store, view four steps, angular in a line of code to do things in react is so troublesome

Angular behind is Google, so the community base is not to worry about, the whole ecology is already very complete, from the most basic tutorial to StackOverflow problem number to the framework of the analysis of itself is very much, angular to get started relatively easy. Disadvantage: performance
The same TODO MVC sample,angular fully loaded with 1.1s (Webpagetest-visual Comparison). React only used 0.3s, have to say, really very slow. Angular 2.0 overturn redo makes it inappropriate to adopt this framework at present

Angular 1.x version is actually a relatively old thing, and now it seems that some ideas out of date, such as dependency injection, their own unique modularity, these things in fact under the ES6 has been well solved.

Angular's 2.0 is almost an overturn of the redo frame, it is estimated that there will be no 1.X upgrade scheme. So it would be an awkward time to start a new project with angular. Similarly, such a big change seems to confirm the negative 1. X is not that good. Precautions

It is worth emphasizing that the comparison between react and angular (any version) is actually not equivalent. Angular is a front-end framework that provides the full architecture for the application client and allows us to use the client code as a powerful suite of features. React is a library that offers little functionality-its main role is to act as part of a complete project rather than dominate the overall code structure. Of course, there is a considerable degree of similarity between the two, and this is the reason why this comparison exists. Architecture

As mentioned above, react is a set of JavaScript libraries for creating responsive templates. So react doesn't really care about architecture-it's more like a tool that works in large client code in the app.

On the other hand, Angular 2 identifies the "Correct design approach" of the front-end code in the framework's role. It focuses on component and type safety, allowing you to focus on the code itself and build an object-oriented front end while emphasizing reusability and encapsulation.

From this point of view, react and angular 2 are really nothing comparable--react for those who want to build code architectures in a more flexible way, while angular 2 is the overall architecture option for the app's front end. Therefore, who can better adapt to the needs of the application design pattern, who will win in this segment. Templates

Template tools are available for both scenarios, but the template management approach is quite different. React build template objects based on JSX, you can build inline templates and save all template code centrally. Angular 2 Physically separates the JavaScript used to drive the application from the HTML that is the rendering object.

However, due to the increased focus on components and the ability to work seamlessly with typescript, we are often able to achieve greater reusability and flexibility with angular 1.x. In summary, after selecting the ideal pattern, the choice will be based on aesthetics and basic ability to determine the--react template is more compact and renders faster, while the angular 2 component is more reusable and simplifies the Application object management process with ubiquitous bidirectional data binding. Native Support

Angular 2 and react have different underlying goals, which means they have distinct performance in supporting native device code. The Angular 2 team decided to focus on the framework itself and hand over the work of the device to other vendors. The react ecosystem, in turn, introduced the React native--framework to translate react code into native application experiences, leading to performance in far more traditional hybrid web applications.

Again, choosing the "right" solution is the ideal way to think. If you want your mobile app experience to be lightning fast, then react will win directly. But if you want to adopt a more modular application architecture and are willing to sacrifice some of the performance to improve code structure consistency, the angular 2 and ionic frameworks will be the right answer. Summary

Angular is the real chatty framework, it has a set of ecological systems and ideas, basic you follow its ideas to fill in the code on the OK.
React is a short, powerful library that is only responsible for solving one of your single "pain points."
To develop large projects or more formal projects, it is recommended that you use Angular,angular as the best application for the Crud Spa single page. With Angularui, you can build a good web app.
Yeoman+bower+gulp can quickly put up the shelves, after all, relatively simple and practical.
For mobile, react has more potential than angular, Reactjs modular + vdom + search-friendly, lightweight and efficient.
The choice of Angular 2 and react is really just a style preference. React is focused on rendering speed and can handle complex UI designs in client or native applications, while angular 2 is more development-wide. It can not only guide us to build our own applications, but also provide some expressive and reusable UI design mechanism.

The final decision depends on the application design objectives and the general opinion of the development team. The large complex user interface plus performance is the trump card for react, and the development process and code architecture is the home of angular 2. In short, as long as you can fully consider the actual needs and positioning, we will be able to make the right choice. links to some Angularjs related articles: AngularJS Authoritative Tutorial Clear PDF version take you closer to AngularJS-basic function Introduction take you closer to AngularJS-experience instruction instance take you closer to AngularJS-Create a custom directive how to unit test a controller in a AngularJS in Ang ULARJS application with JSON file to set state AngularJS Factory vs Service vs Provider angularjs--using Ngresource, RESTful APIs, and Spring MVC Framework Submission Data

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.