Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 21, 2014
Tweet

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. 1.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");