Introduction to
Backbone.Marionette
ryuma tsukano
jsCafe14
Marionetteとは?
Backbone.jsの上に被せたlibrary
1. moduleを役割に応じて綺麗に整理
2. 決まった処理の記述を事前に埋込み
なぜMarionette?
Backboneを実際書いてみると色々悩む
● ①自由度が高過ぎ
○ Viewの親子や配置等、人によってバラバラで大変
● ②用意されたmoduleだけでは足りない
○ 特にViewやRouterが汚れる
● ③同じ...
Marionetteの良い所
● ①Viewの構成が整理されて分かり易くなる
○ Layout管理(Viewの配置)の仕組みがある
○ どのView使うかでViewの親子階層が明確に
● ②開発作業の効率化
○ とにかく書く量が半分以下に激減!...
噂:抽象度
噂「抽象度が高すぎなんじゃない?」
=> そんなに言う程ではない。simpleだし。
● 見えないcode = 今迄何度も書いてた所
○ 何度も同じ事書きたくないじゃん
○ 不明点はMarionetteのsource読めば良い
■ ...
抽象度:補足
補足すると、Marionetteは
“my way or highway?”なframework。
○ ※ Developing Backbone.js Applications より
● 気に入らない所は使わなくてもいい
○ 厳...
噂:学習コスト
噂「学習コストかかるからあかんやろ」
=>勿論、0では無いがそこまで大変でない
● Backboneの延長として+αしただけ
○ simpleでそんなに独自ではない。
○ 殆ど、Backboneにextendしてる
学習コストの補足
結局、生のBackboneだけを使ってても
● ゆくゆく共通化するような事
● (暗黙的/明示的に)現場でルール化する事
=>これらを準備してくれるのがMarionette
Marionetteの学習=
現場で同等の独自の仕組...
事例等
● 海外venture系で実験的に使い始めてる?
○ from 公式wiki事例集
○ 有名な物は無いが...
● 今年(‘13)7月のBackbone confでも言及有り
○ (1つ目/2つ目)
githubのstar数
ここのサイトでは
Backboneplugin中
一番start多いのが
=>Marionette
※ちなみに2位のchaplinも
同じ様なframework
情報源
● 入門
○ github:Developing Backbone.js Applications
○ slide: Backbone経緯 / 概念の解説 / 概説
○ blog : viewを図示した良記事
● リファレンス
○ gi...
boilerplate系
以下、すぐに始められる!素晴らしい!
● marionetteのboilerplate
● yeomanのgenerator
○ 特に後者が素晴らしい。以下の構成がすぐ出来る!
■ Back) Node + Expre...
ソースはこんな感じ
● render書かない
○ modelとのmappingも書かない
○ template呼び出し/cacheも書かない
=>量少ないのでパッと見も明快。
=>あくまでBackboneっぽく書いてる。
今から
個別のcomponentの説明をしていきます。
★おすすめ
=>本体のソースを見ながら聞くと、
  ある程度納得しながら進めれるかも。
● 正直に書かれたBackboneのソースなので、割と平易
に読めるかと。
=>本体は[ こちら ]...
Marionetteの全体像
MarionetteがBackboneに追加した事は3つ
● 1)View
● 2)Router
● 3)全体連携
※量的にも内容的にも1のViewがmain。
後はおまけ
1)viewのまとめ
● A)Viewを拡張
○ View
○ ItemView
● B)Viewの集合
○ CollectionItem
○ CompositeItem
● C)レイアウトを管理
○ Region
○ Layout
1)View
A)Viewを拡張
Viewの継承関係
=>先祖になるViewの話から
Backbone.View
Marionette.View
Marionette.ItemView Marionette.CollectionView
Marionette.Composite...
Marionette.View
Marionette全ViewのBase(extend元super class)
(Backbone.Viewをextendしていて、内容は主に以下を追加)
● closeメソッド
○ eventのunbind/...
Viewのtemplatehelper
templateHelper : templateから呼べるfunction
例)公式docより
これを
view.render()すると、
“I think that
Backbone.Marionet...
Marionette.ItemView
Model(Collection)と結びつく1つのview
先程のViewをextendして主に以下を追加
● renderメソッド定義されてる
○ Model(Collection)を.toJSONでs...
ItemViewのソース
こんな感じ=>renderの定義とか自分で書かない
1)View
B)Viewの集合
ulタグ(=CollectionView)
Viewの集合?
BackboneのModelの集合=>Collection
同じように、Viewの集合を作ろうという話
例)
● liタグの1つ
○ さっきのItemView
● ulタグで囲う
○...
Marionette.CollectionView
ItemViewを束ねるView
● collectionの追加削除Eventもcheck
○ Eventひっかかった際の処理も定義済み
■ 追加削除:ItemViewを追加削除renderす...
CollectionViewのソース
こんな感じ
=>基本はitemViewを指定するだけ
Marionette.CompositeView
CollectionViewを継承して以下を追加
● templateを指定できる
○ ItemViewを囲うための親側のtemplateを作れる
○ appendHtmlメソッド上書きすると追...
ソース例
tableをcompositeで書いた例
http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
U...
違い
CollectionViewとCompositeViewの違い
=>ItemViewの包み方
● CollectionView
○ 単純にtagで囲うLV
○ 単純に1階層のItemViewのrenderするだけ
● CompositeV...
実際の所
● CopositeViewを使う方が多いかも
○ そんなに単純なViewにならないから
○ template有った方が柔軟
● それでも、使える所は出来るだけ
CollectionView使った方が良い
○ 「あたし、単純なんですー...
Viewの継承関係もう一度
Backbone.View
Marionette.View
Marionette.ItemView Marionette.CollectionView
Marionette.CompositeView
Viewの最小...
1)View
C)レイアウトを管理
Layoutの親子関係
Layout
Region
CollectionView CompositeViewItemView
※Regionの中に
子供のLayout入る事がある
LayoutとRegionの関係
使い方の例
● Layout > Region > View
Region
Viewの表示非表示等の管理
● 表示/非表示
○ Region.show(view)で表示(renderを実行)
○ Region.close()で非表示
● 再表示管理
○ 再表示時、前の子供のview全部closeさせる
ソースsample
show/close書く
● elごちゃごちゃ書かない
○ なぜ書かなくて済むか?
■ =>次のpageのLayout等で場所を指定する
Layout
Regionの集合
● regionsフィールドでregionを登録
○ regions: { Region名: html要素 }
○ 例)regions: { menu: “#side” }
■ id=sideなhtml要素をm...
Layoutソース
● id=menuの要素にmenuというRegion登録
● menuにMenuViewを表示する
実際のLayout
● 幾つか見るとLayoutそんなに使われてない?
○ =>後述のApplicationがRegion管理も出来る
● 使い分け
○ 基本
■ Application > Region > View
○ 画面がいっぱい
■ ...
2)Router
AppRouter
Backbone.routerをextend
● appRoutesにBackboneのroutes書く
○ 書式はBackboneのroutesと一緒
○ 実行する関数=Controllerの関数
○ router内の関数...
Controller
こんな感じ
3)全体の連携
3)全体の連携
● 1)Application
● 2)イベントの話
○ A)command
○ B)Request/response
○ C)Event
Marionette.Application
アプリのhub。初期化や調整等。
初期化処理=>アプリ開始
● addInitializer(function(){ … })
○ 初期化処理。例えば...
■ AppRouterのnew、hist...
Application
こんな感じ
Component同士の通信
以下、3種類あり
● Commands
○ 戻り値なし
● Request/Response
○ 戻り値あり
● Event
○ 元々Marionetteに埋め込まれているEventと連携
=>これがApplica...
Commands
● 一カ所の処理を実行するだけ
○ ※呼び出しはどこからでも書ける
● 戻り値は無い
Request/Response
● 別のcomponentから情報取得する時使う
○ 戻り値が有る
=>これで”RESPONSE HIT”が返って来る
Events
● Backbone.Eventsをextend
○ 何かが起こった事を伝える時便利
○ 複数の処理を実行したい時に便利
まとめ
良い所
● ①Viewの構成が整理=>分かり易くなる
● ②開発作業の効率化
● ③ソースが汚れない
コンポーネント
● View
○ ItemView/CollectionView/CompositeView
● Region/Lay...
おしまい
Upcoming SlideShare
Loading in...5
×

introduction to Marionette.js (jscafe14)

22,371

Published on

Marionette.jsの概要

Published in: Technology

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. おしまい
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×