Introduction for Browser Side MVC

ブラウザサイド 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.

自己紹介

Sapporo.js

http://sapporojs.org

http://atnd.org/events/16792


http://connpass.com/event/1368/

Sapporo.js - 2012.12.16

Backbone.js handson: @onjiro_mohyahya



@tricknotes

/* * PR * Important!

JavaScript 道場

超豪華講師JavaScript コーディング実践

練習!練習!練習!2013.02.23(土)@札幌市産業振興センター

JavaScript 道場



Comming soon...

*/

よろしくお願いします

ブラウザサイド MVC 入門

佐藤竜之介(Ryunosuke SATO)Sapporo.js

SaCSS vol.40 - 2012.12.15




本発表について

【開発編】ブラウザサイド【開発編】ブラウザサイド MVC MVC 入門（佐藤竜之介）入門（佐藤竜之介）

画面遷移を行わず、1枚の html 上で対話的に操作するような web アプリケーションを目にする機会が増えてきました。そんなアプリケーションを開発する際、jQuery 主体だったこれまでの開発スタイルだと画面表示と機能が切り離せなくなってしまい、変更に弱い作りになってしまうことになるでしょう。

この問題に対処するにはどうすればよいでしょう？

そんなときは先人の知恵を参考に、その解決策を探してみるのはいかがでしょうか。ユーザからのインタラクションを受け付けるアプリケーションを上手く構築していく際のやり方として、MVC パターンが広く知られています。

本セッションでは、ブラウザ上での JavaScript の MVC の原点を辿り、その実装のひとつである Backbone.js を例にとって、整理されたコードについて考えてみたいと思います。

【編】を利用した開発環境パワーアップ講座（やまがあつ）

http://www.sacss.net/special03/



はじめに

ちょっと考えてみましょう

お題

「やることリストを作ってください」

* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること

Samplehttp://tasklist-demo.herokuapp.com/

http://tasklist-demo.herokuapp.com/

http://tasklist-demo.herokuapp.com/

??どんなアプローチをとりますか

例えば...jQuery だけ使って、

ひとつひとつ作っていった場合

* enter が押されると... * テキストを取得してやることを追加する * 全件数をひとつ増やす

* checkbox が変化すると... * やることに取り消し線を引く * 完了件数を増やす

* 削除ボタンを押すと... * やることを削除する * 件数をひとつ減らす







「ところでさ、終わったタスクを

まとめて削除したいんだけど...」

http://commonpost.boo.jp/?attachment_id=21729

えっ



* まとめて削除ボタンを押すと... * チェックがついているタスクを探す * チェックがついているタスクを削除する * 全件数を更新する * 完了件数を更新する









http://livedoor.3.blogimg.jp/hamusoku/imgs/b/a/ba9d0808.jpg

複雑



これについてはまた後で :-)

* MVC の背景* MVC って何?* ブラウザの中でのMVC

今日のお品書き


ひとつひとつ作って、だいぶ複雑になってしまっていた

最初の例

http://www.flickr.com/photos/pappuradonkarume/4711288623

変更が困難



この複雑さの原因は何でしょう??




リスト表示

取り消し線

件数表示

入力フォーム

完了チェック

削除ボタン

リスト表示

取り消し線

件数表示

入力フォーム

完了チェック

削除ボタン

全部削除ボタン

リスト表示

取り消し線

件数表示

入力フォーム

完了チェック

削除ボタン

全部削除ボタン

それぞれのイベントハンドラの中で、関係のある表示部分をすべて更新している

“矢印が多い”

“機能” と “表示” が一緒になっているので、ひとつの変更でもあっちもこっちも直す必要がある

他にも、 html のマークアップの変更や、DOM 構造の変更も困難...

整理

どうやって

する?

管理したいんだっけ?

“何を”

「やることリストを作ってください」

* タスクを登録できること* 完了したタスクをチェックできること* タスクを消すことができること

“やることリスト”

リスト表示

取り消し線

件数表示

入力フォーム

完了チェック

削除ボタン

やることリスト

リスト表示

取り消し線

件数表示

入力フォーム

完了チェック

削除ボタン


ユーザが入力した!

ひとつ増やす

増えたよ!

更新する

更新する

増えたよ!

を抽出する

本質的な部分

解決するための、先人の知恵

上手く整理するためのコツ

MVC(様々な形で実装されながら、今日に至る)

One of the architecture pattern


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




* 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/



今回は

http://backbonejs.org



今回は 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/

https://github.com/tricknotes/task-list

https://github.com/tricknotes/task-list

http://tasklist-demo.herokuapp.com

http://tasklist-demo.herokuapp.com

その他の Backbone.js の機能

ブラウザサイド MVC での難しいところ

✓ URL✓ サーバとのデータ同期✓ 更新の反映のタイミング

従来の MVC とは別の解決が必要な部分がある

Backbone.js のアプローチ

Model

View

データと処理


イベント

DOM

View

Model

HistoryView

Collection

Router

DOM

Sync

URL イベント

サーバ

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

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://www.publickey1.jp/blog/12/javascriptmvc.html



https://gist.github.com/1362110Original: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code

https://gist.github.com/1362110

https://gist.github.com/1362110

http://blog.nodejitsu.com/scaling-isomorphic-javascript-code

http://blog.nodejitsu.com/scaling-isomorphic-javascript-code

本日は概論まで

あるのみ実践


Sapporo.js - 2012.12.16

Backbone.js handson: @onjiro_mohyahya



JavaScript 道場



ここまではまだまだ概論なので、しっかりと実践して、その中から新しい学びを一緒に見つけて行き

ましょう！http://www.flickr.com/photos/8674051@N04/6380167887/

http://www.flickr.com/photos/8674051@N04/6380167887/

http://www.flickr.com/photos/8674051@N04/6380167887/

Documents

Introduction for Browser Side MVC