Meteor+AngularJS：超快速Web開發

    爲了更好地描述Meteor和AngularJS爲何值得一談，我先從我的角度來回顧一下這三年來WEB開發的變化：

    三年前，我已經開始嘗試先後端分離，後端使用php的輕量業務邏輯框架。但當時前端尚未成熟且普遍流行的業務邏輯框架。因此在作產品開發時我仍然選用drupal等總體開發框架。開發時經常須要在javascript和php間切換，同時還要本身搞定數據庫。此時的開發模型圖是這樣（紅色箭頭和紅色塊都表示工做重災區）：

    隨着對用戶體驗的追求，我開始把業務邏輯往前端推移，因而立刻遇到了前端數據與頁面展現綁定的問題，業務邏輯簡單時還能用jquery搞定。愈來愈複雜後，開始嘗試使用backbone等前框架來規範數據層和作數據與視圖的綁定，用requireJS作模塊化和延遲加載。同時異步處理等編程模型也都開始進入實戰。後端採用RESTful接口規範。此時的開發模型圖是這樣：

    一年前左右，接觸到knockout和AngularJS，感覺到數據和視圖自動綁定的美妙開發體驗後，當即拋棄Backbone。此時的開發已經完全先後分離、前端業務數據層和視圖層分離。接下來又開始陸續使用coffeescript 、jade、less進一步減小代碼量。用grunt作自動編譯、測試、和檢測文件改動自動刷新瀏覽器。一切都已經比較完美了，除了後端仍然要對數據持久化作很多工做，除了前端要想實時反映數據改變仍然要輪詢或者用webSocket鏈接服務器。這時的開發模型圖已是這樣了：

 

    只差一點就完美了，Meteor就是這一點。Meteor是一個基於nodejs、webSocket、mongoDB的總體開發框架，在它的實現中，先後端的數據模型已經幾乎沒有差異。

    意思就是，前端對數據模型進行任何改動，只要調用「save」方法，全部數據就自動存到服務器端的mongoDB中了——終於能夠忘了主動發送請求給服務器，終於能夠忘了服務器要和前端實現幾乎同樣的數據模型層

    而任何前端「訂閱的」後端數據出現改動，前端數據模型也會立刻自動獲得了更新——終於能夠忘了主動輪詢，終於能夠忘了拿到後端數據再解析成前端模型。除了先後端模型的雙向自動綁定，Meteor同時還實現了數據到前端模板的自動更新。

    不過，Meteor的模板在處理視圖到模型的改動時擴展性不如AngularJS。所以，將AngularJS和meteor結合是最好的選擇。到這裏，快速Web開發模型終於完成：

 

    除了模型的自動綁定與更新，meteor還提供了大量進一步加速開發的機制。如：

• 先後端載入文件文件的自動化管理。只要將相應的文件扔到先後端相應的目錄中，就會自動載入到頁面，或者在後端自動運行。
• 「智能包」管理。Meteor提供了模塊的機制，讓第三方開發者能夠寫「智能包」來增強先後端的功能。如，加載了「coffeescript」智能包後。不管先後端用coffeescript寫的代碼都會自動編譯成javascript後再載入。
• 內置大量「智能包」，有進一步支持開發的包，如「less」、「underscore」、「coffeescript」，還有通用業務邏輯包。如「帳戶管理」，並且已經集成主流oauth帳號登錄。
• 自動檢測文件改動，自動刷新瀏覽器。
• 自動化部署。

    如下立刻來看一個實際開發的例子，製做一個爲公司錄入應聘人員信息的系統。

    需求：

• 能指派面試官，自動郵件通知。
• 支持google郵箱登錄。
• 體驗流暢、單頁應用。

    開始寫業務邏輯以前，咱們先開始爲準備一些開發工具和環境。首先，我要求能用coffescript代替javascript，less代替css。安裝完meteor以後，進入項目木文件夾。在命令行中輸入以下代碼

    meteor create myapp

    meteor add less

    meteor add coffeescript

 

    而後，我想在前端使用jquery，和meteor提供的帳戶系統來支持google oauth受權。繼續輸入：

    meteor add  jquery

    meteor add  account-ui

    meteor add  account-google

 

    最後，將angularJS整合進來：在項目文件夾中建立以下目錄層級：

client中的內容會所有自動加載到頁面上，具體加載順序請參考官方文檔。server中的文件會在應用啓動時自動運行。public中文件將做爲靜態資源供外部訪問。

    由於AngularJS對數據模型改動的檢測是經過「dirty check」的方式（見Angular官方文檔）。因此要使用插件來讓Meteor數據改動能通知到AngularJS，以此觸發視圖變化。這個插件就是上圖中的angular.meteor。

    接下來講用AngularJS的ui-route模塊來管理頁面路由，將應用變成單頁：

    加入「使用google帳號」登陸的功能：

    當新增一個應聘者時，給面試官發郵件：

    這裏應該注意到的是，Meteor對於數據的操做徹底是標準的MongoDB語法。剩下的業務邏輯用AngularJS的視圖與模型很快就能夠實現了，這裏再也不贅述。

    最後看看系統的效果截圖，添加新的應聘人信息：

    面試結果記錄：

    

    總結整個開發過程，能夠都看到的是，幾乎沒有後端開發，只要前端完成，應用基本上就完成了。而且一步就可使用coffeescript、less等，再也不須要本身搭建複雜的開發環境。這樣的開發體驗，在目前來講，幾乎已經到極致了。

    固然，要進入真正產品級開發，Meteor還有一些問題要克服，如「支持多種數據庫」，「如何部署到集羣」，「實時數據增長了服務器負載」等。好在Meteor目前收到的關注已經特別高，而且有了大量的第三方開發者，進入產品級開發的步伐愈來愈快。咱們徹底能夠期待，這塊拼圖成熟以後，將給整個web開發新注入一股強大動力。