1. 程式人生 > >Meteor AngularJS 超快速Web開發

Meteor AngularJS 超快速Web開發

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

                      為了更好地描述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開發新注入一股強大動力。   
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述