Download - Backbone.js and MVW 101
為什麼需要 Backbone.js ?
Mokoversity
Single Page Web Apps
Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page-applications-and-apis/
Through a RESTful API
Source: http://cyberasylum.janithw.com/tag/single-paged-applications/
MVC for Client
http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/
Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。
SPAs and RESTful
http://backbonetutorials.com/why-would-you-use-backbone/
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.
URL Router
Source: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx
MVC, MVP 與 MVVM 觀念介紹
Mokoversity
URL Router
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
MVVM
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
MVC vs MVVM
MVC MVVM
寫程式 不⽤用寫程式
Template + Control Logic
Template + Data Binding
MVC vs MVP
MVC MVP
Controller 處理 User Inputs
View 處理 User Inputs
Controller uses Presentation
Model
Controller is Presentation
Model
MVVM
Source: http://mvcsharp.org/Overview/Default.aspx
MV* - Whatever
Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design-pattern-in-dnn.aspx
寫的好就是 MVP,寫不好就是 MVC;神⼈人級寫出來就是 MVVM。連 MVC 都沒有的是幼幼班。
TicTacToe
Mokoversity
MVC 初體驗• 將以⼀一個 TicTacToe 遊戲的實作:
• 了解 MVC 的重點性
• MVC 的基本實作觀念
REST 與 JSON• 將 REST API 回傳的 JSON 資料,轉換成
HTML5 標籤,並顯⽰示在 UI 上
• 使⽤用 jQuery AJAX 呼叫 REST API 是⽐比較 Dirty 的⽅方式
• 須導⼊入 MVC 的框架
Key-Value Pairs• JSON 資料格式
• 將 JSON「套⽤用」到 Template
{ "name": "jollen"}
使⽤用 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;!};
沒有 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);! }!}
關於 RESTful• 現代的 Web App 開發,以 REST API 的⽅方式整合 Client(Device)與 Server
• RESTful 是 Web Service 主流架構
• RESTful 易於 Web Service 與不同裝置的整合,例如:Desktop、Phone、Tablet 與 TV 等
安裝 Underscore 與 Backbone• Step 1:安裝 Underscore 與 Backbone
• http://underscorejs.org/underscore-min.js
• http://backbonejs.org/backbone-min.js
• 存放⾄至 nodejs-chat 專案的 client/javascripts/ ⺫⽬目錄下
• Backbone 必須與 Underscore 搭配使⽤用。
建⽴立主要⾴頁⾯面• 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>
撰寫基本的 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();! });
Backbone 初體驗• Backbone 是⼀一個 MVC (MVW) 框架,⼀一開始先定義 Model 與 View
• Model 就是「表⽰示資料的模型」,也就是將會顯⽰示在畫⾯面上的資料
• View 的部份將負責處理 Template 與 Model 的對應,必須先了解 Key-Value Paris 觀念
• View 的部份,也負責處理控制的部份,例如:Button 的 click 事件
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>
實作 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 });
MV Whatever
Mokoversity
Work with Front-End Developers
Use MVC, MVP and MVVM
Call REST API in Backbone way
Customizable CSS
CSS generation and minify
Model, View and Control
Views and Templating Handlebars.js and Underscore’s template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
Model, View and Control
Spine.js and Backbone.js
Model, View and Control
manage the data for an application e.g. Backbone "collections"
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
Model View ViewModelan 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
View and Model
Mokoversity
認識 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();!
認識 this 物件• this 是⼀一個物件,代表「這個 View」的意思
• this 為 Backbone.View 類別
this.$el 與 $• 使⽤用 *this.$el* ⽽而不是直接使⽤用 *$* 物件
• 為了避免不必要的 DOM 操作
• 將把 *$.ajax* 的做法,以 Model 的⽅方式取代
認識 Backbone.Model• Backbone.Model ⽤用來表⽰示(存放)資料
• ⼀一個「資料模型」的類別
使⽤用 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 });
使⽤用 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>
使⽤用 Underscore 注意事項• "type" 必須定義為 "text/template"
• 給予⼀一個名字,上述範例將 Template 命名為 "tmpl-message"
• 使⽤用 <%= *variable-name* => 來取⽤用變數值,變數名稱在上述的 Model 裡定義,Underscore 會將 Model 的變數與 Template 做對應,並且⽤用變數值取代
Underscore 觀念⼩小結• ViewModel:這個對應關係就是 ViewModel 的觀念
• Key-Value Pairs:Model 裡的資料,要⽤用 Key-Value Pairs 的格式表⽰示,JSON 就是 Key-Value Pairs 的格式
• Template:將 Model 裡的資料,顯⽰示到畫⾯面上,是透過 Template,並且是由 Underscore 來完成
• Code Ignorance:如上,顯⽰示資料到畫⾯面上,不需要寫程式;對設計師來說,只要修改 Template 即可,不會有程式碼的困擾
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 }
View Binding 說明• 實例化 View 時,constructor 與 initialize 會被叫
• 實作 initialize 函數來加⼊入 Model
• 將 Model 的實例化存放到 View.model 裡
Backbone 與 Underscore• 在 Backbone.View 裡定義⼀一個 template 函數
• 採⽤用的 Template 系統是 Underscore
• 為 Backbone.View 定義想要使⽤用的 Template 系統
• 如何讓 Backbone.View 使⽤用 Underscore 做為 Template 系統呢?
• 將 Backbone.View.template 定義為 _.template() 即可
使⽤用 Underscore• _ 是 Underscore 的物件
• Underscore 名稱的由來
• 將取得的 Template 傳給 *_.template* 即可
this.template = _.template($('#tmpl-message').html());
實作 render() 函數• 在 View 裡實作 render() 函數
• render() 會將 Model 與 Template 做對應,對應後的結果就是⼀一份 HTML5 ⽂文件
render: function() {! var data = this.template(this.model.attributes);!! this.$el.find('#message').html(data);! return this;! },
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 ⽂文件,放到想顯⽰示的網⾴頁位置即可
Invoke RESTful API
Mokoversity
呼叫 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) {! }! });! }! });
關於 Backbone Data Model• Backbone.Model 除了表⽰示資料外,還提供各種處理模型
• 最重要的處理模型:manage changee
• ⼀一但 Model 裡的資料有變動(例如:新增、刪除等),就要重新做 "Data Mapping"
• Backbone Way 的處理⽅方式,是透過 Backbone.Model.fetch
使⽤用 Backbone Data Model 的理由
• 使⽤用 *$.ajax() 來呼叫 REST API 雖然是可⾏行的做法,但是有⼀一個缺點:處理 Response data 的架構不夠嚴謹
• 使⽤用 *$.ajax() 來呼叫 REST API 時,是直接把 API 當做 *ajax() 的參數,這個做法有⼀一個缺點:API 與 Response data 是⼀一種⽐比較鬆散的關係
Backbone Data Model 優點• 使⽤用 Model fetch 的⽅方式,讓 Response
data 的處理更嚴謹
• 使⽤用 Data model 的⽅方式,,讓 Data 與 API 偶和(Aggregation)在⼀一起
使⽤用 Backbone.Model.fetch
this.model.fetch({! success: function(model, response, options) {! }!});
修改 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: []! }! });
設定 Data Model• 呼叫 Backbone.Model.fetch 後,
Backbone 會幫我們呼叫 REST API,並且取得 Response data
• 成功取得 Response data,Backbone.Model.fetch 就會 Callback success 函數。
關於 Data State 的變化• self.model.set 的意思是,將取得的
response data 儲存到 Data model裡
• 由於 Data model 有了變動,所以 Backbone 便會呼叫 render() 函數
• 在 render() 函數裡,再 Render 出新的內容
觀念⼩小結• 透過 Data model 整合 REST API,以及
Response data
• 將 REST API 與 Response data 封裝成 Data model
• 在 Data model 變動時,重新 Render 畫⾯面
使⽤用 Backbone.Collection
app.PostCollection = Backbone.Collection.extend({!! model: app.Post!});!