一些关于AngularJS和ReactJS的资料

AngularJS：

Everything you need to understand to start with AngularJS   介绍了AngularJS的主要构成

AngularJS Tutorial – Learn AngularJS in 30 minutes    介绍了Controller, Scope, Binding, Filtering, Hiding and Showing, Click event

Learn AngularJS With These 5 Practical Examples      介绍了5个例子：Navigation Menu， Inline Editor（双向绑定），Order Form（类似于购物车算总价钱），Instant Search（自定义filter），Switchable Grid（切换instagram的grid和list显示方式）

ANGULAR JS TUTORIAL   demo    一个通过控制scrollbar来画圆形的例子

A Step-by-Step Guide to Your First AngularJS App    一个list的例子，有过滤功能

AngularJS入门教程  

ReactJS：

一个jsfiddle的HelloWorld例子

React JS and JavaScript in Facebook     一个facebook工程师对ReactJS的中文科普

ReactJS 和 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 many people have Angular projects in production.

We can estimate the community size based on IRC channel frequentations: 130 for #reactjs VS 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 for:

• 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 directives 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 would 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 previously 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 gives better performances.

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

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

---

Similarities between React components VS Angular directives

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 should be kept immutable.

You can also use this.props.children which 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 performances with React. You can some interesting stuff on his blog.

While using ngReact experimental project: the author observed better performances on simple cases. At first there were problems with the ngReactRepeat directive but it seems fixed now.

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

Both libraries provide some performance hints. React permits through shouldComponentUpdate(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 directives 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 performances, and everything you can do in React can also be done in Angular.

I would 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 equality. This is useful to reduce the time spent in shouldComponentUpdate for 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

backbone, AngularJS, EmberJS 的一些比较：

1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web就是 MVR. (Model, View, Router路由). 对于初学者有一个良好的代码结构,而不是一上来就用jQuery频繁操作DOM,导致代码很难维护.

backbone功能仅限于此. backbone 提供了Model层处理前端数据模型, Router提供了前端页面路由(目前大多数都是后端提供页面路由,所以可以不用). View提供了页面视图的模块化和作用域.(完美解决了jQuery一个页面多次出现同一个组件通过id或class操作dom而导致无法分别哪个组件问题). View也自带自己的模板引擎.

backbone没有提供任何额外的功能. 例如操作dom还是用jQuery, 数据传输也是基于jQuery的ajax通过Model封装了rest.

backbone还依赖一个非常好用的库 underscore.js 这个库封装了大部分js对象,数组操作, 例如循环,遍历,map, filter对象某个属性, 删除某个属性等等. 很方便

所以backbone其实也是一个库,而不是框架

2 Angular, 目前在项目中完整大规模使用. Angular官方定位 HTML enhanced for web apps(增强目前web app) 和 AngularJS — Superheroic JavaScript MVW Framework (英雄般的MV 无论什么结构层次都支持的框架)

angular 目前的发展节奏就是 大而全, 就是你有我有全都有. 使用angular后,你不需要任何依赖其他库. angular都会有,现在没有以后也会加入.

angular 功能包括
2.1 数据绑定 就是MVVM 结构, 目的就是让开发者完全忘记操作DOM, 只需要操作数据,html页面就会自动更新
例如 var shownumber = 1, 那么你把shownumber = 2 时, 界面就自动更新了, 完全不需要用jQuery用.html()或.text()更新数据. 就这个绑定功能,目前大部分网站的js代码都能删掉 三分之二.

2.2 模块系统, angular 有自己的模块系统, 不需要在用require js 或其他模块系统. 目前第三方模块已经很多http://ngmodules.org/

2.3 数据传输 内置$http,取代了jQuery的$.ajax 而且内置promise,非常好用. 同时有官方做的$resource 模块 支持restful 接口

2.4 操作Dom 内置了一个简化版本的类似jQuery的angular.element, 完全可以不用$ jQuery. 同时提供大量内置的ng- 开头的指令系统通过在html模板中 声明式绑定 解决操作DOM问题. (声明式指令简直就是对不懂js的前端开发的福音,再也不用js的.show(),.hide()了, 直接写到html标签上)

2.5 页面路由系统

2.6 内置一套非常好用结合html5的表单验证系统

2.7 内置ng-指令开头的事件系统 例如ng-click等

2.8 内置非常贴心的过滤器系统, 例如你先把时间写成2012.01.01 只要用 data | xxxx-xx-xx ,或 货币符号把人民币改成美元 {{amount | currency:"USD$"}} ,真贴心.

2.9 集成数组对象操作方法, 看来underscore.js也不需要了. angular.xxx 开头的方法一大堆. (目前我还是用underscore)

2.10 动画效果, angular1.2版本后分为独立的模块 ng-animate 非常方法,只要在html写上样式名字动画自动就出来了,完全不用操心js代码

2.11 操作cookie的模板

2.12 移动端事件模块

2.13 html 标签过滤器, 防止非法字符什么的.

还有很多, angular定位就是大而全. 其实也能感觉到"框架" 与 "库" 的区别

3 Ember 定位是框架, 原来是苹果公司的内部项目.
ember提供了MVC结构 和 backbone 非常像.
但ember的view集成了数据绑定功能. 使用handlebar 作为模板引擎, (angular模板是DOM模板 和 backbone,ember都不一样)
Ember 还集成路由, 各种贴心易用的属性操作方法, restful ajax.
但Ember 对比angular 还是没有那么多功能.