20130924 Picomon CRH勉強会
Upcoming SlideShare
Loading in...5
×
 

20130924 Picomon CRH勉強会

on

  • 435 views

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

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

Statistics

Views

Total Views
435
Views on SlideShare
435
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

20130924 Picomon CRH勉強会 20130924 Picomon CRH勉強会 Presentation Transcript

  • (C) ピコもん(株) All Rights Reserved. Backbone.js で ブラウザサイド MVC
  • 2(C) ピコもん(株) All Rights Reserved. 2 自己紹介 -Introduction- ・ Yukihiro Kitazawa ( 北澤 幸啓 ) ・ @kitadesign ・ Work at ピコもん株式会社 ・ 元 mixi 、元 CRH 、元〇〇、 yahoo とかにも行ってました、その他いっぱい ・ Android アプリを 16 個くらい作ってマーケットで出してます
  • (C) ピコもん(株) All Rights Reserved. 3 Backbone.js ってなに? ・ブラウザサイド Javascript のフレームワーク ・ Javascript での大規模開発に向いています。 どんな特徴? ・ MVC アーキテクチャ ・オブジェクト指向 ・イベント駆動 完全依存ライブラリ ・ Underscore.js 実務依存ライブラリ ・ json2, jQuery or Zepto
  • (C) ピコもん(株) All Rights Reserved. 4 GUI での MVC とは サーバサイドではよく MVC を耳にするけど Web サービスだと大体こんな感じ
  • (C) ピコもん(株) All Rights Reserved. 5 GUI での MVC とは ブラウザサイド Javascript ではどうなる? レンダリング済 み HTML Controller View Model Server WebStorage Cookieイベント設置 イベント発火 ブラウザ内外のデータストアや API 表示変更 API など データ変更 データ登録 データ取得 表示切替
  • (C) ピコもん(株) All Rights Reserved. 6 Backbone.js で MVC Backbone.Model Backbone.Collection Backbone.View Backbone.Router Model の役割 Controller や View の役割 呼び出し 変更通知 ユーザ Backbone.Router DOM を変更 DOM イベント 操作
  • 7(C) ピコもん(株) All Rights Reserved. 7 こんな感じのサービスを作るには エンターしたら保存 チェックしたら全てに チェック チェックしたらテキスト に中央線 ダブルクリックで編集で きるように チェックされてない 残っているタスクを 確認してカウント表示 リストにマウスオーバー したら表示 押したら消す 押されたらチェックされ ている奴を削除する タスクが0件になったら このエリアを隠す このくらい必要
  • 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 { // 全てのチェックボックスのチェックを外す // カウントを0 // 表示を変更 } } ); var data = storage.getItem( ‘todos’ ); data = JSON.parse( data ); if ( data.length > 1 ) { // template からデータを構築して表示 } } ); 使う DOM を取り出し エンターされたら テンプレートを DOM に挿入して 付けたいイベントを色々とセット その間にストレージを意識して 入れたり消したり DOM に何度もアクセスして ストレージも操作 元々保存してある奴を表示するので これまた色々と DOM を構築 こんな感じ? グチャグチャになりやすく コード改変もややこしい 他の人が触りにく
  • (C) ピコもん(株) All Rights Reserved. 9 Backbone.js を使ってオブジェクト化 全体のプレゼンテーション層 AppView 1タスクのプレゼンテーション層 TodoView 全体タスクのコレクション TodoList 1タスクのモデル層 Todo
  • (C) ピコもん(株) All Rights Reserved. 10 図にするとこう TodoList TodoView Todo AppView 使用 作成 複数保持・管理 HTML 操作 操作 内包 Server WebStorage Cookie API とか 更新 取得 更新 プレゼンテーション層 ビジネスロジック層 すっきり
  • (C) ピコもん(株) All Rights Reserved. 11 デモ