Introduction for Browser Side MVC

4,638 views

Published on

# 概要
画面遷移を行わず、1枚の html 上で対話的に操作するような web アプリケーションを目にする機会が増えてきました。
そんなアプリケーションを開発する際、jQuery 主体だったこれまでの開発スタイルだと画面表示と機能が切り離せなくなってしまい、変更に弱い作りになってしまうことになるでしょう。
この問題に対処するにはどうすればよいでしょう?
そんなときは先人の知恵を参考に、その解決策を探してみるのはいかがでしょうか。
ユーザからのインタラクションを受け付けるアプリケーションを上手く構築していく際のやり方として、MVC パターンが広く知られています。
本セッションでは、ブラウザ上での JavaScript の MVC の原点を辿り、その実装のひとつである Backbone.js を例にとって、整理されたコードについて考えてみたいと思います。

SaCSS vol40 ( http://www.sacss.net/special03/ )での発表資料です。

0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,638
On SlideShare
0
From Embeds
0
Number of Embeds
1,833
Actions
Shares
0
Downloads
20
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Introduction for Browser Side MVC

  1. 1. ブラウザサイド MVC 入門http://www.flickr.com/photos/39943270@N07/6276483269 Sapporo.jsSaCSS vol.40 - 2012.12.15 佐藤 竜之介(Ryunosuke SATO)
  2. 2. 提供Community for people who like JavaScript. Sapporo.js
  3. 3. 自己紹介
  4. 4. Sapporo.jshttp://sapporojs.org
  5. 5. Sapporo.js - 2012.12.16Backbone.js handson: @onjiro_mohyahya http://connpass.com/event/1368/
  6. 6. @tricknotes
  7. 7. /* * PR * Important!
  8. 8. JavaScript 道場 超豪華講師JavaScript コーディング実践 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  9. 9. JavaScript 道場 on . .. 超豪華講師 in g so o m mJavaScript コーディング実践C 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  10. 10. */
  11. 11. よろしくお願いします
  12. 12. ブラウザサイド MVC 入門http://www.flickr.com/photos/39943270@N07/6276483269 Sapporo.jsSaCSS vol.40 - 2012.12.15 佐藤 竜之介(Ryunosuke SATO)
  13. 13. 本発表について
  14. 14. 【開発編】ブラウザサイド MVC 入門(佐藤竜之介)画面遷移を行わず、1枚の html 上で対話的に操作するような web アプリケーションを目にする機会が増えてきました。そんなアプリケーションを開発する際、jQuery 主体だったこれまでの開発スタイルだと画面表示と機能が切り離せなくなってしまい、変更に弱い作りになってしまうことになるでしょう。この問題に対処するにはどうすればよいでしょう?そんなときは先人の知恵を参考に、その解決策を探してみるのはいかがでしょうか。ユーザからのインタラクションを受け付けるアプリケーションを上手く構築していく際のやり方として、MVC パターンが広く知られています。本セッションでは、ブラウザ上での JavaScript の MVC の原点を辿り、その実装のひとつである Backbone.js を例にとって、整理されたコードについて考えてみたいと思います。【 編】 を利用した開発環境パワーアップ講座(やまがあつ) http://www.sacss.net/special03/
  15. 15. はじめに
  16. 16. ちょっと考えてみましょう
  17. 17. お題
  18. 18. 「やることリストを作ってください」* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
  19. 19. Samplehttp://tasklist-demo.herokuapp.com/
  20. 20. ? ?どんなアプローチをとりますか
  21. 21. 例えば... jQuery だけ使って、ひとつひとつ作っていった場合
  22. 22. * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
  23. 23. * checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
  24. 24. * 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
  25. 25. * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  26. 26. * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  27. 27. 「ところでさ、 終わったタスクをまとめて削除したいんだ けど...」
  28. 28. http://commonpost.boo.jp/?attachment_id=21729 えっ
  29. 29. * まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する
  30. 30. * enter が押されると... * まとめて削除ボタンを押すと... * テキストを取得してやることを追加する * チェックがついているタスクを探す * 全件数をひとつ増やす * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  31. 31. * enter が押されると... * まとめて削除ボタンを押すと... * テキストを取得してやることを追加する * チェックがついているタスクを探す * 全件数をひとつ増やす * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  32. 32. http://livedoor.3.blogimg.jp/hamusoku/imgs/b/a/ba9d0808.jpg 複雑
  33. 33. これについてはまた後で :-)
  34. 34. 今日のお品書き* MVC の背景* MVC って何?* ブラウザの中でのMVC
  35. 35. * MVC の背景* MVC って何?* ブラウザの中でのMVC
  36. 36. 最初の例 ひとつひとつ作って、だいぶ複雑になってしまっていた
  37. 37. http://www.flickr.com/photos/pappuradonkarume/4711288623変更が困難
  38. 38. ? ?この複雑さの原因は何でしょう
  39. 39. * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  40. 40. 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示
  41. 41. 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示全部削除ボタン
  42. 42. 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示全部削除ボタン
  43. 43. 矢印が多いそれぞれのイベントハンドラの中で、 関係のある表示部分を すべて更新している
  44. 44. 機能 と 表示 が一緒になっているので、ひとつの変更でもあっちもこっちも直す必要がある 他にも、 html のマークアップの変更や、 DOM 構造の変更も困難...
  45. 45. 整どうやって 理 する?
  46. 46. 何を管理したいんだっけ?
  47. 47. 「やることリストを作ってください」* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
  48. 48. やることリスト
  49. 49. 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示
  50. 50. ユーザが 入力した! 更新する入力フォーム ひとつ増やす リスト表示 増えたよ!完了チェック 取り消し線 やることリスト削除ボタン 増えたよ! 件数表示 更新する
  51. 51. 本質的な 部分 を抽出する
  52. 52. 解決するための、先人の知恵上手く整理するためのコツ
  53. 53. One of the architecture patternMVC(様々な形で実装されながら、今日に至る)
  54. 54. * MVC の背景* MVC って何?* ブラウザの中でのMVC
  55. 55. ソフトウェアアーキテクチャ ソフトウェア開発のためのパターン体系 http://www.amazon.co.jp/dp/4764902834
  56. 56. アプリケーションを柔軟に保つための先人の知恵
  57. 57. ちょっと具体的に見てみましょう
  58. 58. 1. 前提2. 課題3. 解決方法
  59. 59. 1. 前提‘‘人間とコンピュータが対話するという機能を備えたソフトウェアを開発する際にこのパターンを考慮する - ソフトウェアアーキテクチャ -
  60. 60. 1. 前提 一枚の html の中で一部だけ更新するような、画面の切り替わりがないアプリケーションが対象
  61. 61. 2. 課題‘‘ユーザインターフェースの 変更は頻繁である - ソフトウェアアーキテクチャ -
  62. 62. 2. 課題✓ ここのとこ、ちょっと見た目を変えて欲しいんだけど...✓ こんな機能ほしいんだけど...✓ ブラウザの進化によって、コードを変えないといけない これらが容易に起こる & 対応しなくてはいけない!!
  63. 63. !!ユーザインターフェースは寿命が短い!
  64. 64. 2. 課題これに対して、本質的な機能は 変更頻度が低いやることリストを管理したい
  65. 65. 3. 解決方法‘‘課題を解決するために、 対話型アプリケーションは処理、入力、出力の3つの部分に 分割されるべきである - ソフトウェアアーキテクチャ -
  66. 66. 3. 解決方法機能とユーザインターフェースが くっついていると 変更が大規模になる分けましょう!
  67. 67. 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示
  68. 68. 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示 入力 処理 出力
  69. 69. 3. 解決方法データと処理: Modelユーザ入力: Controller表示形式: View
  70. 70. ModelViewController
  71. 71. 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示Controller Model View
  72. 72. 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示Controller Model View
  73. 73. 入力・出力・処理を分ける イベントController Viewイベントを受け付ける 表示の仕方 Model データと処理
  74. 74. 実際にどうやって分けていけばいいかは この後で
  75. 75. http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/ break
  76. 76. ここまでの内容 http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/* MVC の背景✓ 画面の変更がしづらいことってありませんか?* MVC って何?✓ アプリケーションを柔軟に保つための先人の知恵✓ 変化に対応するため、処理、入力、出力に分ける* ブラウザの中での MVC
  77. 77. * MVC の背景* MVC って何?* ブラウザの中でのMVC
  78. 78. 実際のコードではどう実現すればよいのか ? ?
  79. 79. 多くのフレームワーク
  80. 80. Helping you select an MV* framework Download (1.0.1) View project on GitHubIntroduction Our Stable AppsDevelopers these days are spoiled with choice Backbone.js Rwhen it comes to selecting an MV*framework for structuring and organizing Ember.js Rtheir JavaScript web apps. AngularJS RBackbone, Ember, AngularJS, Spine... the listof new and stable solutions continues to Spine Rgrow, but just how do you decide on which touse in a sea of so many options? KnockoutJS RTo help solve this problem, we created Dojo RTodoMVC - a project which offers the samehttp://addyosmani.github.com/todomvc/Todo application implemented using MV*concepts in most of the popular JavaScriptMV* frameworks of today. YUI R Batman.js R Tweet 667 Closure R
  81. 81. 今回は
  82. 82. http://backbonejs.org
  83. 83. 今回は Backbone.js を例に挙げて見てみましょう ✓ 広く使われている ✓ 仕組みが比較的シンプル
  84. 84. イベントController Viewイベントを受け付ける 表示の仕方 Model データと処理
  85. 85. Backbone.js のアプローチ イベント DOM 表示の仕方 イベントを受け付ける View Model データと処理
  86. 86. 実際には複数あるので... イベント DOM 表示の仕方 イベントを受け付ける View View Model View Model データと処理
  87. 87. やることリストの例を考える
  88. 88. createTaskViewTaskView TotalView
  89. 89. createTaskView TaskView Task TaskList TotalView
  90. 90. createTaskView TaskView Task TaskListタスクを作成する TotalView
  91. 91. ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  92. 92. createTaskView TaskView Task TaskListタスクを完了する TotalView
  93. 93. 更新する ユーザが チェックした!createTaskView 変わった! TaskView 変更する Task 変わった! 更新する TaskList 変わった! TotalView
  94. 94. createTaskView TaskView Task TaskListタスクを削除する TotalView
  95. 95. 削除する ユーザが削除ボタ ン押した!createTaskView 削除された! TaskView 削除する Task 削除された! 更新する TaskList 変わった! TotalView
  96. 96. 整理
  97. 97. createTaskView TaskView Task TaskList TotalView
  98. 98. createTaskView TaskView Task TaskListタスクを削除するdoneDeleteView TotalView
  99. 99. 削除するcreateTaskView 削除された! TaskView 削除する Task 完了タスク を削除する 更新された! 更新するユーザが削除ボタ ン押した! TaskList TotalViewdoneDeleteView
  100. 100. 機能を増やしても不自然な矢印は増えない
  101. 101. 動いているコード を見てみる
  102. 102. createTaskView TaskView Task TaskList TotalView
  103. 103. ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Taskタスクを作成する 増えた! 更新する TaskList TotalView
  104. 104. ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  105. 105. var Task = Backbone.Model.extend({ defaults: { done: false }, initialize: function(attrs) { var id = attrs && attrs.id || (task- + Number(new Date())); this.set(id, id); }, destroy: function() { this.trigger(destroy, this); this.off(); } var TaskList = Backbone.Collection.extend({}); model: Task, initialize: function() { this.on(destroy, this.remove, this); }
  106. 106. ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  107. 107. var CreateTaskView = Backbone.View.extend({ events: { submit form: onSubmit }, onSubmit: function() { var $text = this.$el.find(#text), text = $text.val(); if (!text) { return false; } this.createTask(text); $text.val(); return false; }, createTask: function(text) { this.collection.add({text: text}); }});
  108. 108. ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  109. 109. var taskList = new TaskList();// setup task listtaskList.on(add, function(task) { var taskView = new TaskView({model: task}); taskView.render(); taskView.$el.appendTo(#taskList);});// setup add task formvar createTaskView = new CreateTaskView({ el: #createForm, collection: taskList});
  110. 110. demo: http://tasklist-demo.herokuapp.com/github: https://github.com/tricknotes/task-list
  111. 111. その他のBackbone.js の機能
  112. 112. ブラウザサイド MVC での 難しいところ✓ URL✓ サーバとのデータ同期✓ 更新の反映のタイミング
  113. 113. 従来の MVC とは別の解決が必要な部分がある
  114. 114. Backbone.js のアプローチ イベント DOM 表示の仕方 イベントを受け付ける View Model データと処理
  115. 115. URL イベント DOMRouter View ViewHistory Model Collection サーバ Sync
  116. 116. http://backbonejs.org
  117. 117. まずは使ってみるhttp://www.flickr.com/photos/hidekazufuruki/6881051786/sizes/h/in/photostream/
  118. 118. 今日のまとめ* MVC の背景✓ 画面の変更がしづらいことってありませんか?* MVC って何?✓ アプリケーションを柔軟に保つための先人の知恵✓ 変化に対応するため、処理、入力、出力に分ける* ブラウザの中での MVC✓ Backbone.js のアプローチについて
  119. 119. tricknotes .talk .trigger(‘end’);
  120. 120. more information...
  121. 121. Backbone.js の参考情報http://www.adventar.org/calendars/15
  122. 122. https://github.com/enja-oss/Backbone
  123. 123. Helping you select an MV* framework Download (1.0.1) View project on GitHubIntroduction Our Stable AppsDevelopers these days are spoiled with choice Backbone.js Rwhen it comes to selecting an MV*framework for structuring and organizing Ember.js Rtheir JavaScript web apps. AngularJS RBackbone, Ember, AngularJS, Spine... the listof new and stable solutions continues to Spine Rgrow, but just how do you decide on which touse in a sea of so many options? KnockoutJS RTo help solve this problem, we created Dojo RTodoMVC - a project which offers the samehttp://addyosmani.github.com/todomvc/Todo application implemented using MV*concepts in most of the popular JavaScriptMV* frameworks of today. YUI R Batman.js R Tweet 667 Closure R
  124. 124. http://www.publickey1.jp/blog/12/javascriptmvc.html
  125. 125. https://gist.github.com/1362110 Original: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
  126. 126. 本日は概論まで
  127. 127. 実践あるのみ
  128. 128. Sapporo.js - 2012.12.16Backbone.js handson: @onjiro_mohyahya http://connpass.com/event/1368/
  129. 129. JavaScript 道場 超豪華講師JavaScript コーディング実践 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  130. 130. ここまではまだまだ概論なので、しっかりと実践して、その中から新しい学びを一緒に見つけて行き ましょう! http://www.flickr.com/photos/8674051@N04/6380167887/

×