ReactJS - 00 - I switched from Angular to React, why?

Refer to:
http://www.csdn.net/article/2015-02-13/2823956-angular-vs-react



[Editor's note] Kumar Sanket is a full-stack web developer/engineer at Toptal. The article "Why I Ditched Angular for React" compares Angular and React. He said that Angular is very popular in the rapid development of large-scale web projects, but it also has various defects, such as over-reliance on DOM manipulation, two-way data binding bring performance issues, etc. React, as a new open source project led by Facebook and Instagramin, provides a new development method for JavaScript application developers, and at the same time has the advantages of fast speed, cross-browser compatibility, modularity and other advantages, which made Kumar Sanket choose React . Below is a translation of the article.




A few years ago, my code was cluttered with jQuery selectors and callbacks, but AngularJS came along to solve this problem nicely.

Projects developed with AngularJS have excellent maintainability. AngularJS has a series of simple and easy-to-use functions, which are conducive to the rapid development of large-scale web projects.

When I first met, I was amazed by the two-way data binding of AngularJs and the design concept that all data sources are placed in the Model. In actual development, it effectively reduces the data redundancy in the application.

With the increasing frequency of application, some defects of AngularJs are gradually reflected, and the unsatisfactory in the use process made me decide to look for a replacement for it.

Here are some of my complaints about Angular.

DOM-based program execution. Too much reliance on DOM manipulation during Angular's execution. When the Angular application is executed, it will scan all the DOM first, and then compile it through the instructions, which makes it difficult for developers to debug and judge the execution order of the program.

Two-way data binding is a double-edged sword. As components increase and projects become more complex, two-way data binding brings performance issues.

How does two-way data binding affect performance? In JavaScript (ES5), the function of notifying when variables or objects change is not implemented. Angular's implementation method is called "Dirty-checking", which dynamically updates the user interface (UI) by tracking data changes. ).

Dirty-checking is triggered by the execution of any operation in Angular's scope, and the performance decreases as the number of bindings increases.

Another problem with two-way data binding is that if there are many components on the page with dynamic data, that means there are also many sources of data, which can feel cluttered if not managed properly. But to be fair, it's a developer's approach issue rather than a flaw in Angular itself.

Angular comes into its own. Any operation in Angular will cause the digest cycle to traverse the registered listeners, so that components can dynamically synchronize data. This creates compatibility issues with other dependencies.

If you use other JavaScript libraries that also need to change the data, you must use Angular's $apply function to encapsulate it.

Or if it's a tool library, you need to turn it into a service. It seems that other JavaScript libraries have to be modified to interoperate with Angular.

Dependency Injection. JavaScript currently does not have its own package manager and dependency parser, AMD, UMD and CommonJs solve this problem very well. Unfortunately Angular doesn't make good use of these specifications, and Angular even implements its own Dependency Injection (DI). But to be fair Angular already has an unofficial implementation of dependency injection using RequireJS.

Learning to advance is difficult. Using Angular requires learning a lot of concepts, including but not limited to:

Modules
Controllers
Directives
Scopes
Templates
Chained Functions
Filters
Dependency Injection
Getting good at Angular is hard, not a one-time thing.

The above reasons led me to switch to React.

What's the deal with React?

React is a new open-source project led by Facebook and Instagramin to build user interfaces, giving JavaScript application developers a new way to develop.

Disclaimer: React is not an application development framework like AngularJs. It's not fair to compare them as the same type.

When it was introduced at JSConf EU in May 2013, its concepts like "one-way data flow" and "virtual DOM" shook the audience.

React is for building user interfaces. Quoting the official homepage: "For developers, React is the V in MVC". You are free to write independent components, which are more or less superior to Angular's directive set.

React reflects on some of the problems encountered in current web development and makes best practices.

For example, it encourages one-way data flow and firmly believes that components are data-driven state machines.

However, most other similar frameworks manipulate the DOM directly, which React doesn't like and tries to avoid.

React appropriately provides the most basic API needed to define a UI component. It follows the UNIX creed: do one thing to the extreme.

For a more detailed comparison of Angular and React, read Angular and React Comparison by Pete Hunt (Facebook/Instagram staff) for more details.

Why did I start using React?

Here are some things I love about React.

React is fast

Compared to other frameworks, React takes a unique way of manipulating the DOM.

It does not operate directly on the DOM.

It introduces a concept called virtual DOM, which is interposed between JavaScript logic and the actual DOM.

This concept improves web performance. During UI rendering, React implements local updates to the actual DOM through micro-operations in the virtual DOM.

Cross-browser compatibility

Virtual DOM helps us solve cross-browser problems, it provides us with a standardized API, even in IE8 is no problem.

Modularity Write independent modular UI components

for your program, so that when one or some components fail, they can be easily isolated.

Each component can be independently developed and tested, and they can import other components. This equates to improved code maintainability.

Unidirectional data flow at a glance

Flux is an architecture for creating a unidirectional data layer in JavaScript applications, which was conceptualized by Facebook along with the development of the React view library. It's just a concept, not the implementation of a specific tool. It can be absorbed by other frames. For example, Alex Rattray has a nice Flux instance using Backbone's collections and models in React.

Pure JavaScript

modern web applications work differently than traditional web applications.

For example, updates to the view layer require user interaction without requesting the server. So views and controllers are very dependent on each other.

Many frameworks use a template engine like Handlebars or Mustache to handle the view layer. But React believes that views and controllers should be interdependent rather than using a third-party template engine, and, most importantly, it's a pure JavaScript program.

The biggest drawback of isomorphic JavaScript

single-page JS applications is that there are great restrictions on the indexing of search engines. React has a solution for this.

React can pre-render the application on the server and send it to the client. It can restore the same record from pre-rendered static content to dynamic applications.

Because search engine crawlers rely on server-side responses rather than JavaScript execution, prerendering your app helps with search engine optimization.

React is compatible with other frameworks/libraries

such as RequireJS for loading and packaging, while Browserify and Webpack are suitable for building large applications. They make those tough tasks less daunting.

Unfortunately, the current version of JavaScript does not provide a packaged and loaded module. (System.import will be used to fix this on future ES6 versions).

Fortunately, we have nice and neat alternatives to RequireJS and Webpack. React is built with Browserify, and if you want to manipulate image assets or compile Less and CoffeeScript, Webpack might be a better choice.

Do I need another development framework to go with React?

You can use React to build user interfaces, but you still need to make AJAX calls, apply data filtering, and other features that Angular already implements.

If we need another additional JavaScript development framework, why not use Angular?

A framework consists of a series of modules and rules. What should I do if we don't need some of its modules or even want to replace some of them?

One of the ways to achieve modularity and better dependency management is through a package manager.

But what about package management in Angular? It's up to you, but keep in mind that Angular is self-contained. You will most likely need a third-party package to adapt to Angular.

React, on the other hand, is just JavaScript. Any package written in JavaScript does not need to be wrapped in React.

For me it's better to use a package manager like npm and Bower. We can choose our own set of components and tools. To be clear: this is more complicated than using a comprehensive development framework like Angular.

In this regard, the good thing about React is that it encourages the use of npm, which already has a lot of ready-made packages. You can choose one of the complete starter kits to start building React apps.

Switching to React wasn't all smooth sailing either!

Since Angular is an application development framework, it brings a lot of convenience. I gave up some good features like: wrapped AJAX for $http service, $q for answer service, ng-show, ng-hide, ng-class and ng-if for template control statements - all of this Everything is amazing.

React is not an application development framework, so you need to consider how to handle other aspects of building an application. For example, I'm working on an open source project called react-utils that helps make React easier and more convenient to develop.

For now, the community is also actively contributing some similar components to fill this gap. React Components is one such unofficial site where you can find similar open source components.

React's creed discourages the use of two-way binding, which also creates a lot of pain when dealing with form data and editing table data.

Anyway, when you start to understand Flux data flow and storage, things become simple, clear and simple.

React is new. It will take some time for the surrounding community to develop. On the other hand, Angular has become very popular and there are tons of extensions available (eg AngularUI and Restangular).

Although the React community is just starting, it is growing very quickly. Extensions like React Bootstrap are a good example of this. Sooner or later we'll have more and richer components, it's just a matter of time.

Summary

If you like the Angular way, you might not like React at first. Mainly because it is a one-way data flow and lacks some features for developing applications. In the end, many things still need to be considered.

However, when you get used to Flux's development model and React's design philosophy, I believe you will see its beauty.

Both Facebook and Instagram are using React (because they are leading the project).

GitHub's newest source code editor, Atom, is built with React.

Yahoo Mail is also being refactored using React.

React has been followed by a large number of applications and tech companies.




===================

React Ecosystem: From Little White to Big God
http://www.iteye.com/news/32752










-