【轉】全Javascript的Web開發架構：MEAN和Yeoman【譯】

引言

最近在Angular社區的原型開發者間，一種全Javascript的開發架構MEAN正忽然流行起來。其首字母分別表明的是：(M)ongoDB——noSQL的文檔數據庫，使用JSON風格來存儲數據，甚至也是使用JS來進行sql查詢；(E)xpress——基於Node的Web開發框架；(A)agular——JS的前端開發框架，提供了聲明式的雙向數據綁定；(N)ode——基於V8的運行時環境（JS語言開發），能夠構建快速響應、可擴展的網絡應用。

MEAN的支持者宣稱，若是整個開發棧均能使用JS，必然會大大地提升效率，這一點毋庸置疑是一個很大的賣點。這樣一來，開發人員（不管是前端仍是後端）不只能使用一致的數據模型，在其它方面也一樣能夠得到一致的編程體驗。

例如，拿Mongo來講，你可使用類JSON格式（BSON，二進制的JSON）來存儲數據，而後在Express/Node中調用JSON查詢語句，再將結果以JSON格式傳給前端的Angular顯示，這樣，也天然使調試程序容易了不少。

注意: 事實上，在MEAN架構中，前端的Angular並非必須的，你能夠將它替換成其餘的前端框架，如Backbone、Ember或者Polymer。

爲什麼選擇MongoDB？

如上所提，這個架構最重要的優點在於能使用單一語言，這也是其選擇了Mongo的首要緣由。 這裏就不討論noSQL的是與非了。一些人對MEAN架構的指責在於，MongoDB能夠很好地勝任中小型的應用，可是對於大規模應用（百萬級用戶）來講可能就捉襟見肘。我想說的是，這徹底取決於你如何使用它。

SQL數據庫自己是強類型的，所以能夠在很大程度上保證某種層次的一致，從而確保許多類型的髒數據一開始就沒辦法進入數據庫。而NoSQL則是弱類型的數據庫，這使得它在數據驗證方面力不從心，而只能交給開發人員來實現，基於這樣的特性，它尤爲適合存儲那些不規範的數據，特別是在原型開發階段，此時數據模型正在經歷快速變化。

SQL和noSQL間的技術差異，歸根結底是要在性能和穩定性間做出平衡。有些狀況下，對數據的事務處理一旦設定後就不會輕易變化，那麼此時使用Mongo就很是合適；然而有時候也會涉及更爲複雜的事務處理，會牽扯到許多獨立的業務邏輯，因爲Mongo並無提供一個簡單的數據模型來支持必定級別的原子操做，所以SQL在這個時候能夠派上用場。

但不管如何，不論你是否選擇MEAN中的M，你最終都須要根據自身的需求選擇出合適的工具來作正確的事情，

爲什麼是Express?

能夠簡單地把Express當作是一個在Node平臺下搭建Web應用的工具集。在Node的基礎上，它提供了許多簡潔的接口來建立請求節點、處理cookie等，此外還提供了許多功能來幫助你搭建本身的服務器。總的來講，Express在如下幾個方面有優點：

• 設置REST路由簡單致極：

1	app.get(/account/:id, function(req, res){ /* req.params('id') is available */ });

• 支持Jade或Mustache等模板引擎
• 自動HTTP頭處理:

1	app.get('/', function(req,res){ res.json({object: 'foo'}); });

• 支持Connect中間件，能夠插入額外請求或響應處理，如用戶驗證
• 提供輔助函數解析POST請求
• 防範XSS
• 優雅的錯誤處理

如何快速上手MEAN

若是想要很快上手MEAN，那麼mean.io是一個很不錯的選擇。該項目旨在解決MEAN架構中一些常見的集成問題, 目前維護得很好，文檔也很清楚，並且能夠很方便地自行添加第三方庫，還能和Yeoman配合使用（經過 generator-mean by James Cryer）。

在進一步閱讀前，先假定咱們贊成如下觀點：（a）Mongo至少很是適合於全Javascript堆棧的原型設計；（b） 認可即便像Angular般如日中天，終有一天也會被其餘的一些JS框架給取代，只要它們能幫助咱們快速方便地將這個架構快速搭建起來。

接下來就要介紹Yeoman 了，它由3個你所熟知的工具構成：

• Grunt：用於生成，預覽和自動化測試你的項目，這要特別感謝由Yeoman和grin t-contrib團隊建立的許多grunt tasks。
• Bower：前端的依賴管理工具，有了它你不再須要手動下載和管理第三方JS庫了。
• YO：快速生成一個新的應用，包括配置好你的Grunt任務以及你極有可能會用到的Bower依賴。

筆者在一年之前，曾和其餘一些人建立過一個叫ExpressStack的項目，其想法很簡單，就是要提供一些工具可以快速生成構建全JS的Web應用所須要的一切。可是，這個項目夭折了，儘管如此，許多相似的項目卻如雨後春筍般涌現出來。

下面對這些項目做些介紹：

注意: 你可能須要裝好Yeomam(npm install -g yo)和如下一些生成器（npm install -g <generator-name>）。

generator-angular-fullstack

這是一個AngularJS的生成器，集成了Express,可選MongoDB。主要功能以下：

• 支持客戶端和服務端的Livereload。
• Express server集成了grunt tasks。
• 內建了方便的部署流程。
• 支持Jade。

可參考: http://tylerhenkel.com/creating-apps-with-angular-and-node-using-yeoman/

generator-meanstack

另外一個MEAN架構的生成器，集成了grunt-express，功能以下：

• 在generator-angular的基礎上，用express取代了Connect。
• 支持客戶端和服務端的Livereload。
• 使用app_grunt.js文件來啓動應用，而在app.js中定義路由。
• 目錄結構基本沿襲了generator-angular的風格，只做了少量的改動。

可參考：https://github.com/Grievoushead/generator-express-angular

generator-mean-seed

集成了Mongo，Express，Angular，Yeoman，Karma和Protractor（做自動測試）。

generator-klei

和其餘的很相似，不過使用的是Mongoose和Stylus，其餘的一些功能包括：

• 其目錄結構很是容易擴張（包含了一個TODO List的應用例子）
• 一個配置完整的Gruntfile，集合了livereload, linting, concatenation, minification等.
• 使用exctrl來自動掛載API。
• 使用了grunt-injector，從而無需手動修改Html的layout文件，就能夠自動裝載新添加的js和css。
• 使用Karma, Mocha和Chai來進行前端的單元測試。

ultimate-seed-generator

該生成器很是全面，添加了許多第三方的庫，包括Passport用於用戶登陸，Browserify加載js。

• 集成了AngularUI, Barbeque（用於任務隊列管理）和Bootstrap
• 集成了Bower, Browserify，Express和Font Awesome
• 集成了Grunt, Handlebars, jQuery, JSHint和Karma/Mocha
• 支持LESS/LESSHat, Livereload和Lodash/Underscore
• 集成了Modernizr, MongoDB/Mongoose和Passport

該如何作出選擇?

看了這麼多的生成器，天然要問，我該選擇哪個呢？事實上，以上列表是有順序的，依據的是其與最新版的Yeoman的兼容性以及維護的活躍度。

全Javascript的架構是否適合於產品級的應用呢？

不得不認可，若是開發堆棧的每一層都能使用JavaScript將會是一件很棒的事情（至少對於原型開發來講是這樣），然而千萬要注意，不要爲了追求這一目標，而把本身而束縛住了。儘管的確有愈來愈多的大規模應用都在採用相似的架構，如Walmart、LinkedIn，但並不意味着模仿他們就必定能成功。

另外一個須要注意的是，相對於其餘的語言（如Ruby，Python或Java），在Node上搭建後端要困可貴多。你可能要本身處理內存泄漏，避免在事件循環中進行耗時運算，還要很是當心異常處理，若是這些處理不當就頗有可能會致使整個應用服務器崩潰，可是這些問題在其餘平臺上卻已經處理得很好了。然而，這並非說，Node不能運用在生產環境下，固然能夠，但要格外用心。

實話實說，想要「一攬子」爲Web應用提供一個大而全的解決方案將很是困難，MEAN架構也確定有其侷限性。在前端與後端的設計模式、原則和風格中有大量的演化，若是你以爲PHP或Rails是更明智的選擇，那就繼續使用下去，不然的話，不妨試試MEAN，至少在當下值得一試。

【原文：http://addyosmani.com/blog/full-stack-javascript-with-mean-and-yeoman/ 】