backbone.jsの使用例 その1

backbone.jsの使用例その➀

@Spring_MT

自己紹介

@Spring_MT

Infra and App Engineer

backbone.jsとは？

一言でいうと。。。

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/より最初の一行目を抜粋

backbone.jsとは？

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

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

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

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

MVCの話はどこ？

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

Controller

Model View

Dispatcher

App Server

Web Browser

HTTP Request HTTP Response

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

HTMLのレンダリング

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

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

• 重い Model と軽い Controller

• Viewは永続化しない

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

Cookieで保持)

• ControllerはModelをViewをつなぐ糊

GoFのMVC

(伝統的なMVC)

Controller Model

View

User Interaction

データの操作

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

MVC

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

MVC

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

backboneのMVC

CollectionModel

View

Router

DOM

更新イベント発火

Controller

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

User Interaction

OnHashChangePushState

backbone.js

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

• Controllerは基本でてこない

• ModelはCollection経由で操作する

フレームワークとは

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

backbone.js

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

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

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

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

実際に使ってみる

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

だってわかりづｒ(ry

その前に

require.js

• モジュールの依存管理

• minify

では使ってみる

コードを元に説明します

クライアントサイド

• i18n対応どうするのか？

• render

• validation

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

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

参考文献

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

tily/1362110)