backbone.jsの使用例 その1

27
backbone.jsの使用例 その@Spring_MT

Upload: makoto-haruyama

Post on 07-Dec-2014

1.446 views

Category:

Documents


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: backbone.jsの使用例 その1

backbone.jsの使用例その➀

@Spring_MT

Page 2: backbone.jsの使用例 その1

自己紹介

@Spring_MT

Infra and App Engineer

Page 3: backbone.jsの使用例 その1

backbone.jsとは?

一言でいうと。。。

Page 4: backbone.jsの使用例 その1

backbone.jsとは?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

・http://backbonejs.org/より最初の一行目を抜粋

Page 5: backbone.jsの使用例 その1

backbone.jsとは?

・サーバーとJSONでやりとりするRESTfulインターフェース

・key-value型のデータ(属性の設定)とカスタムイベントを持つモデル

・複数のモデルを扱うためのAPIを持つコレクション

・イベントハンドリングを行うビュー

Page 6: backbone.jsの使用例 その1

MVCの話はどこ?

Page 7: backbone.jsの使用例 その1

webアプリケーション(Railsとか)

Page 8: backbone.jsの使用例 その1

Controller

Model View

Dispatcher

App Server

Web Browser

HTTP Request HTTP Response

データの取得と操作データの受け渡し

HTMLのレンダリング

レンダリングが完了したHTMLを含むHTTP Response

Page 9: backbone.jsの使用例 その1

WebアプリケーションのMVC(Model 2)

• 重い Model と軽い Controller

• Viewは永続化しない

• HTTPはステートレスなのでViewに状態を保持する必要がない(Session

Cookieで保持)

• ControllerはModelをViewをつなぐ糊

Page 10: backbone.jsの使用例 その1

GoFのMVC

(伝統的なMVC)

Page 11: backbone.jsの使用例 その1

Controller Model

View

User Interaction

データの操作

操作の内容を渡す イベントを発火

Page 12: backbone.jsの使用例 その1

MVC

• 永続的な View と交換可能な Controller

Page 13: backbone.jsの使用例 その1

MVC

• 同じMVCという単語でも、コンテキストによって、内容が変わってくる

Page 14: backbone.jsの使用例 その1

backboneのMVC

Page 15: backbone.jsの使用例 その1

CollectionModel

View

Router

DOM

更新イベント発火

Controller

イベントを発火データの操作

User Interaction

OnHashChangePushState

Page 16: backbone.jsの使用例 その1

backbone.js

• Viewの中にビューメソッド(描画)とコントローラーメソッド(ロジック)を分ける

• Controllerは基本でてこない

• ModelはCollection経由で操作する

Page 17: backbone.jsの使用例 その1

フレームワークとは

• アプリケーションの構築、管理を簡単にするための道具

Page 18: backbone.jsの使用例 その1

backbone.js

・サーバーとJSONでやりとりするRESTfulインターフェース

・key-value型のデータ(属性の設定)とカスタムイベントを持つモデル

・豊富なリスト操作用のAPIを持つコレクション

・イベントハンドリングを行うビュー

Page 19: backbone.jsの使用例 その1

実際に使ってみる

Page 20: backbone.jsの使用例 その1

ただ、サンプルアプリは使わないYO

Page 21: backbone.jsの使用例 その1

だってわかりづr(ry

Page 22: backbone.jsの使用例 その1

その前に

Page 23: backbone.jsの使用例 その1

require.js

• モジュールの依存管理

• minify

Page 24: backbone.jsの使用例 その1

では使ってみる

コードを元に説明します

Page 25: backbone.jsの使用例 その1

クライアントサイド

• i18n対応どうするのか?

• render

• validation

• i18n用のモジュールもあるが使うのか?

Page 26: backbone.jsの使用例 その1

ご清聴有難うございました

Page 27: backbone.jsの使用例 その1

参考文献

• サバクラ両方で動く JavaScript の大規模開発を行うために(https://gist.github.com/

tily/1362110)