• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction for Browser Side MVC
 

Introduction for Browser Side MVC

on

  • 4,143 views

# 概要 ...

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

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

Statistics

Views

Total Views
4,143
Views on SlideShare
2,409
Embed Views
1,734

Actions

Likes
15
Downloads
18
Comments
0

10 Embeds 1,734

http://tricknotes.hateblo.jp 830
http://www.enishi-tech.com 616
http://d.hatena.ne.jp 226
https://twitter.com 22
http://localhost 20
http://makies.hatenablog.com 12
http://0.0.0.0 5
https://si0.twimg.com 1
http://twitter.com 1
http://feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Introduction for Browser Side MVC Introduction for Browser Side MVC Presentation Transcript

  • ブラウザサイド MVC 入門http://www.flickr.com/photos/39943270@N07/6276483269 Sapporo.jsSaCSS vol.40 - 2012.12.15 佐藤 竜之介(Ryunosuke SATO)
  • 提供Community for people who like JavaScript. Sapporo.js
  • 自己紹介
  • Sapporo.jshttp://sapporojs.org
  • Sapporo.js - 2012.12.16Backbone.js handson: @onjiro_mohyahya http://connpass.com/event/1368/
  • @tricknotes
  • /* * PR * Important!
  • JavaScript 道場 超豪華講師JavaScript コーディング実践 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  • JavaScript 道場 on . .. 超豪華講師 in g so o m mJavaScript コーディング実践C 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  • */
  • よろしくお願いします
  • ブラウザサイド MVC 入門http://www.flickr.com/photos/39943270@N07/6276483269 Sapporo.jsSaCSS vol.40 - 2012.12.15 佐藤 竜之介(Ryunosuke SATO)
  • 本発表について
  • 【開発編】ブラウザサイド MVC 入門(佐藤竜之介)画面遷移を行わず、1枚の html 上で対話的に操作するような web アプリケーションを目にする機会が増えてきました。そんなアプリケーションを開発する際、jQuery 主体だったこれまでの開発スタイルだと画面表示と機能が切り離せなくなってしまい、変更に弱い作りになってしまうことになるでしょう。この問題に対処するにはどうすればよいでしょう?そんなときは先人の知恵を参考に、その解決策を探してみるのはいかがでしょうか。ユーザからのインタラクションを受け付けるアプリケーションを上手く構築していく際のやり方として、MVC パターンが広く知られています。本セッションでは、ブラウザ上での JavaScript の MVC の原点を辿り、その実装のひとつである Backbone.js を例にとって、整理されたコードについて考えてみたいと思います。【 編】 を利用した開発環境パワーアップ講座(やまがあつ) http://www.sacss.net/special03/
  • はじめに
  • ちょっと考えてみましょう
  • お題
  • 「やることリストを作ってください」* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
  • Samplehttp://tasklist-demo.herokuapp.com/
  • ? ?どんなアプローチをとりますか
  • 例えば... jQuery だけ使って、ひとつひとつ作っていった場合
  • * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす
  • * checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす
  • * 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす
  • * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  • * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  • 「ところでさ、 終わったタスクをまとめて削除したいんだ けど...」
  • http://commonpost.boo.jp/?attachment_id=21729 えっ
  • * まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する
  • * enter が押されると... * まとめて削除ボタンを押すと... * テキストを取得してやることを追加する * チェックがついているタスクを探す * 全件数をひとつ増やす * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  • * enter が押されると... * まとめて削除ボタンを押すと... * テキストを取得してやることを追加する * チェックがついているタスクを探す * 全件数をひとつ増やす * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  • http://livedoor.3.blogimg.jp/hamusoku/imgs/b/a/ba9d0808.jpg 複雑
  • これについてはまた後で :-)
  • 今日のお品書き* MVC の背景* MVC って何?* ブラウザの中でのMVC
  • * MVC の背景* MVC って何?* ブラウザの中でのMVC
  • 最初の例 ひとつひとつ作って、だいぶ複雑になってしまっていた
  • http://www.flickr.com/photos/pappuradonkarume/4711288623変更が困難
  • ? ?この複雑さの原因は何でしょう
  • * enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす* checkbox が変化すると... * やることに取り消し線を引く * 削除ボタンを押すと... * 完了件数を増やす * やることを削除する * 件数をひとつ減らす
  • 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示
  • 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示全部削除ボタン
  • 入力フォーム リスト表示完了チェック 取り消し線削除ボタン 件数表示全部削除ボタン
  • 矢印が多いそれぞれのイベントハンドラの中で、 関係のある表示部分を すべて更新している
  • 機能 と 表示 が一緒になっているので、ひとつの変更でもあっちもこっちも直す必要がある 他にも、 html のマークアップの変更や、 DOM 構造の変更も困難...
  • 整どうやって 理 する?
  • 何を管理したいんだっけ?
  • 「やることリストを作ってください」* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること
  • やることリスト
  • 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示
  • ユーザが 入力した! 更新する入力フォーム ひとつ増やす リスト表示 増えたよ!完了チェック 取り消し線 やることリスト削除ボタン 増えたよ! 件数表示 更新する
  • 本質的な 部分 を抽出する
  • 解決するための、先人の知恵上手く整理するためのコツ
  • One of the architecture patternMVC(様々な形で実装されながら、今日に至る)
  • * MVC の背景* MVC って何?* ブラウザの中でのMVC
  • ソフトウェアアーキテクチャ ソフトウェア開発のためのパターン体系 http://www.amazon.co.jp/dp/4764902834
  • アプリケーションを柔軟に保つための先人の知恵
  • ちょっと具体的に見てみましょう
  • 1. 前提2. 課題3. 解決方法
  • 1. 前提‘‘人間とコンピュータが対話するという機能を備えたソフトウェアを開発する際にこのパターンを考慮する - ソフトウェアアーキテクチャ -
  • 1. 前提 一枚の html の中で一部だけ更新するような、画面の切り替わりがないアプリケーションが対象
  • 2. 課題‘‘ユーザインターフェースの 変更は頻繁である - ソフトウェアアーキテクチャ -
  • 2. 課題✓ ここのとこ、ちょっと見た目を変えて欲しいんだけど...✓ こんな機能ほしいんだけど...✓ ブラウザの進化によって、コードを変えないといけない これらが容易に起こる & 対応しなくてはいけない!!
  • !!ユーザインターフェースは寿命が短い!
  • 2. 課題これに対して、本質的な機能は 変更頻度が低いやることリストを管理したい
  • 3. 解決方法‘‘課題を解決するために、 対話型アプリケーションは処理、入力、出力の3つの部分に 分割されるべきである - ソフトウェアアーキテクチャ -
  • 3. 解決方法機能とユーザインターフェースが くっついていると 変更が大規模になる分けましょう!
  • 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示
  • 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示 入力 処理 出力
  • 3. 解決方法データと処理: Modelユーザ入力: Controller表示形式: View
  • ModelViewController
  • 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示Controller Model View
  • 入力フォーム リスト表示完了チェック 取り消し線 やることリスト削除ボタン 件数表示Controller Model View
  • 入力・出力・処理を分ける イベントController Viewイベントを受け付ける 表示の仕方 Model データと処理
  • 実際にどうやって分けていけばいいかは この後で
  • 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 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
  • 今回は
  • http://backbonejs.org
  • 今回は Backbone.js を例に挙げて見てみましょう ✓ 広く使われている ✓ 仕組みが比較的シンプル
  • イベントController Viewイベントを受け付ける 表示の仕方 Model データと処理
  • Backbone.js のアプローチ イベント DOM 表示の仕方 イベントを受け付ける View Model データと処理
  • 実際には複数あるので... イベント DOM 表示の仕方 イベントを受け付ける View View Model View Model データと処理
  • やることリストの例を考える
  • createTaskViewTaskView TotalView
  • createTaskView TaskView Task TaskList TotalView
  • createTaskView TaskView Task TaskListタスクを作成する TotalView
  • ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  • createTaskView TaskView Task TaskListタスクを完了する TotalView
  • 更新する ユーザが チェックした!createTaskView 変わった! TaskView 変更する Task 変わった! 更新する TaskList 変わった! TotalView
  • createTaskView TaskView Task TaskListタスクを削除する TotalView
  • 削除する ユーザが削除ボタ ン押した!createTaskView 削除された! TaskView 削除する Task 削除された! 更新する TaskList 変わった! TotalView
  • 整理
  • createTaskView TaskView Task TaskList TotalView
  • createTaskView TaskView Task TaskListタスクを削除するdoneDeleteView TotalView
  • 削除するcreateTaskView 削除された! TaskView 削除する Task 完了タスク を削除する 更新された! 更新するユーザが削除ボタ ン押した! TaskList TotalViewdoneDeleteView
  • 機能を増やしても不自然な矢印は増えない
  • 動いているコード を見てみる
  • createTaskView TaskView Task TaskList TotalView
  • ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Taskタスクを作成する 増えた! 更新する TaskList TotalView
  • ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  • 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); }
  • ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  • 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}); }});
  • ユーザが 入力した! 作成するcreateTaskView ひとつ増やす TaskView 追加する 増えた! Task 増えた! 更新する TaskList TotalView
  • 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});
  • demo: http://tasklist-demo.herokuapp.com/github: https://github.com/tricknotes/task-list
  • その他のBackbone.js の機能
  • ブラウザサイド MVC での 難しいところ✓ URL✓ サーバとのデータ同期✓ 更新の反映のタイミング
  • 従来の MVC とは別の解決が必要な部分がある
  • Backbone.js のアプローチ イベント DOM 表示の仕方 イベントを受け付ける View Model データと処理
  • URL イベント DOMRouter View ViewHistory Model Collection サーバ Sync
  • http://backbonejs.org
  • まずは使ってみる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 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
  • http://www.publickey1.jp/blog/12/javascriptmvc.html
  • https://gist.github.com/1362110 Original: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
  • 本日は概論まで
  • 実践あるのみ
  • Sapporo.js - 2012.12.16Backbone.js handson: @onjiro_mohyahya http://connpass.com/event/1368/
  • JavaScript 道場 超豪華講師JavaScript コーディング実践 練習!練習!練習! 2013.02.23(土)@札幌市産業振興センター
  • ここまではまだまだ概論なので、しっかりと実践して、その中から新しい学びを一緒に見つけて行き ましょう! http://www.flickr.com/photos/8674051@N04/6380167887/