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.

introduction to Marionette.js (jscafe14)

Marionette.jsの概要

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

introduction to Marionette.js (jscafe14)

  1. 1. Introduction to Backbone.Marionette ryuma tsukano jsCafe14
  2. 2. Marionetteとは? Backbone.jsの上に被せたlibrary 1. moduleを役割に応じて綺麗に整理 2. 決まった処理の記述を事前に埋込み
  3. 3. なぜMarionette? Backboneを実際書いてみると色々悩む ● ①自由度が高過ぎ ○ Viewの親子や配置等、人によってバラバラで大変 ● ②用意されたmoduleだけでは足りない ○ 特にViewやRouterが汚れる ● ③同じsourceばかり膨大な量を書くハメに... =>これらを解決するためにMarionette
  4. 4. Marionetteの良い所 ● ①Viewの構成が整理されて分かり易くなる ○ Layout管理(Viewの配置)の仕組みがある ○ どのView使うかでViewの親子階層が明確に ● ②開発作業の効率化 ○ とにかく書く量が半分以下に激減! ○ 量が少ないので、読むのも楽になる! ● ③ソースが汚れない ○ routerとController分けてる! ○ イベント連携の仕組みが整理されてる!
  5. 5. 噂:抽象度 噂「抽象度が高すぎなんじゃない?」 => そんなに言う程ではない。simpleだし。 ● 見えないcode = 今迄何度も書いてた所 ○ 何度も同じ事書きたくないじゃん ○ 不明点はMarionetteのsource読めば良い ■ sourceは量が少なく、Backboneっぽいので、 すぐ 辿れる
  6. 6. 抽象度:補足 補足すると、Marionetteは “my way or highway?”なframework。 ○ ※ Developing Backbone.js Applications より ● 気に入らない所は使わなくてもいい ○ 厳密に全てを使わなくても大丈夫 ○ 一部、生Backbone/生jsを書いてもいい
  7. 7. 噂:学習コスト 噂「学習コストかかるからあかんやろ」 =>勿論、0では無いがそこまで大変でない ● Backboneの延長として+αしただけ ○ simpleでそんなに独自ではない。 ○ 殆ど、Backboneにextendしてる
  8. 8. 学習コストの補足 結局、生のBackboneだけを使ってても ● ゆくゆく共通化するような事 ● (暗黙的/明示的に)現場でルール化する事 =>これらを準備してくれるのがMarionette Marionetteの学習= 現場で同等の独自の仕組み勉強するのと同じ
  9. 9. 事例等 ● 海外venture系で実験的に使い始めてる? ○ from 公式wiki事例集 ○ 有名な物は無いが... ● 今年(‘13)7月のBackbone confでも言及有り ○ (1つ目/2つ目)
  10. 10. githubのstar数 ここのサイトでは Backboneplugin中 一番start多いのが =>Marionette ※ちなみに2位のchaplinも 同じ様なframework
  11. 11. 情報源 ● 入門 ○ github:Developing Backbone.js Applications ○ slide: Backbone経緯 / 概念の解説 / 概説 ○ blog : viewを図示した良記事 ● リファレンス ○ github: 公式document / 公式wiki ● tutorial ○ blog : 1,2 / video : 1 / 書籍 : 1 ● example ○ todoMVC / 本棚アプリ?のソース / mailer? ● Marionette自体のboilerplate系 ○ github : boilerplate / yeomanのgenerator
  12. 12. boilerplate系 以下、すぐに始められる!素晴らしい! ● marionetteのboilerplate ● yeomanのgenerator ○ 特に後者が素晴らしい。以下の構成がすぐ出来る! ■ Back) Node + Express + Socket.io ■ Storage) Mongoose(mongoDB) ■ Front) Backbone + Marionette + requirejs + Handlebars + SASS-bootstrap ■ Test) phntomjs + Mocha + Chai + Sinon ○ railsみたいな感覚でいきなり開発出来る! ■ 各種generatorも沢山あってかなり助かる!
  13. 13. ソースはこんな感じ ● render書かない ○ modelとのmappingも書かない ○ template呼び出し/cacheも書かない =>量少ないのでパッと見も明快。 =>あくまでBackboneっぽく書いてる。
  14. 14. 今から 個別のcomponentの説明をしていきます。 ★おすすめ =>本体のソースを見ながら聞くと、   ある程度納得しながら進めれるかも。 ● 正直に書かれたBackboneのソースなので、割と平易 に読めるかと。 =>本体は[ こちら ]から
  15. 15. Marionetteの全体像 MarionetteがBackboneに追加した事は3つ ● 1)View ● 2)Router ● 3)全体連携 ※量的にも内容的にも1のViewがmain。 後はおまけ
  16. 16. 1)viewのまとめ ● A)Viewを拡張 ○ View ○ ItemView ● B)Viewの集合 ○ CollectionItem ○ CompositeItem ● C)レイアウトを管理 ○ Region ○ Layout
  17. 17. 1)View A)Viewを拡張
  18. 18. Viewの継承関係 =>先祖になるViewの話から Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
  19. 19. Marionette.View Marionette全ViewのBase(extend元super class) (Backbone.Viewをextendしていて、内容は主に以下を追加) ● closeメソッド ○ eventのunbind/el削除等 ○ 通常View自体の参照外してもGC対象にならない。 Event等unbindする必要有り=>それやってくれる ● ui ○ よく使うjQuery要素を書いておける仕組み ● templateHelper ○ templateから呼び出せる関数(次のpageで詳細) ※このViewを直接使う事はほぼ無い
  20. 20. Viewのtemplatehelper templateHelper : templateから呼べるfunction 例)公式docより これを view.render()すると、 “I think that Backbone.Marionette is the coolest” と表示される
  21. 21. Marionette.ItemView Model(Collection)と結びつく1つのview 先程のViewをextendして主に以下を追加 ● renderメソッド定義されてる ○ Model(Collection)を.toJSONでserialize ○ templateを生成(underscore) ○ Renderオブジェクトにtemplateを入れて描写 ○ Marionette本体のソースを読むとよく分かる ○ =>render定義されてるので、自分で書く必要無い ● modelEvents/collectionEvents ○ model/collectionのeventをキャッチする ○ 例)modelEvents : { “change” : “method”} ■ view指定のmodelがchangeしたらmethod実行
  22. 22. ItemViewのソース こんな感じ=>renderの定義とか自分で書かない
  23. 23. 1)View B)Viewの集合
  24. 24. ulタグ(=CollectionView) Viewの集合? BackboneのModelの集合=>Collection 同じように、Viewの集合を作ろうという話 例) ● liタグの1つ ○ さっきのItemView ● ulタグで囲う ○ CollectionView <=これ。 liタグ(=ItemView) liタグ(=ItemView) liタグ(=ItemView)
  25. 25. Marionette.CollectionView ItemViewを束ねるView ● collectionの追加削除Eventもcheck ○ Eventひっかかった際の処理も定義済み ■ 追加削除:ItemViewを追加削除renderする ■ reset時:再度renderする ● 同じくrenderも定義済み ○ 指定したcollectionでloopしてItemViewをrender ○ renderしたものはelに格納。これもソース見よう ● Backbone.BabySitterを使ってItemView管理 ○ 柔軟に呼び出せる ○ 例)myCollView.children.findByModel(MyModel)
  26. 26. CollectionViewのソース こんな感じ =>基本はitemViewを指定するだけ
  27. 27. Marionette.CompositeView CollectionViewを継承して以下を追加 ● templateを指定できる ○ ItemViewを囲うための親側のtemplateを作れる ○ appendHtmlメソッド上書きすると追加する場所や内容を 自分で書ける ● render ○ 再帰的にrender出来る ○ explorerのようなTree状のview作れる=>例
  28. 28. ソース例 tableをcompositeで書いた例 http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ Username FullName taro yamada taro hanako tanaka hanako
  29. 29. 違い CollectionViewとCompositeViewの違い =>ItemViewの包み方 ● CollectionView ○ 単純にtagで囲うLV ○ 単純に1階層のItemViewのrenderするだけ ● CompositeView ○ 親側にtemplate指定できる ■ その中に子供のtemplate埋め込める ○ 再起的に子孫のviewのrenderを実行できる
  30. 30. 実際の所 ● CopositeViewを使う方が多いかも ○ そんなに単純なViewにならないから ○ template有った方が柔軟 ● それでも、使える所は出来るだけ CollectionView使った方が良い ○ 「あたし、単純なんですー!」って言われると、ソース読 み易いから
  31. 31. Viewの継承関係もう一度 Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
  32. 32. 1)View C)レイアウトを管理
  33. 33. Layoutの親子関係 Layout Region CollectionView CompositeViewItemView ※Regionの中に 子供のLayout入る事がある
  34. 34. LayoutとRegionの関係 使い方の例 ● Layout > Region > View
  35. 35. Region Viewの表示非表示等の管理 ● 表示/非表示 ○ Region.show(view)で表示(renderを実行) ○ Region.close()で非表示 ● 再表示管理 ○ 再表示時、前の子供のview全部closeさせる
  36. 36. ソースsample show/close書く ● elごちゃごちゃ書かない ○ なぜ書かなくて済むか? ■ =>次のpageのLayout等で場所を指定する
  37. 37. Layout Regionの集合 ● regionsフィールドでregionを登録 ○ regions: { Region名: html要素 } ○ 例)regions: { menu: “#side” } ■ id=sideなhtml要素をmenuというRegionで登録 ■ ここでshowするとid=sideにviewのelを描写 ○ 後でaddRegionで追加も出来る ● 実はItemViewをextendしてる ○ ItemViewのようにtemplate指定可能 ○ ItemViewのようにLayout自体をshowできる ○ 例)MyApp.mainRegion.show(new ChildLayout())
  38. 38. Layoutソース ● id=menuの要素にmenuというRegion登録 ● menuにMenuViewを表示する
  39. 39. 実際のLayout ● 幾つか見るとLayoutそんなに使われてない? ○ =>後述のApplicationがRegion管理も出来る ● 使い分け ○ 基本 ■ Application > Region > View ○ 画面がいっぱい ■ 個別にLayout > Region > View
  40. 40. 2)Router
  41. 41. AppRouter Backbone.routerをextend ● appRoutesにBackboneのroutes書く ○ 書式はBackboneのroutesと一緒 ○ 実行する関数=Controllerの関数 ○ router内の関数ではない ● controller属性にcontrollerを指定 ○ controllerは、ただのobject
  42. 42. Controller こんな感じ
  43. 43. 3)全体の連携
  44. 44. 3)全体の連携 ● 1)Application ● 2)イベントの話 ○ A)command ○ B)Request/response ○ C)Event
  45. 45. Marionette.Application アプリのhub。初期化や調整等。 初期化処理=>アプリ開始 ● addInitializer(function(){ … }) ○ 初期化処理。例えば... ■ AppRouterのnew、history.startとか実行 ■ 初期画面作成処理 ● start ○ configを元にアプリを開始
  46. 46. Application こんな感じ
  47. 47. Component同士の通信 以下、3種類あり ● Commands ○ 戻り値なし ● Request/Response ○ 戻り値あり ● Event ○ 元々Marionetteに埋め込まれているEventと連携 =>これがApplicationの中に埋め込まれてる ● ※実体はBackbone.wreqrというplugin
  48. 48. Commands ● 一カ所の処理を実行するだけ ○ ※呼び出しはどこからでも書ける ● 戻り値は無い
  49. 49. Request/Response ● 別のcomponentから情報取得する時使う ○ 戻り値が有る =>これで”RESPONSE HIT”が返って来る
  50. 50. Events ● Backbone.Eventsをextend ○ 何かが起こった事を伝える時便利 ○ 複数の処理を実行したい時に便利
  51. 51. まとめ 良い所 ● ①Viewの構成が整理=>分かり易くなる ● ②開発作業の効率化 ● ③ソースが汚れない コンポーネント ● View ○ ItemView/CollectionView/CompositeView ● Region/Layout ● AppRouter/Controller ● Application ○ Command/Request,Response/Event
  52. 52. おしまい

×