Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone.js入門

12,084 views

Published on

AdvancedTechNight No.6 Session #2

Published in: Technology
  • Be the first to comment

Backbone.js入門

  1. 1. Advanced Tech Night No.06Java開発者が今から学ぶべき、JavaScriptによるWeb開発 2013/03/15 Acroquest Technology 村田 賢一郎(@muraken720)
  2. 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. 3. 1. はじめに自己紹介 = 氏名: ‘村田 賢一郎’ twitter: ‘@muraken720’ 所属: ‘Acroquest Technology Co.,Ltd.’ 仕事: ‘ライフライン系ネットワーク集中監視システム開発’ ‘フレームワーク開発’ 言語: ‘Java & JavaScript’ 興味: ‘node.js’ ‘CoffeeScript’ ‘機関車トーマス!’ 3 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  4. 4. 宣伝です。連載をさせて頂いてます! http://appkitbox.com/knowledge 4 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  5. 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. 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. 7. 4. JavaScript MVCフレームワークの登場 クライアント側でJavaScriptでゴリゴリ書くようになると 直ぐにスパゲティコードになってしまう。 JavaScript MVCフレームワークの登場 7 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  8. 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. 9. 6. Backbone.jsの特長① 1. Architecture 9 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  10. 10. 6-1. アプリケーションにアーキテクチャ(背骨)を作る 一定のパターンで開発できる分かりやすいアーキテクチャhashChange/ pushState 操作 Backbone Backbone Router Model trigger 制御 Backbone Backbone 参照 HTML View Events DOM Event 通知 trigger View Backbone 描画 Template render Collection 操作 10 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  11. 11. 6. Backbone.jsの特長②③ 2. Simple 3. Lightweight 11 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  12. 12. 6-2. Simpleで柔軟性に富む1. フレームワークというよりライブラリ感覚で使える2. 他ライブラリとの併用が可能3. プレゼンテーション機能がないため、お気に入りのライブラ リを利用可能  Unerscore.jsのtemplate以外にも、Handlebars, Hogan.js, Mustacheなど4. バインディング機能のような高度な機能がない分、ライブラ リの見通しがよく、開発者が細かい制御が可能 12 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  13. 13. 6-3. Lightweightなフレームワーク1. Backbone.js(5.6k)+Underscore.js(4k)  Ember.js(42k)  AngularJS(29k) Ember.js  Spine(8.1k) AngularJS Backbone.js+Underscore. js1. 依存ライブラリ: Spine.js  Underscore.js  JQuery or Zepto.js 0 10 20 30 40 50  json2.js 13 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  14. 14. 7. アプリケーションを作ってみよう! Message List アプリケーション jQuery Mobile + Backbone.js 14 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  15. 15. 7. サンプルアプリケーションの構成 Header Message入力部 MessageList部 Footer 15 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  16. 16. 7. サンプルアプリケーションの構成 AppView 16 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  17. 17. 7. サンプルアプリケーションの構成 MessageListView 17 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  18. 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. 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. 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. 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. 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. 23. 7-6. (補足)Backbone.Events  Eventsが提供するイベントの監視設定と解除、イベントの発火を 利用することにより、コンポーネント間の依存関係を疎結合にす ることができます。 23 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  24. 24. 7-7. (補足)Model/CollectionのRESTful JSON API  Backbone.jsは、ajaxを利用したRESTful JSONインタ フェースによるサーバ側への永続化機能を標準で備え ている。 24 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  25. 25. 8. まとめ1. Backbone.jsを使うことにより、アプリケーションにMVC アーキテクチャを導入できる。2. Model, Collection, Viewとそれぞれの役割をもった機 能に分割できる。3. Eventsによりお互いを疎結合にしやすい。4. 機能を小さく分割することで、再利用や並行開発が可 能となる。5. 大規模なアプリケーションの開発に効果を発揮する。 25 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  26. 26. ご清聴、ありがとうございました。 Infrastructures Evolution 26 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

×