前端流行框架大比拼
-
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領域的變化越來越快，大家准備好迎接可能是機遇也可能是災難的明天吧，加油！