• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Backbone.js
 

Backbone.js

on

  • 17,030 views

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

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

Statistics

Views

Total Views
17,030
Views on SlideShare
9,181
Embed Views
7,849

Actions

Likes
43
Downloads
86
Comments
0

13 Embeds 7,849

http://makoto-tanaka.com 7759
http://webcache.googleusercontent.com 38
https://twitter.com 15
https://si0.twimg.com 12
http://s.deeeki.com 9
https://www.google.co.jp 4
https://twimg0-a.akamaihd.net 3
http://pinterest.com 2
http://us-w1.rockmelt.com 2
http://192.168.245.161 2
http://cache.yahoofs.jp 1
http://192.168.245.162 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Backbone.js Backbone.js Presentation Transcript

    • Backbone.jssupply structure to web applications
    • 自己紹介● 清水 大輔(しみず だいすけ)● NHN Japan LINEのJS書いてます● 著書『iPhone & Android HTML5ではじめるアプ リ制作の手引き 』● 趣味:フットサル、ジョギング● twitter id @tori3_jp
    • backbone.jsとは● 開発者はJeremy Ashkenas氏 CoffeeScript, underscore.js● JavaScript MVC Framework Events, Model, Collection, View, Route● Document● 採用事例 LinkedIn, foursquare, pandora, etc...
    • 他にも● Knockout.js (MVVM)● Javascript MVC● Ember.js● Spine.js● Angular.js
    • MVCとは"Model View Controller(モデル・ビュー・コントローラ; MVC)は、コンピュータ内部のデータをユーザに提示し、それに対してユーザが何らかの指示を出すタイプの、独自のユーザーインタフェースをもつアプリケーションソフトウェアを、以下に述べるようなmodel・view・controllerの3つの部分に分割して設計・実装するという技法、又はそのような構造をいう。各モジュールが比較的截然と分かれ、プログラムの見通しがよくなるとともに、ユーザインタフェース (UI) 部分を別のモジュールに取り替えることが容易となるのが利点である。自動プログラミングなどにも適している。" 出典:wikipedia
    • ・HTML5、ブラウザの高速化などに伴って Webアプリでよりネイティブアプリ近いUXが可能に => JavaScriptで複数のViewを切り替えるようなアプリ => 保守性、品質を保つには高いスキルやコストが必要 => OOPのデザインパターンの利用 => JavaScript MVC Framework
    • 注意● なんでもかんでもMVCが必要というわけではない etc: 単純なTab UIの実装、ちょっとしたeffect処理● backbone.jsを使った = MVCではない● MVC is dead なんて話題になりましたが... プレゼンテーションとドメインの分離が重要
    • Backbone.jsでのMVCMVCだが....Backbone.Model => ModelBackbone.Collection => Group化したModelBackbone.Router => Controllerの一部とURLとのMappingBackbone.View => ViewとController (Modelを内包)Template => View
    • Dependency● jQuery or Zepto● Underscore.js● ( json2.js)
    • EventsBackbone.View, Mdoel, Collectionは全てこのBackbone.Eventsを継承on(), off(), trigger()のメソッドを実装=> Observe Pattern
    • 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) { ・・・ }});
    • Modelドメイン(ビジネスロジック)の実装データ同期に透過的なRESTFul APIを提供(Backbone.Sync)save() => POST or PUTdestroy() => DELETEfetch() => GET
    • var Book= Backbone.Model.extend({ // リソースURL url: function() { return "http://hoge/api" + ((this.id) ? "/" + this.id : ""); }, // デフォルトプロパティを設定 defaults: { title: "", author: "", isbn: "", price: 0 } // コンストラクタ initialize: function() { ・・・ }});
    • 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
    • メソッドのオーバーライド。スーパークラスのメソッド呼び出しvar book = new Backbone.Model({ set : function(obj) { obj.price = obj.price * 0.05; Backbone.Model.prototype.set.call(this, obj); }});
    • 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; }
    • CollectionModelをGroup(LIST)化したものunderscore.jsのメソッドに大部分が依存● each● sort● shuffle● reset● filter
    • var BookCollection = new Backbone.Collection.extend({ // collectionするmodel model: Book, // コンストラクタ initialize: function() { }, // comparator comparator: function(book) { return book.get("price"); }});
    • 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);
    • Viewプレゼンテーション部分の実装● templateを使ったDOM作成● DOM操作● delegateでのDOM Event処理● model (collection)のcontrol
    • 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; },
    • // 削除ボタン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();
    • History / RouterHistorypushStateに対応location.hashへ自動でフェイルオーバーRouterURL (location.hash)に基づいた処理のルーティング
    • 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
    • 良いところ・LinghtWeight 1431行(v.0.9.2)、 pack & gzipで5.6KB 最小構成(zepto + underscore)で 5.6KB + 4KB + 8.4KB = 18KB・RESTFul JSON・Routing & History Control
    • 今後● backbone conf 2012 (5/30-31)● リアクティブプログラミング backbone.io node.js + socket.ioでserver sideのmodelと リアルタイムに連携