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

第31回HTML5とか勉強会で発表したBackbone.jsの資料

Backbone.js

  1. 1. Backbone.jssupply structure to web applications
  2. 2. 自己紹介● 清水 大輔(しみず だいすけ)● NHN Japan LINEのJS書いてます● 著書『iPhone & Android HTML5ではじめるアプ リ制作の手引き 』● 趣味:フットサル、ジョギング● twitter id @tori3_jp
  3. 3. backbone.jsとは● 開発者はJeremy Ashkenas氏 CoffeeScript, underscore.js● JavaScript MVC Framework Events, Model, Collection, View, Route● Document● 採用事例 LinkedIn, foursquare, pandora, etc...
  4. 4. 他にも● Knockout.js (MVVM)● Javascript MVC● Ember.js● Spine.js● Angular.js
  5. 5. MVCとは"Model View Controller(モデル・ビュー・コントローラ; MVC)は、コンピュータ内部のデータをユーザに提示し、それに対してユーザが何らかの指示を出すタイプの、独自のユーザーインタフェースをもつアプリケーションソフトウェアを、以下に述べるようなmodel・view・controllerの3つの部分に分割して設計・実装するという技法、又はそのような構造をいう。各モジュールが比較的截然と分かれ、プログラムの見通しがよくなるとともに、ユーザインタフェース (UI) 部分を別のモジュールに取り替えることが容易となるのが利点である。自動プログラミングなどにも適している。" 出典:wikipedia
  6. 6. ・HTML5、ブラウザの高速化などに伴って Webアプリでよりネイティブアプリ近いUXが可能に => JavaScriptで複数のViewを切り替えるようなアプリ => 保守性、品質を保つには高いスキルやコストが必要 => OOPのデザインパターンの利用 => JavaScript MVC Framework
  7. 7. 注意● なんでもかんでもMVCが必要というわけではない etc: 単純なTab UIの実装、ちょっとしたeffect処理● backbone.jsを使った = MVCではない● MVC is dead なんて話題になりましたが... プレゼンテーションとドメインの分離が重要
  8. 8. Backbone.jsでのMVCMVCだが....Backbone.Model => ModelBackbone.Collection => Group化したModelBackbone.Router => Controllerの一部とURLとのMappingBackbone.View => ViewとController (Modelを内包)Template => View
  9. 9. Dependency● jQuery or Zepto● Underscore.js● ( json2.js)
  10. 10. EventsBackbone.View, Mdoel, Collectionは全てこのBackbone.Eventsを継承on(), off(), trigger()のメソッドを実装=> Observe Pattern
  11. 11. Model====================================var model = Backbone.Model.extend({ update: function(value) { ・・・ // "change" eventをtirgger this.trigger("change"); }});View====================================var view = Backbone.View.extend({ initialize: function() { // modelのeventにattach this.model.on("change", this.onChange, this); }, onChange: function(arg) { ・・・ }});
  12. 12. Modelドメイン(ビジネスロジック)の実装データ同期に透過的なRESTFul APIを提供(Backbone.Sync)save() => POST or PUTdestroy() => DELETEfetch() => GET
  13. 13. var Book= Backbone.Model.extend({ // リソースURL url: function() { return "http://hoge/api" + ((this.id) ? "/" + this.id : ""); }, // デフォルトプロパティを設定 defaults: { title: "", author: "", isbn: "", price: 0 } // コンストラクタ initialize: function() { ・・・ }});
  14. 14. var book = new Book({ title : "JavaScript MVC", author: "hoge hoge", price : 3000});// POSTbook.save();=> POST : http://hoge/api// PUT ( idに1111が設定されているとする)book.set({price : 1000});book.save();=> PUT : http://hoge.hoge/api/1111//DELETEbook.destroy()=> DELETE : http://hogehoge/api/1111
  15. 15. メソッドのオーバーライド。スーパークラスのメソッド呼び出しvar book = new Backbone.Model({ set : function(obj) { obj.price = obj.price * 0.05; Backbone.Model.prototype.set.call(this, obj); }});
  16. 16. Backbone.Syncをオーバーライドすることで、他のリソース(localStorageなど)を使えますBackbone.sync = function(method, model, options) { var resp; var store = model.localStorage || model.collection.localStorage; switch (method) { case "read": resp = model.id ? store.find(model) : store.findAll(); break; case "create": resp = store.create(model); break; case "update": resp = store.update(model); break; case "delete": resp = store.destroy(model); break; }
  17. 17. CollectionModelをGroup(LIST)化したものunderscore.jsのメソッドに大部分が依存● each● sort● shuffle● reset● filter
  18. 18. var BookCollection = new Backbone.Collection.extend({ // collectionするmodel model: Book, // コンストラクタ initialize: function() { }, // comparator comparator: function(book) { return book.get("price"); }});
  19. 19. var bookList = new BookCollection([ {title : "aaaa", author: "hoge1", price: 1000}, {title : "bbb", author: "hoge2", price: 2000}, {title : "ccccc", author: "hoge3", price: 3000}]);// pushbookList.push(new Book({title : "dddd", author: "hoge4", price: 600});// popvar book1 = bookList.pop();// sort ( price 昇順にソート)bookList.sort();// indexを指定して取得var book2 = bookList.at(1);
  20. 20. Viewプレゼンテーション部分の実装● templateを使ったDOM作成● DOM操作● delegateでのDOM Event処理● model (collection)のcontrol
  21. 21. var BookView = Backbone.View.extend({ tagName: "li", // delegate event events: { "click .removeBtn" : "onRemove" }, // テンプレート tmpl : $("#bookTmpl"), // コンストラクタ initialize: function() { this.model.bind("destory", this.change, this); }, // レンダリング render : function() { this.$el.html(_.tmplate(this.tmpl.text(), this.model.toJSON()); return this.$el; },
  22. 22. // 削除ボタンclick onRemove: function(e) { this.model.destory(); }, // destory remove: function() { this.$el.remove(); }});===========================================var bookModel = new Bookl({ title: "javascript mvc", price: 2000});var bookView = new BookView({ model : bookModel});bookView.render();
  23. 23. History / RouterHistorypushStateに対応location.hashへ自動でフェイルオーバーRouterURL (location.hash)に基づいた処理のルーティング
  24. 24. var BookShelfRouter = Backbone.Router.extend({ routes: { "home": "home", "search/:query": "search" }, home: function() { ・・・ }, search: function(query) { ・・・ }});var router = new BookShelfRouter();Backbone.history.start({pushState: true, root: "/home"})============================http://hoge/seach/mvc
  25. 25. 良いところ・LinghtWeight 1431行(v.0.9.2)、 pack & gzipで5.6KB 最小構成(zepto + underscore)で 5.6KB + 4KB + 8.4KB = 18KB・RESTFul JSON・Routing & History Control
  26. 26. 今後● backbone conf 2012 (5/30-31)● リアクティブプログラミング backbone.io node.js + socket.ioでserver sideのmodelと リアルタイムに連携

×