2015前端各大框架比较（angular,vue,react,ant）

前端流行框架大比拼

 

• angular

• vue

• react

• ant-design

 

angularjs

 

angular是个MVVM的框架。针对的是MVVM这整个事。angular的最主要的场景就是单页应用，或是有大量数据绑定的状况。

特性

 

• 双向数据绑定

• ioc依赖注入

• 指令

 

上面这几点用起来确实很爽，随便指定个区域，配一个controller，而后里面的东西就都在scrope里了，确实很方便

 

若是各位想看，参见 https://github.com/i5ting/ionic_ninja/blob/master/angularjs/angularjs_sang.md

 

其实angular最好的实践是ionicframework的，读读ionic源码，才知道啥叫规范

 

vue

 

vue是尤同窗写的一个MVVM中ViewModel中的库。是针对MVVM中的一层。应用的场景比较广，只想用vue功能的话就用。

 

• Extendable Data bindings

• Plain JS object models

• API that simply makes sense

• Build UI by composing components

• Mix & matching small libraries

 

这个项目是很是活跃的，90后同窗的精力很旺盛啊。

 

从最初的ViewModel作到今天的各类功能，作加法还真是挺可怕的事儿。

 

它的guide上说能够作Building Larger Apps，见http://vuejs.org/guide/application.html

 

各类路由，组件啥的都有，的确很强大

 

可是不少人都搞不定的，首先这么多概念就玩死一票人了，其次，它有太多东西须要本身去实现，就是能够复用的东西太少了，若是是小项目玩玩无所谓，若是是大的项目，水平通常的程序员是很难hold住的。

 

这就比如react出来，很好，但没有啥可复用的东西，写来是很是痛苦，因此在下面我介绍了react以后，给出了一个更好的基于react的解决方案。

 

reactjs

 

https://github.com/facebook/react

 

Virtual DOM

 

Virtual DOM是reactjs的最核心概念，我拷贝一段来讲明它

在Web开发中，咱们总须要将变化的数据实时反应到UI上，这时就须要对DOM进行操做。而复杂或频繁的DOM操做一般是性能瓶颈产生的缘由（如何进行高性能的复杂DOM操做一般是衡量一个前端开发人员技能的重要指标）。

 

React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时全部的DOM构造都是经过虚拟DOM进行，每当数据变化时，React都会从新构建整个DOM树，而后React将当前整个DOM树和上一次的DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新。

 

并且React可以批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，而后又从B变成A，React会认为UI不发生任何变化，而若是经过手动控制，这种逻辑一般是极其复杂的。尽管每一次都须要构造完整的虚拟DOM树，可是由于虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。这样，在保证性能的同时，开发者将再也不须要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只须要关心在任意一个数据状态下，整个界面是如何Render的。

 

说那么多你可能都没明白，上例子

 

helloworld

 

var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});React.render( <HelloMessage name="John" />, document.getElementById('container'));

 

首先，这是一种 HTML-like 的语法，叫jsx，能够理解成coffee，typescript之类的，须要编译

核心就是React.render，说明这个组件放在什么地方，好比上面的例子就是

 

<div id='container'> ...
</div>

 

这样页面就能够拆分红n个小块，每块各自为政，即所谓的组件化（也就积木同样）

 

再来个复杂点的，下面给出的是带有状态的组件

 

var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); React.render(<Input/>, document.body);

 

视图相关的3个概念

 

• Props（属性，就是element上的attrs，换个名字property，变成复数，即props）

• State（写过view组件的基本都会知道，按钮有三态，Normal，Highlight，Selected，包括extjs，jquery里的大部分ui框架都是有状态的。）

• Event（其实还应该算一个就是dom事件，上面的例子就把onChange的handler编译后的handleChange方法，这要感谢jsx）

 

了解了上面这些，就能够写代码了，由于

 

• 属性，解决了view的定义问题，即语义描述

• 状态，是view的有穷状态机，根据状态决定ui和行为

• 事件，是view里元素的行为

 

单独的view的话，实际上上面的东西已经足够了，可是每每咱们用的时候是view和viewController一块儿用的。

 

但reactjs里并无却分这个，也就是说view和controller都在组件里，好比ios的可是每每咱们用的时候是view和viewController里就有不少生命周期方法，这些在reackjs里也被实现了

 

组件的生命周期

 

组件的生命周期，另外的名字是状态回调，和上面讲的状态的惟一差异，上面的状态是它里面的元素，而组件的生命周期是它本身

组件的生命周期分红三个状态：

 

• Mounting：已插入真实 DOM

• Updating：正在被从新渲染

• Unmounting：已移出真实 DOM

 

React 为每一个状态都提供了两种处理函数，will 函数在进入状态以前调用，did 函数在进入状态以后调用，三种状态共计五种处理函数。

 

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

 

此外，React 还提供两种特殊状态的处理函数。

 

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否从新渲染时调用

 

FAQ

 

1）不少人最常问的问题：好比和jQuery集成能够吗？

reactjs很小，并无jq提供的功能，能够说它们是互补的，能够结合着使用

 

2）react比angular好用吗？

reactjs是组件化的最佳实践，但angularjs的mvvm等好用功能，它是没有的，因此更好用说不上，姑且能够认为各有千秋吧

 

总结

 

总结一下，关于reactjs，我没有讲virtual dom，而是主要讲了4个概念

 

• 属性

• 状态

• 事件

• 生命周期

 

若是你掌握了这4点，实际上就已经能够很好的使用reactjs了，好比通常view是要和ajax放到一块儿用的，这时候，只要在组件的生命周期里处理便可，实际上也仍是上面的东西，此处就不罗嗦了。

 

todo（reactjs高级篇）

 

• 加点 路由和 数据单向流的 东西吧

• 或者 是服务器端渲染的 数据请求逻辑 什么的

• 若是能用redux 和express作个例子 那就更好了

 

ant-design

 

https://github.com/ant-design

 

特性

 

• 提炼自企业级后台产品的交互语言和视觉风格。

• 丰富实用的 React UI 组件。

• 基于 React 的组件化开发模式。

• 背靠 npm 生态圈。

• 基于 webpack 的调试构建方案，支持 ES6。

 

咱们来换一种说法

 

• 基于react组件化

• 代码在npm里，作到模块化

• 经过webpack构建，更灵活

 

至于说es几，那只是噱头而已

 

经过npm，能够更好的和nodejs结合，利用node的生态来扩展，其实bower等也相似，但对package.json不友好，因此我是很看好这种方式的。

 

之后js大一统，npm就不在只是nodejs package manager的，而是js package manager

 

另外它的界面设计的很好，模块化的作的也很好，我很是喜欢，惟一的缺点是它对nodejs的版本要求过高了，会让一小部分人不适应的。

 

全栈之路

 

• js是首选

• rails也不错

• 其余，要折腾好久

 

总结

 

你们可能都有的疑问，这么技术很是好，个人项目要不要上呢？

 

先从项目维度看

 

• 小项目，无所谓，能够尝鲜，填坑和重写同样简单

• 大项目，伤不起啊，若是不成熟或者无良好生态，当慎重，经得起诱惑

 

从人的维度看

 

• 牛人，无所谓，反正时间和能力都能挤出来，能学到不少东西，但也也要打进去不少夜晚

• 其余人，量力而行

 

我不会在公司项目里使用vue，但我同意evan的作法，虽然不提倡造轮子，但问题反过来看，它又未尝不是一个技术人的热爱呢？

生命不息，折腾又怎会中止,前端或者说js领域的变化愈来愈快，你们准备好迎接多是机遇也多是灾难的明天吧，加油！