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領域的變化越來越快，大家準備好迎接可能是機遇也可能是災難的明天吧，加油！

2015前端各大架構比較（angular,vue,react,ant）