一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Meteor+AngularJS:超快速Web開發(fā)

 quasiceo 2015-01-06
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ī)制。如:
  • 前后端載入文件文件的自動化管理。只要將相應(yīng)的文件扔到前后端相應(yīng)的目錄中,就會自動載入到頁面,或者在后端自動運(yùn)行。
  • “智能包”管理。Meteor提供了模塊的機(jī)制,讓第三方開發(fā)者可以寫“智能包”來加強(qiáng)前后端的功能。如,加載了“coffeescript”智能包后。無論前后端用coffeescript寫的代碼都會自動編譯成javascript后再載入。
  • 內(nèi)置大量“智能包”,有進(jìn)一步支持開發(fā)的包,如“l(fā)ess”、“underscore”、“coffeescript”,還有通用業(yè)務(wù)邏輯包。如“賬戶管理”,而且已經(jīng)集成主流oauth賬號登陸。
  • 自動檢測文件改動,自動刷新瀏覽器。
  • 自動化部署。
    以下馬上來看一個實(shí)際開發(fā)的例子,制作一個為公司錄入應(yīng)聘人員信息的系統(tǒng)。
    需求:
  • 能指派面試官,自動郵件通知。
  • 支持google郵箱登陸。
  • 體驗(yàn)流暢、單頁應(yī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)大動力。





    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    99久久精品国产麻豆| 91欧美日韩精品在线| 我想看亚洲一级黄色录像| 区一区二区三中文字幕| 美国欧洲日本韩国二本道| 精品人妻少妇二区三区| 日韩免费国产91在线| 国产成人精品一区二三区在线观看| 国产传媒欧美日韩成人精品| 日本 一区二区 在线| 日韩精品一级片免费看| 精品人妻一区二区三区免费看| 亚洲视频一区自拍偷拍另类| 欧美日韩精品久久第一页| 午夜色午夜视频之日本| 亚洲中文字幕日韩在线| 日本亚洲欧美男人的天堂| 不卡视频免费一区二区三区| 欧美亚洲综合另类色妞| 99久久精品免费看国产高清| 99秋霞在线观看视频| 国产女优视频一区二区| 国产精品欧美日韩中文字幕| 免费黄片视频美女一区| 91精品国产av一区二区| 青青久久亚洲婷婷中文网| 国产精品午夜福利在线观看| 最近最新中文字幕免费| 久久精品免费视看国产成人| 欧美激情一区=区三区| 人妻精品一区二区三区视频免精| 日韩性生活视频免费在线观看| 最近最新中文字幕免费| 99久久精品免费看国产高清| 五月婷日韩中文字幕四虎| 国产偷拍精品在线视频| 国产黄色高清内射熟女视频| 久久re6热在线视频| 精品一区二区三区免费看| 婷婷激情四射在线观看视频| 在线观看视频日韩精品|