バックボーンJSでブラウザサイドのMVC実装

1. (C) ピコもん（株） All Rights Reserved.
Backbone.js で
ブラウザサイド MVC

2. 2(C) ピコもん（株） All Rights Reserved. 2
自己紹介
-Introduction-
・ Yukihiro Kitazawa ( 北澤 幸啓 )
・ @kitadesign
・ Work at ピコもん株式会社
・ 元 mixi 、元 CRH 、元〇〇、 yahoo とかにも行ってました、その他いっぱい
・ Android アプリを 16 個くらい作ってマーケットで出してます

3. (C) ピコもん（株） All Rights Reserved. 3
Backbone.js ってなに？
・ブラウザサイド Javascript のフレームワーク
・ Javascript での大規模開発に向いています。
どんな特徴？
・ MVC アーキテクチャ
・オブジェクト指向
・イベント駆動
完全依存ライブラリ
・ Underscore.js
実務依存ライブラリ
・ json2, jQuery or Zepto

4. (C) ピコもん（株） All Rights Reserved. 4
GUI での MVC とは
サーバサイドではよく MVC を耳にするけど
Web サービスだと大体こんな感じ

5. (C) ピコもん（株） All Rights Reserved. 5
GUI での MVC とは
ブラウザサイド Javascript ではどうなる？
レンダリング済
み HTML
Controller
View
Model
Server
WebStorage
Cookieイベント設置
イベント発火
ブラウザ内外のデータストアや API
表示変更
API など
データ変更
データ登録
データ取得
表示切替

6. (C) ピコもん（株） All Rights Reserved. 6
Backbone.js で MVC
Backbone.Model
Backbone.Collection
Backbone.View
Backbone.Router
Model の役割
Controller や
View の役割
呼び出し 変更通知
ユーザ
Backbone.Router
DOM を変更
DOM イベント
操作

7. 7(C) ピコもん（株） All Rights Reserved. 7
こんな感じのサービスを作るには
エンターしたら保存
チェックしたら全てに
チェック
チェックしたらテキスト
に中央線
ダブルクリックで編集で
きるように
チェックされてない
残っているタスクを
確認してカウント表示
リストにマウスオーバー
したら表示
押したら消す
押されたらチェックされ
ている奴を削除する
タスクが０件になったら
このエリアを隠す
このくらい必要

8. 8(C) ピコもん（株） All Rights Reserved. 8
jQuery で実装しようとすると
$( function () {
var $input_main = $( ‘#input_main’ );
var $tasklist_area = $( ‘#tasklist_area’ );
var $check_complete = $( ‘#checkbox_comp’ );
var $footer_area = $( ‘#footer’ );
var $remove_button = $footer_area.find( ‘.remove’ );
var $count = $footer_area.find( ‘.count’ );
var storage = window.localStorage;
var done_count = 0;
var total_count = 0;
$footer_area.hide();
$input_main.keypress( function ( event ) {
if ( event.keyCode != 13 ) return;
if ( !this.val() ) return;
var $template = $( $( ‘stats-template’ ).html() );
$tasklist_area.append( $template );
$template.find( ‘.check_done’ ).on( ‘click’, function ( event ) {
if ( this.hasClass( ‘done’ ) ) {
done_count--;
return this.removeClass( ‘done’ );
}
done_count++;
this.addClass( ‘done’ );
} );
$template.find( ‘.text’ ).on( ‘dblclick’, function(){
this.parent().find( ‘input’ ).show();
this.hide();
} );
$template.find( ‘input’ ).keypress( function ( event ) {
if ( event.keyConde != 13 ) return;
if ( !this.val() ) {
// 削除処理
}
//Storage に保存して hide と text を更新して show
} );
Storage に保存して hide と text を更新して show
} );
$template.find( ‘img.remove’ ).on( ‘click’, function () {
// Storage から削除して DOM も削除
// カウントをデクリメントして表示を更新
} );
$template.find( ‘div.row’ ).hover( function () {
$template.find( ‘img.remove’ ).show();
}, function () {
$template.find( ‘img.remove’ ).hide();
} );
} );
$remove_button.on( ‘click’, function () {
var $check = $tasklist_area.find( ‘.check_done’ );
$check.filter( ‘.done[checked]’ ).each( function ( value ) {
value.parent().remove();
storage.deleteItem( $check.indexOf( value ) );
} );
done_count = 0;
} );
$check_complete.on( ‘click’, function () {
if ( /* チェックされた / ) {*
// 全てのチェックボックスにチェック
// カウントを足し算
// 表示を変更
} else {
// 全てのチェックボックスのチェックを外す
// カウントを０
// 表示を変更
}
} );
var data = storage.getItem( ‘todos’ );
data = JSON.parse( data );
if ( data.length > 1 ) {
// template からデータを構築して表示
}
} );
使う DOM を取り出し
エンターされたら
テンプレートを DOM に挿入して
付けたいイベントを色々とセット
その間にストレージを意識して
入れたり消したり
DOM に何度もアクセスして
ストレージも操作
元々保存してある奴を表示するので
これまた色々と DOM を構築
こんな感じ？
グチャグチャになりやすく
コード改変もややこしい
他の人が触りにく

9. (C) ピコもん（株） All Rights Reserved. 9
Backbone.js を使ってオブジェクト化
全体のプレゼンテーション層
AppView
１タスクのプレゼンテーション層
TodoView
全体タスクのコレクション
TodoList
１タスクのモデル層
Todo

10. (C) ピコもん（株） All Rights Reserved. 10
図にするとこう
TodoList
TodoView Todo
AppView 使用
作成 複数保持・管理
HTML
操作
操作
内包
Server
WebStorage
Cookie
API とか
更新
取得
更新
プレゼンテーション層 ビジネスロジック層
すっきり

11. (C) ピコもん（株） All Rights Reserved. 11
デモ