技术选型与前端流行框架大比拼

技术选型

这是一个语言之争一样的话题

有人提fibjs，说性能如何如何，但我并不看好，原因很简单，一门语言或者框架，好或者不好，不只是框架本身和作者的魅力，更多的是社区，或者说是生态

我们就以js来讲，著名的jQuery的插件机制，才是jq最好的地方，什么这个ui那个ui的，大部分都是构建这些插件机制之上的。

比如nodejs的包管理器，npm，它的出现解决了包管理依赖问题，于是n多人写了m个包，于是nodejs就火了，各种社区，比如cnodejs.org等。fibjs即使再nb，也无法和node来比较的。这是绝对性的优势

这东西有多重要？

如果各位熟悉go，其实go最大的诟病就是缺少npm一样的包管理器，因为go get实在是太恶心了

如果有npm一样的go的包管理器，我也会像tj一样转向go的

但要辩证的看待这个问题，实际上go的并发非常稳定，非常强大，虽然美中不足，还是有很多人用的，并且长期看好。就好比当年的cocoapod，最开始的时候我真的觉得这货就一个ruby写玩具，各种问题，但随着ios开发的火爆以及各种生态的完善，pod竟然成了ios开发里的必备技能，虽然有无数坑，可是“痛，并快乐着”

人生就是这么贱，那大家就都这么贱贱的玩下去吧，哈哈，回到正题，看一下技术选项和我们现在比较流行的框架做一个比拼

前端流行框架大比拼

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）

了解了上面这些，就可以写代码了，因为