Más contenido relacionado
La actualidad más candente (20)
Similar a Backbone.js入門 (20)
Más de AdvancedTechNight (20)
Backbone.js入門
- 1. Advanced Tech Night No.06
Java開発者が今から学ぶべき、JavaScriptによるWeb開発
2013/03/15
Acroquest Technology
村田 賢一郎(@muraken720)
- 2. 目次
1. はじめに
2. 少し昔話を・・・
3. AjaxによるクライアントWebアプリケーション
4. JavaScript MVCフレームワークの登場
5. Backbone.jsとは?
6. Backbone.jsの特長
7. アプリケーションを作ってみよう!
8. まとめ
2
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 3. 1. はじめに
自己紹介 =
氏名: ‘村田 賢一郎’
twitter: ‘@muraken720’
所属: ‘Acroquest Technology Co.,Ltd.’
仕事:
‘ライフライン系ネットワーク集中監視システム開発’
‘フレームワーク開発’
言語: ‘Java & JavaScript’
興味:
‘node.js’
‘CoffeeScript’
‘機関車トーマス!’
3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 5. 2. 少し昔話を・・・
JavaによるWebアプリケーション開発の歴史
1. Servletの登場
Servlet内にHTMLタグをゴリゴリ書くとか、さぁ大変!
2. JSPの登場
今度はJSP内にアプリケーションロジックを書いくとか、もう大変!
Struts, SpringMVCなどのMVCフレームワークの登場
Client Side Server Side
HTML Action Logic Dao
CSS
JS Template Entity
5
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 6. 3. AjaxによるクライアントWebアプリケーション
クライアント側の技術の発展で、アーキテクチャの重心
がクライアント側にシフト
Ajaxによる非同期通信。さらにCommet、WebSocketに発展!
JSONによるデータ通信量の削減
HTML5 / CSS3 / JavaScript
モバイルアプリケーション
Client Side Server Side
Controller API Logic Dao
重心
View Model Entity
クライアント側でできる処理は、クライアントでやる
6
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 7. 4. JavaScript MVCフレームワークの登場
クライアント側でJavaScriptでゴリゴリ書くようになると
直ぐにスパゲティコードになってしまう。
JavaScript MVCフレームワークの登場
7
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 8. 5. Backbone.jsとは?
1. JavaScript MVC Framework
2. DocumentCloudが公開しているOSS。
http://backbonejs.org/
3. 開発者: Jeremy Ashkenas氏
他にも以下を開発
• Underscore.js
• CoffeeScript
4. 豊富な採用事例
① LinkedIn
② Foursquare
③ 37Singals 他
8
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 9. 6. Backbone.jsの特長①
1. Architecture
9
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 11. 6. Backbone.jsの特長②③
2. Simple
3. Lightweight
11
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 12. 6-2. Simpleで柔軟性に富む
1. フレームワークというよりライブラリ感覚で使える
2. 他ライブラリとの併用が可能
3. プレゼンテーション機能がないため、お気に入りのライブラ
リを利用可能
Unerscore.jsのtemplate以外にも、Handlebars, Hogan.js,
Mustacheなど
4. バインディング機能のような高度な機能がない分、ライブラ
リの見通しがよく、開発者が細かい制御が可能
12
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 15. 7. サンプルアプリケーションの構成
Header
Message入力部
MessageList部
Footer
15
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 16. 7. サンプルアプリケーションの構成
AppView
16
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 17. 7. サンプルアプリケーションの構成
MessageListView
17
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 18. 7-1. Modelはデータと固有メソッドを持つ
// Model
app.Message = Backbone.Model.extend({
defaluts: {
validateメソッドをオーバーライドするこ
"content": "" とで、バリデーション処理を実装できる。
}
Modelにアプリケーションに必要なメソッ
ドを定義する。
});
デフォルトではサーバサイドとRESTful
な同期を行う。
18
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 19. 7-2. CollectionはModelを保持するDataStore
// Collection
app.MessageList = Backbone.Collection.extend({
model: app.Message
});
Collectionに格納するModelを定義。
デフォルトではサーバサイドと
RESTfulな同期を行う。
Underscore.jsによる便利なメソッド
を多数持つ。
19
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 20. 7-3. CollectionとModelの使い方
this.messageList = new app.MessageList();
var message = new app.Message();
message.set({"content": text});
Collectionにaddするとaddイ
this.messageList.add(message); ベントが発生する。
Viewではこのイベントの通知
を受けて描画処理を行うよう
にする。
20
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 21. 7-4. ViewにCollectionのEventをバインドする
app.MessageListView = Backbone.View.extend({
el: "#msglist", CollectionにModelが
addされたら、renderメ
template: _.template($("#li-template").html()),
ソッドを呼び出すように
定義。
initialize:function (messageList) {
this.collection = messageList;
this.collection.bind("add", this.render, this);
},
render:function (msg) { Viewの描画処理。
$(this.el).append(this.template(msg.toJSON())); jQuery Mobileを使用し
$(this.el).listview('refresh'); ているため、ライブラリ
} に必要な処理をしてい
}); る。
21
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 22. 7-5. ViewにUIのEventをバインドする
app.AppView = Backbone.View.extend({
el: "#index",
events: { Viewのeventsプロパティを使
"click #addbtn": "onAdd" うとUIイベントを固有のメソッド
}, に関連付けることができる。
onAdd:function () {
var text = this.$("#msg").val();
var message = new app.Message();
message.set({"content": text});
this.messageList.add(message);
this.$("#msg").val("");
}
});
22
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 23. 7-6. (補足)Backbone.Events
Eventsが提供するイベントの監視設定と解除、イベントの発火を
利用することにより、コンポーネント間の依存関係を疎結合にす
ることができます。
23
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 25. 8. まとめ
1. Backbone.jsを使うことにより、アプリケーションにMVC
アーキテクチャを導入できる。
2. Model, Collection, Viewとそれぞれの役割をもった機
能に分割できる。
3. Eventsによりお互いを疎結合にしやすい。
4. 機能を小さく分割することで、再利用や並行開発が可
能となる。
5. 大規模なアプリケーションの開発に効果を発揮する。
25
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
- 26. ご清聴、ありがとうございました。
Infrastructures Evolution
26
Copyright © Acroquest Technology Co., Ltd. All rights reserved.