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 byFlatiron
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 anngReact
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 under50ms
the difference is nearly imperceptible. The authors of React states that it is perceptible, particularly in touch devices, and tries tomake
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 iscompiled
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 usethis.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 ofBirdWatchuses
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 someinteresting
stuff on his blog.
While usingngReact
experimental project: the author observedbetter
performanceson simple cases. At first there were problems with thengReactRepeat
directive
but it seemsfixed now.
TheClojureScript's
Om librarybased on React has pretty good performances 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 likebindoncewhich
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 atClojureScript's
Om librarywhich 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 inshouldComponentUpdate
for
React and I guess the same logic may be used with Angular to avoid using theobjectEquality=trueargument
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 还是没有那么多功能.
http://segmentfault.com/q/1010000000173226
分享到:
相关推荐
别责怪框架:我使用AngularJS和ReactJS的经验.pdf
Python零基础10天进阶班【17网站开发基础(下)】
AngularJS 和 ReactJS 示例安装 cd sampleappnpm install跑步 cd sampleappnpm run serveropen http://127.0.0.1:3000作者:
AngularJS和ReactJS性能该存储库是基于Ben Nadel在他的博客文章“ 中的出色工作。 原始示例的源代码在。 该代码采用原始代码,并添加了Angular Benchpress测试以将实际数字放在以下代码上: 渲染大网格。 在网格内...
我开发的测试应用程序,用于查看AngularJS和ReactJS之间的开发差异。 后端使用NodeJS(Express)+ MongoDB的非常简单的应用程序,它为搜索提供了非常简单的REST服务,以及两个前端实现:ReactJS和AngularJS,均使用...
H5-JavaScript-CSS-HTML:Web前端角(Angularjs,Reactjs,Vuejs,Ember,JQuery,其他...)
网络示例Jquery、Html、Css 示例、ReactJS、AngularJS .. ReactJS 教程(NodeJS 环境中的客户端 ReactJS、服务器端 ReactJS): AngularJS 教程: NodeJS 教程: 引导教程:
它可以使用您能想到的任何 JS 框架(AngularJS、ReactJS、RxJs)来实现。 概述 创建此 App 主要是为了支持所有试图将后端和 ui 层分开的 UI 代码。 连接两者的方法是通过 REST API 服务。 这个应用程序使用: ...
ReactJS和AngularJS 基本应用程序,演示如何在AngularJS指令中使用ReactJS可视化
Admin Template for Angular4, AngularJS, ReactJS, Static HTML5/jQuery, Material Design, MVC5/6, NetCore, Ruby on Rails MeteorJS and MeanJS
angularjs,reactjs,vuejs前端三大框架的组件之间从脚手架安装到传值的区别
React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件。 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。 ...
公司内部的一次关于ReactJS知识分享会的PPT演示文稿,分别从ReactJS的起源与现状、ReactJS的认识与优点、ReactJS与AngularJS的对比以及ReactJS的入门等4个方面进行阐述,内容比较全面,层次分明,很有借鉴意义。
smartadmin, angular, react, ajax bootstrap模板 支持多个前端框架版本,如Angularjs,reactjs,ajax,ruby on rails, asp.net
SPA 入门套件SPA Starter Kit是一个基于AngularJS 、 ReactJS AMD和ES6的单页应用程序 (SPA) Starter 项目展示前端设计模式和最佳实践。演示此静态 gh-pages 由。特征随处使用 ES6 和 AMD 构建模块化应用程序。 用于...
React示例 AngularJs和ReactJS之间进行比较的基本示例。
骨干,AngularJS已经成为昨天的黄色,reactjs蓬勃发展,而另一个更轻量级的vue开发势头更加猛烈,既知道angularjs和reactjs的优势。 2,Vue能做什么移动互联网的需求已经远远高于PC端,尤其是混合H5应用,但是性能...