Some materials about AngularJS and ReactJS

AngularJS:

Everything you need to understand to start with AngularJS introduces the main components of AngularJS

AngularJS Tutorial-Learn AngularJS in 30 minutes introduces Controller, Scope, Binding, Filtering, Hiding and Showing, Click event

Learn AngularJS With These 5 Practical Examples describes five Examples: Navigation Menu, Inline Editor (two-way binding), Order Form (similar to the total price of a shopping cart ), instant Search (custom filter) and Switchable Grid (switching the display mode of the instagram grid and list)

Angular js tutorial demo: An Example of circular drawing by controlling the scrollbar

A Step-by-Step Guide to Your First AngularJS App A list example with the filter function

AngularJS getting started tutorial

ReactJS:

HelloWorld example of a jsfiddle

React JS and JavaScript in Facebook a facebook engineer on ReactJS's Chinese Popular Science

ReactJS and AngularJS:

General

React has been open-sourced by Facebook in June 2013 and is battle-tested by on Facebook and Instagram. it has a small but growing community. the React team is very responsive and helpful on IRC.

AngularJs, supported by Google, is here since 2009 and has already a pretty huge community. Google did not use AngularJs in any of its major projects but cannot people have Angular projects in production.

We can estimate the community size based on IRC channel frequentations: 130 for # reactjs v. S. 600 for # angularjs on Freenode.

Angular is MVC, React is just V

React is much smaller than Angular. It does not have a service layer, prebuilt services to do routing or ajax requests, controllers, dependency injections, tools to enhance the testability. it is just the V in MVC, as stated in their home page.

On Facebook and Instagram, React is used with some other infrastructure tools, like a Backbone router (which will be replaced soon by Flatiron Director ).

The official documentation examples shipped with React give an idea of how React can be used with external tools. Currently we can find examples:

• React only
• React + Director router
• React + Backbone models

There's not yet an example of React + Angular but the two can be used together. you can keep the M and C of Angular if you like this part, and use the V of React.

There is an ngReact experimental project: the author creates ctictives to use React inside an Angular enhanced DOM.

React usecases?

Any React component can easily be replaced by an Angular directive with an isolate scope and a template. everything you can do in React can be done in Angular. so why wocould one use the V of React?

The major difference in Angular V and React V is how the DOM modifications are handled. The DOM access is slow and can be a bottleneck.

On each state modification, React computes a virtual DOM. to modify the real DOM, if makes a diff between the newly computed virtual DOM and the previusly computed virtual DOM, and then it applies the diff to the real DOM. the triggering to the virtual DOM computation is done explicitly and the framework does not need to dirty check the state. the React team states that it givesbetter has CES.

In Angular, the dirty checking permits to trigger the rendering of the DOM which is manipulateddirectly in the directives.

The goal of Angular is to make development easy and have reasonnably fast rendering CES. the author of Angular states that under 50 ms the difference is nearly imperceptible. the authors of React states that it is perceptible, special in touch devices, and tries to make it under 16 ms.

Similarities between React components VS Angular ctives ves

A React component is like an Angular directive with an isolate scope. React props are a bit like an isolate scope without the 2-way data binding, so you can only use@And&, Not=. (Actually you can use=And modify React props but you shouldn't, because it won't trigger any rendering, because there is no dirty checking)

Angular directive:

.directive('myPersonComponent', function() { return {   restrict: 'E',   templateUrl: 'templates/person.html',   scope: {     personModel: '@',     onPersonClick: '&'  }};// Parent code:<my-person-component person-model="personToRender" on-person-click="makeControllerRenderPersonWithId(personToRender.id)"></my-person-component>

You can interact with the parent scope state through a function. You can also use transclusion (not shown here)

React component:

First of all, don't be surprised by React strange syntax. the DOM nodes returned are not real DOM nodes but virtual DOM nodes and the source you can see here is compiled into normal javascript. in React the directive and its template are all put together.

var PersonComponent = React.createClass({  render: function() {    return (      <div className="person" onClick={this.props.onPersonClick}>        // Use {this.props.personModel} to display the person data      </div>    );  }});// Parent code:var personModel = ...var onPersonClickFn = doRenderPersonWithId.bind(this,personModel.id);var myComponent = <PersonComponent personModel={personModel} onPersonClick={onPersonClickFn}/>React.renderComponent(myComponent,domNode);

You can interact with the parent component state through a function, like in Angular. Props of a component shocould be kept immutable.

You can also usethis.props.childrenWhich is the equivalent of Angular transclusion and permits to create useful wrapper components like Popup, Dialog...

var Popup = React.createClass({  render: function() {    return (<div className="popup">{this.props.children}</a>);  }});var popup = <Popup>Popup content</Popup>,React.renderComponent(popup,domNode);

Performance feedbacks

The author of BirdWatch uses AngularJs and reimplemented in a branch his project in React + ScalaJs and found out that there were better DOM rendering starts CES with React. You can some interesting stuff on his blog.

While using ngReact experimental project: the author observed better has CES on simple cases. At first there were problems withngReactRepeatDirective but it seems fixed now.

The ClojureScript's Om library based on React has pretty good Statistics CES on TodoMVC benchmark.

Both libraries provide some performance hints. React permits throughshouldComponentUpdate(oldProps,newProps,oldState,newState)To avoid computing unnecessary virtual DOM tree parts. AngularJs community has projects like bindonce which permit to disable the 2-way databinding to reduce the dirtychecking time when it's not needed.

My opinion

I like both frameworks. Angular provides a nice infrastructure, a big community and really focus on testability. React still lack of good practice documentation and you have to choose how to use it.

React is much easier to learn than Angular which I find sometimes quite hard when you want to create specific ves that interact with each others. it is worth investing little time in it, you'll be able to use it really soon.

React is easy to reason about because the immutable component props are your single source of truth, like the scope in Angular.

However I think if you don't have performance issues with Angular, there's no need to try to use React because React will probably only give you better know CES, and everything you can do in React can also be done in Angular.

I wocould recommend taking a look at ClojureScript's Om library which uses React. using immutable data structures permit to change the application state and to be able to optimize the comparison of 2 objects by relying on identity/reference check instead of deep consistency ity. this is useful to reduce the time spent inshouldComponentUpdateFor React and I guess the same logic may be used with Angular to avoid using the objectEquality = true argument of the $ watch method

Http://stackoverflow.com/questions/21111217/react-vs-angular

Comparison of backbone, AngularJS, and EmberJS:

1 backbone. for beginners, it is recommended that you first learn backbone instead of jQuery. because jQuery provides functions to operate DOM and Ajax data transmission. the function and purpose of Backbone is to provide a javascript MVC. The actual target Web is MVR. (Model, View, Router routing ). it is difficult to maintain the code because a beginner has a good code structure instead of using jQuery to operate DOM frequently as soon as it comes up.

This is the only function that supports backbone. backbone provides a Model layer to process the front-end data Model, and Router provides a front-end page route (currently, most of them are backend page routes, so you do not need to use them ). view provides page View modularization and scope. (it perfectly solves the problem of which component cannot be operated by the same component using id or class operations multiple times on a jQuery page ). view also comes with its own template engine.

Backbone does not provide any additional functions, such as operating dom or using jQuery. data transmission is also based on jQuery ajax. rest is encapsulated through Model.

Backbone also relies on a very useful library underscore. the js library encapsulates most js objects, array operations, such as loops, traversal, map, a filter object attribute, and deletion of a certain attribute. very convenient

Therefore, backbone is actually a library, not a framework.

2 Angular. angular officially targets HTML enhanced for web apps (enhancing the current web app) and AngularJS-Superheroic JavaScript MVW Framework (a Framework supported by hero music videos at any structural level)

Angular's current development pace is big and comprehensive, that is, you have all of them. After angular is used, you don't need to rely on any other libraries. angular will be available, and you will join it later.

Angular functions include
2.1 Data Binding refers to the MVVM structure. The purpose is to make developers completely forget to operate the DOM. Only data needs to be operated, and the html page will be automatically updated.
For example, var shownumber = 1. When shownumber is set to 2, the interface is automatically updated, and jquery.html () or. text () updates data. for this binding function, currently most of the website's js code can be deleted by 2/3.

2.2 module system, angular has its own module system, do not need to use require js or other module system. Currently, the third-party module has a lot of http://ngmodules.org/

2.3 The $ http built-in data transmission replaces jQuery's $. ajax and built-in promise, which is very easy to use. At the same time, the $ resource module officially developed supports restful interfaces.

2.4 The Dom operation has a simplified version of angular similar to jQuery. element. You do not need $ jQuery. at the same time, a large number of built-in command systems starting with ng-are provided to solve DOM operations through declarative binding in html templates. (declarative commands are a good news for front-end development that does not understand js, and js is no longer needed. show (),. hide (), which is directly written to the html Tag)

2.5 page Routing System

2.6 built-in a very easy-to-use html5 Form Verification System

2.7 built-in Event Systems starting with ng-commands, such as ng-click

2.8 The built-in filter system is very considerate. For example, if you write the time as 2012.01.01, you only need to use data | xxxx-xx, or the currency symbol to change the RMB to USD {amount | currency: "USD $" }}, very considerate.

2.9 integration of array object operation methods, it seems that there is no need for Methods Starting with. angular. xxx in underscore. js (currently I still use underscore)

2.10 animation effect: angular1.2 is divided into an independent module ng-animate. You only need to write the style name in html and the animation will come out automatically. You don't have to worry about js Code.

2.11 cookie operation Template

2.12 mobile event Module

2.13 html Tag filter to prevent illegal characters or something.

There are many other problems. angular positioning is big and comprehensive. In fact, you can also feel the difference between the "Framework" and "library ".

3. Ember is positioned as a framework, which was originally an internal project of apple.
Ember provides the MVC structure and backbone is very similar.
However, the view of ember integrates the data binding function. handlebar is used as the template engine (angular templates are DOM templates and backbone, and ember templates are different)
Ember also integrates routing, a variety of easy-to-use Attribute operation methods, restful ajax.
However, compared with angular, Ember does not have many functions.

Http://segmentfault.com/q/1010000000173226