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