Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone.js and MVW 101

930 views

Published on

Introducing MVW and Backbone.js at 101 level.

Published in: Engineering
  • Be the first to comment

Backbone.js and MVW 101

  1. 1. Mokoversity Backbone & MVW 101 2014.8.20 Jollen Chen <jollen@jollen.org> www.mokoversity.com
  2. 2. Mokoversity 為什麼需要 Backbone.js ?
  3. 3. Single Page Web Apps Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page- applications-and-apis/
  4. 4. Through a RESTful API Source: http://cyberasylum.janithw.com/tag/single-paged-applications/
  5. 5. MVC for Client Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。 http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/
  6. 6. SPAs and RESTful It’s difficult to build Single Page Applications that by simply using jQuery or MooTools. They don’t have formal structure. The browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc. Single-page web apps are the future. Backbone.js is essentially MVC for the client and allows you to make your code modular. http://backbonetutorials.com/why-would-you-use-backbone/
  7. 7. URL Router Source: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx
  8. 8. Mokoversity MVC, MVP 與 MVVM 觀念介紹
  9. 9. URL Router Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  10. 10. MVVM Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  11. 11. Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  12. 12. MVC vs MVVM MVC MVVM 寫程式不⽤用寫程式 Template + Control Logic Template + Data Binding
  13. 13. MVC vs MVP MVC MVP Controller 處理 User Inputs View 處理 User Inputs Controller uses Presentation Model Controller is Presentation Model
  14. 14. MVVM Source: http://mvcsharp.org/Overview/Default.aspx
  15. 15. MV* - Whatever 寫的好就是 MVP,寫不好就是 MVC;神⼈人級寫出來就是 MVVM。連 MVC 都沒有的是幼幼班。 Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design- pattern-in-dnn.aspx
  16. 16. Mokoversity TicTacToe
  17. 17. MVC 初體驗 • 將以⼀一個 TicTacToe 遊戲的實作: • 了解 MVC 的重點性 • MVC 的基本實作觀念
  18. 18. REST 與 JSON • 將 REST API 回傳的 JSON 資料,轉換成 HTML5 標籤,並顯⽰示在 UI 上 • 使⽤用 jQuery AJAX 呼叫 REST API 是⽐比較 Dirty 的⽅方式 • 須導⼊入 MVC 的框架
  19. 19. Key-Value Pairs • JSON 資料格式 • 將 JSON「套⽤用」到 Template { "name": "jollen"}
  20. 20. 使⽤用 AJAX 呼叫 REST API // 等候 HTML ⽂文件完成載⼊入! $(document).ready(function(){! ! initSubmitForm();! });! ! var initSubmitForm = function() {! // 使⽤用 ajax() 來呼叫 REST API! $.ajax({! url: 'http://localhost:3000/discussion/latest/3',! type: "GET",! dataType: "json",! complete: function(data, textStatus, jqXHR) {! console.log(textStatus);! },! success: function (data, textStatus, jqXHR) {! console.log(data);! }! });! ! return false;! };
  21. 21. 沒有 MVC 架構 • 典型沒有 MVC 架構的寫法 var dataMapping = function(data) {! for (i = 0; i < data.length; i++) {! var htmlCode = ! "<div class="alert alert-dismissable alert-info">"! + " <button type="button" class="close" data-dismiss=" alert" aria-hidden="true">×</button>"! + " <h4>jollen</h4>"! + data[i].message! +"</div>";! ! $('#message').append(htmlCode);! }! }
  22. 22. 關於 RESTful • 現代的 Web App 開發,以 REST API 的⽅方式 整合 Client(Device)與 Server • RESTful 是 Web Service 主流架構 • RESTful 易於 Web Service 與不同裝置的整 合,例如:Desktop、Phone、Tablet 與 TV 等
  23. 23. 安裝 Underscore 與 Backbone • Step 1:安裝 Underscore 與 Backbone • http://underscorejs.org/underscore-min.js • http://backbonejs.org/backbone-min.js • 存放⾄至 nodejs-chat 專案的 client/ javascripts/ ⺫⽬目錄下 • Backbone 必須與 Underscore 搭配使⽤用。
  24. 24. 建⽴立主要⾴頁⾯面 • Step 2:修改 chat.html • 順序不能改變,先引⼊入 Underscore 後, 再引⼊入 Backbone • Backbone 是⼀一個 MVC 框架,其中 View 的部份由 Underscore ⽀支援 <script type='text/javascript' src="javascripts/underscore-min.js"></script>! <script type='text/javascript' src="javascripts/backbone-min.js"></script>
  25. 25. 撰寫基本的 Backbone 框架 • Step 3:重新 撰寫 client/ javascripts/ app.js /**! * SETUP! **/! var app = app || {};! ! /**! * MODELS! **/! !! /**! * VIEWS! **/! app.MessageView = Backbone.View.extend({! events: {! },! });! ! /**! * BOOTUP! **/! $(document).ready(function() {! app.messageView = new app.MessageView();! });
  26. 26. Backbone 初體驗 • Backbone 是⼀一個 MVC (MVW) 框架,⼀一開始先 定義 Model 與 View • Model 就是「表⽰示資料的模型」,也就是將會顯 ⽰示在畫⾯面上的資料 • View 的部份將負責處理 Template 與 Model 的 對應,必須先了解 Key-Value Paris 觀念 • View 的部份,也負責處理控制的部份,例如: Button 的 click 事件
  27. 27. Backbone 的事件處理 • Step 4:Backbone.View 事件處理 • 為這個區塊加⼊入名字 ! <div class="row" id="message-save">! ! ! <div class="col-md-9">! ! ! ! <input class="form-control" type="text" name="message">! ! ! </div>! ! ! <div class="col-md-3">! ! ! ! <button class="btn btn-large btn-primary btn-message-save">送出</ button>! ! ! </div>! ! </div>
  28. 28. 實作 Backbone 事件處理 • 使⽤用 events 屬性 1 app.MessageView = Backbone.View.extend({! 2 el: '#message-save',! 3 events: {! 4 'click .btn-message-save': 'save'! 5 },! 6 save: function() {! 7 alert("Saving...");! 8 }! 9 });
  29. 29. Mokoversity MV Whatever
  30. 30. Work with Front-End Developers Use MVC, MVP and MVVM Call REST API in Backbone way Customizable CSS CSS generation and minify
  31. 31. Model, View and Control Views and Templating Handlebars.js and Underscore’s template http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
  32. 32. Model, View and Control Spine.js and Backbone.js
  33. 33. Model, View and Control manage the data for an application e.g. Backbone "collections"
  34. 34. MPV Models, Views & Presenters MVP is generally used most often in enterprise-level applications where it's necessary to reuse as much presentation logic as possible. http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
  35. 35. Model View ViewModel an architectural pattern based on MVC and MVP, ! which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behavior in an application. http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
  36. 36. Mokoversity View and Model
  37. 37. 認識 View.$el • A cached jQuery object for the view's element. • ⼀一個 jQuery 物件 var message = $('input[name="message"]').val(); var message = this.$el.find('input[name="message"]').val();!
  38. 38. 認識 this 物件 • this 是⼀一個物件,代表「這個 View」的意思 • this 為 Backbone.View 類別
  39. 39. this.$el 與 $ • 使⽤用 *this.$el* ⽽而不是直接使⽤用 *$* 物件 • 為了避免不必要的 DOM 操作 • 將把 *$.ajax* 的做法,以 Model 的⽅方式取 代
  40. 40. 認識 Backbone.Model • Backbone.Model ⽤用來表⽰示(存放)資料 • ⼀一個「資料模型」的類別
  41. 41. 使⽤用 Backbone.Model • 修改 client/javascripts/app.js 1 app.Message = Backbone.Model.extend({ ! 2 defaults: {! 3 success: false,! 4 errors: [],! 5 errfor: {},! 6! 7 message: 'No message yet.'! 8 }! 9 });
  42. 42. 使⽤用 Underscore • Frontend Template 系統 • 宣告 Template: <script type='text/template' id='tmpl-message'>! ! <div class="alert alert-dismissable alert-info">! ! ! <button type="button" class="close" data-dismiss="alert" aria-hidden=" true">! ! ! ! ×</button>! ! ! <h4>jollen</h4>! ! ! <%= message %>! ! </div>! </script>
  43. 43. 使⽤用 Underscore 注意事項 • "type" 必須定義為 "text/template" • 給予⼀一個名字,上述範例將 Template 命名 為 "tmpl-message" • 使⽤用 <%= *variable-name* => 來取⽤用變 數值,變數名稱在上述的 Model 裡定義, Underscore 會將 Model 的變數與 Template 做對應,並且⽤用變數值取代
  44. 44. Underscore 觀念⼩小結 • ViewModel:這個對應關係就是 ViewModel 的觀念 • Key-Value Pairs:Model 裡的資料,要⽤用 Key-Value Pairs 的格式表⽰示,JSON 就是 Key-Value Pairs 的格式 • Template:將 Model 裡的資料,顯⽰示到畫⾯面上,是透 過 Template,並且是由 Underscore 來完成 • Code Ignorance:如上,顯⽰示資料到畫⾯面上,不需要寫 程式;對設計師來說,只要修改 Template 即可,不會 有程式碼的困擾
  45. 45. View 與 Controller • View 與 Controller 的 Binding • Code Ignorance-ViewModel 1 initialize: function() {! 2 this.model = new app.Message();! 3 this.template = _.template($('#tmpl-message').html());! 4! 5 this.model.bind('change', this.render, this);! 6 this.render();! 7 }
  46. 46. View Binding 說明 • 實例化 View 時,constructor 與 initialize 會被叫 • 實作 initialize 函數來加⼊入 Model • 將 Model 的實例化存放到 View.model 裡
  47. 47. Backbone 與 Underscore • 在 Backbone.View 裡定義⼀一個 template 函數 • 採⽤用的 Template 系統是 Underscore • 為 Backbone.View 定義想要使⽤用的 Template 系統 • 如何讓 Backbone.View 使⽤用 Underscore 做 為 Template 系統呢? • 將 Backbone.View.template 定義為 _.template() 即 可
  48. 48. 使⽤用 Underscore • _ 是 Underscore 的物件 • Underscore 名稱的由來 • 將取得的 Template 傳給 *_.template* 即可 this.template = _.template($('#tmpl-message').html());
  49. 49. 實作 render() 函數 • 在 View 裡實作 render() 函數 • render() 會將 Model 與 Template 做對應,對應後的結果就是⼀一份 HTML5 ⽂文件 render: function() {! var data = this.template(this.model.attributes);! ! this.$el.find('#message').html(data);! return this;! },
  50. 50. render() 實作說明 • 先呼叫 this.template 函數,這個函數已經被定義為 Underscore Template 系統 • this.model.attributes 存放的是「Model State」 • Model State 就是 Model ⺫⽬目前所存放的資料;資料會以 JSON 的格式表 ⽰示。 • this.model.attributes 存放了 Model Data,並且是 JSON 格式 • 將 Data 交給 Template 系統去做 Data Mapping。這⾏行程式 碼是 ViewModel 觀念的靈魂。 • 最後將 Template 系統處理好的 HTML5 ⽂文件,放到想顯⽰示的 網⾴頁位置即可
  51. 51. Mokoversity Invoke RESTful API
  52. 52. 呼叫 REST API:AJAX ⽅方式 app.MessageView = Backbone.View.extend({! el: '#message-save',! events: {! 'click .btn-message-save': 'save'! },! save: function() {! var message = $('input[name="message"]').val();! ! $.ajax({! url: '/discussion/' + message,! type: 'POST',! dataType: "json",! success: function (data, textStatus, jqXHR) {! alert("已儲存成功");! },! complete: function (data, textStatus, jqXHR) {! }! });! }! });
  53. 53. 關於 Backbone Data Model • Backbone.Model 除了表⽰示資料外,還提供 各種處理模型 • 最重要的處理模型:manage changee • ⼀一但 Model 裡的資料有變動(例如:新增、 刪除等),就要重新做 "Data Mapping" • Backbone Way 的處理⽅方式,是透過 Backbone.Model.fetch
  54. 54. 使⽤用 Backbone Data Model 的理由 • 使⽤用 *$.ajax() 來呼叫 REST API 雖然是可⾏行 的做法,但是有⼀一個缺點:處理 Response data 的架構不夠嚴謹 • 使⽤用 *$.ajax() 來呼叫 REST API 時,是直接 把 API 當做 *ajax() 的參數,這個做法有⼀一 個缺點:API 與 Response data 是⼀一種⽐比較 鬆散的關係
  55. 55. Backbone Data Model 優點 • 使⽤用 Model fetch 的⽅方式,讓 Response data 的處理更嚴謹 • 使⽤用 Data model 的⽅方式,,讓 Data 與 API 偶和(Aggregation)在⼀一起
  56. 56. 使⽤用 Backbone.Model.fetch this.model.fetch({! success: function(model, response, options) {! }! });
  57. 57. 修改 Model • Backbone.Model.fetch 根據 this.model 裡的 url 定義,來呼叫 REST API app.Message = Backbone.Model.extend({! url: '/discussion/latest/5',! defaults: {! success: false,! errors: [],! errfor: {},! ! message: 'No message yet.',! messages: []! }! });
  58. 58. 設定 Data Model • 呼叫 Backbone.Model.fetch 後, Backbone 會幫我們呼叫 REST API,並且取 得 Response data • 成功取得 Response data, Backbone.Model.fetch 就會 Callback success 函數。
  59. 59. 關於 Data State 的變化 • self.model.set 的意思是,將取得的 response data 儲存到 Data model裡 • 由於 Data model 有了變動,所以 Backbone 便會呼叫 render() 函數 • 在 render() 函數裡,再 Render 出新的內容
  60. 60. 觀念⼩小結 • 透過 Data model 整合 REST API,以及 Response data • 將 REST API 與 Response data 封裝成 Data model • 在 Data model 變動時,重新 Render 畫⾯面
  61. 61. 使⽤用 Backbone.Collection app.PostCollection = Backbone.Collection.extend({! ! model: app.Post! });!

×