Backbone.jsに入門してみた #TechLunch

Backbone.jsに入門してみた
2013/11/20 (水) @ Livesense TechLunch
発表者：工藤 祐司

Transcript

1. Backbone.jsに入門してみた
2. jQueryは素晴らしい より少ない記述で、より多くの処理 document.getElementById("greet").innerHTML = "hello world!" ↓ $("#greet").text("hello world!");
3. jQueryは素晴らしい より少ない記述で、より多くの処理してくれる上、 クロスブラウザ対応してくれる // Internet Explorer document.getElementById("hoge").style.filter = 'alpha(opacity=50)'; // Firefox document.getElementById("hoge").style.MozOpacity = 0.5; // Safari document.getElementById("hoge").style.opacity = 0.5; ↓ $("#hoge").fadeTo(0, 0.5);
4. jQueryは素晴らしい プラグインがたくさんあるので、やりたいことがすぐやれる
5. jQueryは素晴らしい。けど、 情報をDOMに入れてしまいがち var list = '' $.each(data, function(index, value){ list += '<li id=”item-”' + value.id + '>' + value.name + '</li>; }); $('ul').append(list);
6. jQueryは素晴らしい。けど、 DOMから情報取り出すのが手間 サーバーとの通信や、レンダリング処理で、いつのまにか、読みにくい var list = “” $.each(data, function(index, value){ list += '<li id=”item-”' + value.id + '>' + value.name + '</li>; }); $(“ul”).append(list); $(“li”).click(function(){ var id = this.attr(“id”).replace(“item-”,””); $.ajax({ method: “post”, url: “items”, data: {id: id}, dataType: “json” }).done(funciton(data){ ….
7. jQueryは素晴らしい。けど、 構造化されてないので、規模が大きくなると複雑化 そもそも、「write less, do more」が目的。
8. JavaScriptのフレームワーク
9. 今回はこれ
10. 特徴 •jQueryの代替ではない •MVCと言われている（公式ではライブラリと主張） •プレゼンテーション機能は自由に導入できる •オブザーバー・パターン •RESTful JSON interface
11. 依存 •jQuery •Underscore.js _.each([1, 2, 3], function(num){console.log(num)}); みたいなユーティリティ
12. MVC　あくまで雰囲気で http://d.hatena.ne.jp/kazuk_i/20110407/1302130947 •ViewとModelの関係（ModelからViewへの通知もある） •ModelがDBにアクセス
13. アーキテクチャ http://www.slideshare.net/AdvancedTechNight/backbonejs-17371968 •M Backbone Model Backbone Collection •V Backbone View Template •C Backbone View Routerは今回は除外
14. Todoアプリ 画面 http://backbone-rails.hogebar.info/ ソース解説(docco) http://backbone-rails.hogebar.info/docs/todos.html TodosView(Todos Collectionと対応) TodoView(Todo Modelと対応）
15. Backbone.Model •ひとつのデータの役割 •サーバーからデータ取得、同期 •イベントの通知 •再利用
16. RESTfulにサーバーと通信してくれる modelのメソッドを実行することで、サーバーと自動で通信してくれる HTTPメソッド URL 処理 Model/Collect ionのメソッド GET /todos 一覧取得 fetch POST /todos 新規作成 save GET /todos/:id 参照 fetch PUT /todos/:id 更新 save DELETE /todos/:id 削除 destroy
17. Backbone.Model var Todo = Backbone.Model.extend({ defaults: function() { return { title: "予定なし", order: todos.nextOrder(), done: false }; } }); var todo = new Todo(); todo.set({title:”買い物”}); // trigger change todo.save(); // trigger sync
18. Backbone.Collection •modelを集めたリスト •リストの操作（フィルタリングとか） •Modelみたいに、サーバーからデータ取得、同期
19. Backbone.Collection var TodoCollection = Backbone.Collection.extend({ model: Todo, url: function() { return '/todos'; } }); var todos = new Todos(); todos.fetch(); // trigger reset
20. Backbone.View •DOMの操作 •ユーザー操作を受け取って処理 •Model/Collectionを持つ
21. Backbone.View var TodoView = Backbone.View.extend({ tagName: "li", // 要素指定 events: { "click .done" : "toggleDone", }, initialize: function() { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); }, render:funciton(){ this.$el.html(this.template(this.model.toJSON())); return this; }
22. Backbone.View var TodosView = Backbone.View.extend({ el: $("#todoapp"), // 要素指定
23. Template 好きなモノを使えばOK •Mustache.js •Underscore.js •jQuery-tmpl
24. Todoアプリ 画面 http://backbone-rails.hogebar.info/ ソース解説(docco) http://backbone-rails.hogebar.info/docs/todos.html TodosView(Todos Collectionと対応) TodoView(Todo Modelと対応）
25. (補足）RESTful APIの構築 Railsだとあっという間 $rails new backbone $cd backbone $rake db:create $rails g scaffold todo title order:integer done:boolean $rake db:migrate $rails s
26. (補足）RESTful APIの構築 Rails4では少し修正が必要 •CSRF対策でエラーになるので、切る class ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. - protect_from_forgery with: :exception + protect_from_forgery with: :null_session end •index.json.jbuilder、show.json.jbuilderに:id追加 json.array!(@todos) do |todo| - json.extract! todo, :title, :order, :done + json.extract! todo, :id, :title, :order, :done json.url todo_url(todo, format: :json) end
27. １．Backbone.jsを擬似RESTに設定する 　// 古いHTTPサーバーをサポートするために、`emulateHTTP`を有効にする。 // このオプションを設定すると、`_method`パラメータと`X-Http-Method-Override` // ヘッダーを付与して、擬似的に`"PUT"`と`"DELETE"`をリクエストをする。 Backbone.emulateHTTP = false; // `application/json`リクエストを直で処理できない古いサーバーをサポートするために、 // `emulateJSON`を有効にすると ... 代わりに`application/x-www-form-urlencoded` // としてリクエストボディをエンコードし、`model`という名前のフォームパラメータとして、 // modelを送信します。 Backbone.emulateJSON = false; 2.　backbone.jsのソースコードの_methodをsf_methodに書き換える。 (補足）Symfony1.3の場合
28. 3. routing.ymlにこんな感じで設定 todos: class: sfPropelRoute url: /todos.:sf_format param: { module: todos, action: index, sf_format: json } options: { model: Todos, type:object } requirements: sf_method: [get]: todos_update: class: sfPropelRoute url: /todos/:id param: { module: todos, action: update } options: { model: Todos, type:object } requirements: id: \d+ sf_method: [put]: 4. アクションを頑張って書く (補足）Symfony1.3の場合
29. 感想 •構造化を緩く強制されるので読み書きしやすい雰囲気 •Model, Collection, Viewの作成が要るので、規模によっては コストの方が大きい •比較的簡単なフレームワークなので、学習コストは低そう •これじゃなくてもできる感はある •他のフレームワークと比較したい。
30. おわり
31. Backbone.Events var object = {}; // 変数objectで object.on と object.trigger を使えるようにした _.extend(object, Backbone.Events); // alertという名前でイベントを登録 object.on("alert", function(msg) { alert("Triggered " + msg); }); // イベントの実行 object.trigger("alert", "an event");