Backbone.js入門

11,709 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.

×