Introduction for Browser Side MVC
Post on 20-Dec-2014
3889 Views
Preview:
DESCRIPTION
Transcript
ブラウザサイド MVC 入門
佐藤 竜之介(Ryunosuke SATO)Sapporo.js
SaCSS vol.40 - 2012.12.15
http://www.flickr.com/photos/39943270@N07/6276483269
提供
Sapporo.js
Community for people who like JavaScript.
自己紹介
http://connpass.com/event/1368/
Sapporo.js - 2012.12.16
Backbone.js handson: @onjiro_mohyahya
@tricknotes
/* * PR * Important!
JavaScript 道場
超豪華講師JavaScript コーディング実践
練習!練習!練習!2013.02.23(土)@札幌市産業振興センター
JavaScript 道場
超豪華講師JavaScript コーディング実践
練習!練習!練習!2013.02.23(土)@札幌市産業振興センター
Comming soon...
*/
よろしくお願いします
ブラウザサイド MVC 入門
佐藤 竜之介(Ryunosuke SATO)Sapporo.js
SaCSS vol.40 - 2012.12.15
http://www.flickr.com/photos/39943270@N07/6276483269
本発表について
【開発編】ブラウザサイド【開発編】ブラウザサイド MVC MVC 入門（佐藤竜之介）入門（佐藤竜之介）
画面遷移を行わず、1枚の html 上で対話的に操作するような web アプリケーションを目にする機会が増えてきました。そんなアプリケーションを開発する際、jQuery 主体だったこれまでの開発スタイルだと画面表示と機能が切り離せなくなってしまい、変更に弱い作りになってしまうことになるでしょう。
この問題に対処するにはどうすればよいでしょう？
そんなときは先人の知恵を参考に、その解決策を探してみるのはいかがでしょうか。ユーザからのインタラクションを受け付けるアプリケーションを上手く構築していく際のやり方として、MVC パターンが広く知られています。
本セッションでは、ブラウザ上での JavaScript の MVC の原点を辿り、その実装のひとつである Backbone.js を例にとって、整理されたコードについて考えてみたいと思います。
【 編】 を利用した開発環境パワーアップ講座（やまがあつ）
http://www.sacss.net/special03/
はじめに
ちょっと考えてみましょう
お題
「やることリストを作ってください」
* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
Samplehttp://tasklist-demo.herokuapp.com/
??どんなアプローチをとりますか
例えば...jQuery だけ使って、
ひとつひとつ作っていった場合
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
「ところでさ、終わったタスクを
まとめて削除したいんだけど...」
http://commonpost.boo.jp/?attachment_id=21729
えっ
* まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
* まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
* まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
http://livedoor.3.blogimg.jp/hamusoku/imgs/b/a/ba9d0808.jpg
複雑
これについてはまた後で :-)
* MVC の背景* MVC って何?* ブラウザの中でのMVC
今日のお品書き
* MVC の背景* MVC って何?* ブラウザの中でのMVC
ひとつひとつ作って、だいぶ複雑になってしまっていた
最初の例
http://www.flickr.com/photos/pappuradonkarume/4711288623
変更が困難
この複雑さの原因は何でしょう??
* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
全部削除ボタン
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
全部削除ボタン
それぞれのイベントハンドラの中で、関係のある表示部分をすべて更新している
“矢印が多い”
“機能” と “表示” が一緒になっているので、ひとつの変更でもあっちもこっちも直す必要がある
他にも、 html のマークアップの変更や、DOM 構造の変更も困難...
整理
どうやって
する?
管理したいんだっけ?
“何を”
「やることリストを作ってください」
* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
“やることリスト”
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
ユーザが入力した!
ひとつ増やす
増えたよ!
更新する
更新する
増えたよ!
を抽出する
本質的な部分
解決するための、先人の知恵
上手く整理するためのコツ
MVC(様々な形で実装されながら、今日に至る)
One of the architecture pattern
* MVC の背景* MVC って何?* ブラウザの中でのMVC
http://www.amazon.co.jp/dp/4764902834
ソフトウェアアーキテクチャソフトウェア開発のためのパターン体系
アプリケーションを柔軟に保つための
先人の知恵
ちょっと具体的に見てみましょう
1. 前提2. 課題3. 解決方法
‘‘1. 前提
人間とコンピュータが対話するという機能を備えたソフトウェアを開発する際にこのパターンを考慮する
- ソフトウェアアーキテクチャ -
一枚の html の中で一部だけ更新するような、画面の切り替わりがないアプリケーションが対象
1. 前提
‘‘- ソフトウェアアーキテクチャ -
2. 課題ユーザインターフェースの
変更は頻繁である
✓ ここのとこ、ちょっと見た目を変えて欲しいんだけど...✓ こんな機能ほしいんだけど...✓ ブラウザの進化によって、コードを変えないといけない
これらが容易に起こる&
対応しなくてはいけない!!
2. 課題
!!寿命が短い!ユーザインターフェースは
これに対して、本質的な機能は変更頻度が低い
“やることリストを管理したい”
2. 課題
‘‘- ソフトウェアアーキテクチャ -
3. 解決方法課題を解決するために、対話型アプリケーションは
処理、入力、出力の3つの部分に分割されるべきである
機能とユーザインターフェースがくっついていると変更が大規模になる
分けましょう！
3. 解決方法
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
処理入力 出力
データと処理: Modelユーザ入力: Controller表示形式: View
3. 解決方法
ControllerViewModel
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
ModelController View
リスト表示
取り消し線
件数表示
入力フォーム
完了チェック
削除ボタン
やることリスト
ModelController View
入力・出力・処理を分ける
Model
Controller View
データと処理
表示の仕方イベントを受け付ける
イベント
実際にどうやって分けていけばいいかは
この後で
http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
break
http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
* MVC の背景 ✓ 画面の変更がしづらいことってありませんか？* MVC って何? ✓ アプリケーションを柔軟に保つための先人の知恵 ✓ 変化に対応するため、処理、入力、出力に分ける* ブラウザの中での MVC
ここまでの内容
* MVC の背景* MVC って何?* ブラウザの中でのMVC
??実際のコードでは
どう実現すればよいのか
多くのフレームワーク
Helping you select an MV* framework
IntroductionDevelopers these days are spoiled with choicewhen it comes to selecting an MV*framework for structuring and organizingtheir JavaScript web apps.
Backbone, Ember, AngularJS, Spine... the listof new and stable solutions continues togrow, but just how do you decide on which touse in a sea of so many options?
To help solve this problem, we createdTodoMVC - a project which offers the sameTodo application implemented using MV*concepts in most of the popular JavaScriptMV* frameworks of today.
TweetTweet 667
Our Stable Apps
Apps using RequireJS/AMD
Compare these to a non-framework implementation
* = App also demonstrates routing
What's new in 1.0.x Selecting a FrameworkOnce you've downloaded the latest releaseand played around with the apps, you'll wantto decide on a specific framework to try out.
Study the syntax required for defining models,views and (where applicable) controllers andclasses in the frameworks you're interested inand try your hand at editing the code to seehow it feels using it first-hand.
Please ensure that if you're happy with this,you do spend more time investigating theframework (including reading the official docs,the source and its complete feature list).There's often a lot more to a framework thanwhat we present in our examples.
Getting InvolvedIs there a bug we haven't fixed or an MV*framework you feel would benefit from beingincluded in TodoMVC?
If so, feel free to fork the repo, read ourcontribution guidelines, and submit a pullrequest — we'll be happy to review it forinclusion.
Make sure you use the template as a startingpoint and read the app specification.
Labs
Scroll down for 30+ more framework apps in Labs
Download (1.0.1)Download (1.0.1) View project on GitHubView project on GitHub
Backbone.js RR
Ember.js RR
AngularJS RR
Spine RR
KnockoutJS RR
Dojo RR
YUI RR
Batman.js RR
Closure RR
Agility.js RR
Knockback.js RR
GWT
Backbone.js + RequireJS RR
Ember.js + RequireJS RR
Vanilla JS
jQuery
RR
TodoMVC is an immensely valuable attempt at a difficult
problem - providing a structured way of comparing JS
libraries and frameworks. TodoMVC is a lone data point in a
sea of conjecture and opinion.
Justin Meyer
All main apps have been completelyrewritten for consistency
✔
Routing has been added to many of these✔
We now have 30+ apps being worked onin Labs
✔
We're using a kick-ass new template✔
Framework authors and contributors havebeen consulted to ensure our apps adhereto best practices
✔
We're helping AMD users by adding AMDversions of many apps
✔
Submit Pull Request »Submit Pull Request »
CanJS RR
http://addyosmani.github.com/todomvc/
今回は
今回は Backbone.js を例に挙げて見てみましょう
✓ 広く使われている✓ 仕組みが比較的シンプル
Model
Controller View
データと処理
表示の仕方イベントを受け付ける
イベント
Backbone.js のアプローチ
Model
View
データと処理
表示の仕方イベントを受け付ける
イベント
DOM
実際には複数あるので...
Model
View
データと処理
表示の仕方イベントを受け付ける
イベント
DOM
View
ViewModel
やることリストの例を考える
TaskView
TotalView
createTaskView
TaskView
TotalView
Task
createTaskView
TaskList
TaskView
TotalView
Task
createTaskView
TaskList
タスクを作成する
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが入力した!
ひとつ増やす
追加する増えた!
増えた!
作成する
更新する
TaskView
TotalView
Task
createTaskView
TaskList
タスクを完了する
TaskView
TotalView
Task
createTaskView
TaskList
ユーザがチェックした!
変わった!
変更する
更新する
更新する
変わった!
変わった!
TaskView
TotalView
Task
createTaskView
TaskList
タスクを削除する
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが削除ボタン押した!
削除された!
削除する
削除する
更新する
削除された!
変わった!
整理
TaskView
TotalView
Task
createTaskView
TaskList
TaskView
TotalView
Task
createTaskView
TaskList
doneDeleteViewタスクを削除する
TaskView
TotalView
Task
createTaskView
TaskList
doneDeleteView
ユーザが削除ボタン押した!
完了タスクを削除する
削除された!
更新された! 更新する
削除する
削除する
機能を増やしても不自然な矢印は増えない
動いているコードを見てみる
TaskView
TotalView
Task
createTaskView
TaskList
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが入力した!
ひとつ増やす
追加する増えた!
増えた!
作成する
更新する
タスクを作成する
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが入力した!
ひとつ増やす
追加する増えた!
増えた!
作成する
更新する
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); }});
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが入力した!
ひとつ増やす
追加する増えた!
増えた!
作成する
更新する
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}); }});
TaskView
TotalView
Task
createTaskView
TaskList
ユーザが入力した!
ひとつ増やす
追加する増えた!
増えた!
作成する
更新する
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});
github: https://github.com/tricknotes/task-list
demo: http://tasklist-demo.herokuapp.com/
その他の Backbone.js の機能
ブラウザサイド MVC での難しいところ
✓ URL✓ サーバとのデータ同期✓ 更新の反映のタイミング
従来の MVC とは別の解決が必要な部分がある
Backbone.js のアプローチ
Model
View
データと処理
表示の仕方イベントを受け付ける
イベント
DOM
View
Model
HistoryView
Collection
Router
DOM
Sync
URL イベント
サーバ
http://www.flickr.com/photos/hidekazufuruki/6881051786/sizes/h/in/photostream/
まずは使ってみる
* MVC の背景 ✓ 画面の変更がしづらいことってありませんか？* MVC って何? ✓ アプリケーションを柔軟に保つための先人の知恵 ✓ 変化に対応するため、処理、入力、出力に分ける* ブラウザの中での MVC ✓ Backbone.js のアプローチについて
今日のまとめ
tricknotes .talk .trigger(‘end’);
more information...
Backbone.js の参考情報
http://www.adventar.org/calendars/15
https://github.com/enja-oss/Backbone
Helping you select an MV* framework
IntroductionDevelopers these days are spoiled with choicewhen it comes to selecting an MV*framework for structuring and organizingtheir JavaScript web apps.
Backbone, Ember, AngularJS, Spine... the listof new and stable solutions continues togrow, but just how do you decide on which touse in a sea of so many options?
To help solve this problem, we createdTodoMVC - a project which offers the sameTodo application implemented using MV*concepts in most of the popular JavaScriptMV* frameworks of today.
TweetTweet 667
Our Stable Apps
Apps using RequireJS/AMD
Compare these to a non-framework implementation
* = App also demonstrates routing
What's new in 1.0.x Selecting a FrameworkOnce you've downloaded the latest releaseand played around with the apps, you'll wantto decide on a specific framework to try out.
Study the syntax required for defining models,views and (where applicable) controllers andclasses in the frameworks you're interested inand try your hand at editing the code to seehow it feels using it first-hand.
Please ensure that if you're happy with this,you do spend more time investigating theframework (including reading the official docs,the source and its complete feature list).There's often a lot more to a framework thanwhat we present in our examples.
Getting InvolvedIs there a bug we haven't fixed or an MV*framework you feel would benefit from beingincluded in TodoMVC?
If so, feel free to fork the repo, read ourcontribution guidelines, and submit a pullrequest — we'll be happy to review it forinclusion.
Make sure you use the template as a startingpoint and read the app specification.
Labs
Scroll down for 30+ more framework apps in Labs
Download (1.0.1)Download (1.0.1) View project on GitHubView project on GitHub
Backbone.js RR
Ember.js RR
AngularJS RR
Spine RR
KnockoutJS RR
Dojo RR
YUI RR
Batman.js RR
Closure RR
Agility.js RR
Knockback.js RR
GWT
Backbone.js + RequireJS RR
Ember.js + RequireJS RR
Vanilla JS
jQuery
RR
TodoMVC is an immensely valuable attempt at a difficult
problem - providing a structured way of comparing JS
libraries and frameworks. TodoMVC is a lone data point in a
sea of conjecture and opinion.
Justin Meyer
All main apps have been completelyrewritten for consistency
✔
Routing has been added to many of these✔
We now have 30+ apps being worked onin Labs
✔
We're using a kick-ass new template✔
Framework authors and contributors havebeen consulted to ensure our apps adhereto best practices
✔
We're helping AMD users by adding AMDversions of many apps
✔
Submit Pull Request »Submit Pull Request »
CanJS RR
http://addyosmani.github.com/todomvc/
http://www.publickey1.jp/blog/12/javascriptmvc.html
https://gist.github.com/1362110Original: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
本日は概論まで
あるのみ実践
http://connpass.com/event/1368/
Sapporo.js - 2012.12.16
Backbone.js handson: @onjiro_mohyahya
JavaScript 道場
超豪華講師JavaScript コーディング実践
練習!練習!練習!2013.02.23(土)@札幌市産業振興センター
ここまではまだまだ概論なので、しっかりと実践して、その中から新しい学びを一緒に見つけて行き
ましょう！http://www.flickr.com/photos/8674051@N04/6380167887/
top related