introduction to Marionette.js (jscafe14)

26,637 views

Published on

Marionette.jsの概要

Published in: Technology
0 Comments
56 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
26,637
On SlideShare
0
From Embeds
0
Number of Embeds
14,869
Actions
Shares
0
Downloads
69
Comments
0
Likes
56
Embeds 0
No embeds

No notes for slide

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. おしまい

×