2013-07-18 19:28
為了更好地描述Meteor和AngularJS為什么值得一談,我先從個人角度來回顧一下這三年來WEB開發(fā)的變化: 三年前,我已經(jīng)開始嘗試前后端分離,后端使用php的輕量業(yè)務(wù)邏輯框架。但當(dāng)時前端還沒有成熟且廣泛流行的業(yè)務(wù)邏輯框架。所以在做產(chǎn)品開發(fā)時我仍然選用drupal等整體開發(fā)框架。開發(fā)時常常需要在javascript和php間切換,同時還要自己搞定數(shù)據(jù)庫。此時的開發(fā)模型圖是這樣(紅色箭頭和紅色塊都表示工作重災(zāi)區(qū)): 隨著對用戶體驗(yàn)的追求,我開始把業(yè)務(wù)邏輯往前端推移,于是馬上遇到了前端數(shù)據(jù)與頁面展示綁定的問題,業(yè)務(wù)邏輯簡單時還能用jquery搞定。越來越復(fù)雜后,開始嘗試使用backbone等前框架來規(guī)范數(shù)據(jù)層和做數(shù)據(jù)與視圖的綁定,用requireJS做模塊化和延遲加載。同時異步處理等編程模型也都開始進(jìn)入實(shí)戰(zhàn)。后端采用RESTful接口規(guī)范。此時的開發(fā)模型圖是這樣: 一年前左右,接觸到knockout和AngularJS,感受到數(shù)據(jù)和視圖自動綁定的美妙開發(fā)體驗(yàn)后,立即拋棄Backbone。此時的開發(fā)已經(jīng)徹底前后分離、前端業(yè)務(wù)數(shù)據(jù)層和視圖層分離。接下來又開始陸續(xù)使用coffeescript 、jade、less進(jìn)一步減少代碼量。用grunt做自動編譯、測試、和檢測文件改動自動刷新瀏覽器。一切都已經(jīng)比較完美了,除了后端仍然要對數(shù)據(jù)持久化做不少工作,除了前端要想實(shí)時反映數(shù)據(jù)改變?nèi)匀灰喸兓蛘哂脀ebSocket連接服務(wù)器。這時的開發(fā)模型圖已經(jīng)是這樣了: 只差一點(diǎn)就完美了,Meteor就是這一點(diǎn)。Meteor是一個基于nodejs、webSocket、mongoDB的整體開發(fā)框架,在它的實(shí)現(xiàn)中,前后端的數(shù)據(jù)模型已經(jīng)幾乎沒有差別。 意思就是,前端對數(shù)據(jù)模型進(jìn)行任何改動,只要調(diào)用“save”方法,所有數(shù)據(jù)就自動存到服務(wù)器端的mongoDB中了——終于可以忘了主動發(fā)送請求給服務(wù)器,終于可以忘了服務(wù)器要和前端實(shí)現(xiàn)幾乎一樣的數(shù)據(jù)模型層 而任何前端“訂閱的”后端數(shù)據(jù)出現(xiàn)改動,前端數(shù)據(jù)模型也會馬上自動得到了更新——終于可以忘了主動輪詢,終于可以忘了拿到后端數(shù)據(jù)再解析成前端模型。除了前后端模型的雙向自動綁定,Meteor同時還實(shí)現(xiàn)了數(shù)據(jù)到前端模板的自動更新。 不過,Meteor的模板在處理視圖到模型的改動時擴(kuò)展性不如AngularJS。因此,將AngularJS和meteor結(jié)合是最好的選擇。到這里,快速Web開發(fā)模型終于完成: 除了模型的自動綁定與更新,meteor還提供了大量進(jìn)一步加速開發(fā)的機(jī)制。如:
以下馬上來看一個實(shí)際開發(fā)的例子,制作一個為公司錄入應(yīng)聘人員信息的系統(tǒng)。 需求:
開始寫業(yè)務(wù)邏輯之前,我們先開始為準(zhǔn)備一些開發(fā)工具和環(huán)境。首先,我要求能用coffescript代替javascript,less代替css。安裝完meteor之后,進(jìn)入項(xiàng)目木文件夾。在命令行中輸入如下代碼 meteor create myapp meteor add less meteor add coffeescript 然后,我想在前端使用jquery,和meteor提供的賬戶系統(tǒng)來支持google oauth授權(quán)。繼續(xù)輸入: meteor add jquery meteor add account-ui meteor add account-google 最后,將angularJS整合進(jìn)來:在項(xiàng)目文件夾中創(chuàng)建如下目錄層級: client中的內(nèi)容會全部自動加載到頁面上,具體加載順序請參考官方文檔。server中的文件會在應(yīng)用啟動時自動運(yùn)行。public中文件將作為靜態(tài)資源供外部訪問。 因?yàn)锳ngularJS對數(shù)據(jù)模型改動的檢測是通過“dirty check”的方式(見Angular官方文檔)。所以要使用插件來讓Meteor數(shù)據(jù)改動能通知到AngularJS,以此觸發(fā)視圖變化。這個插件就是上圖中的angular.meteor。 接下來說用AngularJS的ui-route模塊來管理頁面路由,將應(yīng)用變成單頁: 加入“使用google賬號”登錄的功能: 當(dāng)新增一個應(yīng)聘者時,給面試官發(fā)郵件: 這里應(yīng)該注意到的是,Meteor對于數(shù)據(jù)的操作完全是標(biāo)準(zhǔn)的MongoDB語法。剩下的業(yè)務(wù)邏輯用AngularJS的視圖與模型很快就可以實(shí)現(xiàn)了,這里不再贅述。 最后看看系統(tǒng)的效果截圖,添加新的應(yīng)聘人信息: 面試結(jié)果記錄: 總結(jié)整個開發(fā)過程,可以都看到的是,幾乎沒有后端開發(fā),只要前端完成,應(yīng)用基本上就完成了。并且一步就可以使用coffeescript、less等,不再需要自己搭建復(fù)雜的開發(fā)環(huán)境。這樣的開發(fā)體驗(yàn),在目前來說,幾乎已經(jīng)到極致了。 當(dāng)然,要進(jìn)入真正產(chǎn)品級開發(fā),Meteor還有一些問題要克服,如“支持多種數(shù)據(jù)庫”,“如何部署到集群”,“實(shí)時數(shù)據(jù)增加了服務(wù)器負(fù)載”等。好在Meteor目前收到的關(guān)注已經(jīng)特別高,并且有了大量的第三方開發(fā)者,進(jìn)入產(chǎn)品級開發(fā)的步伐越來越快。我們完全可以期待,這塊拼圖成熟之后,將給整個web開發(fā)新注入一股強(qiáng)大動力。 |
|