![今から
個別のcomponentの説明をしていきます。
★おすすめ
=>本体のソースを見ながら聞くと、
ある程度納得しながら進めれるかも。
● 正直に書かれたBackboneのソースなので、割と平易
に読めるかと。
=>本体は[ こちら ]から](https://image.slidesharecdn.com/marionette-130914081302-phpapp01/85/introduction-to-Marionette-js-jscafe14-14-320.jpg)
introduction to Marionette.js (jscafe14)
- 3. なぜMarionette? Backboneを実際書いてみると色々悩む ● ①自由度が高過ぎ ○ Viewの親子や配置等、人によってバラバラで大変 ● ②用意されたmoduleだけでは足りない ○ 特にViewやRouterが汚れる ● ③同じsourceばかり膨大な量を書くハメに... =>これらを解決するためにMarionette
- 4. Marionetteの良い所 ● ①Viewの構成が整理されて分かり易くなる ○ Layout管理(Viewの配置)の仕組みがある ○ どのView使うかでViewの親子階層が明確に ● ②開発作業の効率化 ○ とにかく書く量が半分以下に激減！ ○ 量が少ないので、読むのも楽になる！ ● ③ソースが汚れない ○ routerとController分けてる！ ○ イベント連携の仕組みが整理されてる！
- 5. 噂：抽象度 噂「抽象度が高すぎなんじゃない？」 => そんなに言う程ではない。simpleだし。 ● 見えないcode = 今迄何度も書いてた所 ○ 何度も同じ事書きたくないじゃん ○ 不明点はMarionetteのsource読めば良い ■ sourceは量が少なく、Backboneっぽいので、 すぐ 辿れる
- 6. 抽象度：補足 補足すると、Marionetteは “my way or highway?”なframework。 ○ ※ Developing Backbone.js Applications より ● 気に入らない所は使わなくてもいい ○ 厳密に全てを使わなくても大丈夫 ○ 一部、生Backbone/生jsを書いてもいい
- 7. 噂：学習コスト 噂「学習コストかかるからあかんやろ」 =>勿論、0では無いがそこまで大変でない ● Backboneの延長として＋αしただけ ○ simpleでそんなに独自ではない。 ○ 殆ど、Backboneにextendしてる
- 9. 事例等 ● 海外venture系で実験的に使い始めてる? ○ from 公式wiki事例集 ○ 有名な物は無いが... ● 今年(‘13)7月のBackbone confでも言及有り ○ (1つ目/2つ目)
- 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. 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. ソースはこんな感じ ● render書かない ○ modelとのmappingも書かない ○ template呼び出し/cacheも書かない =>量少ないのでパッと見も明快。 =>あくまでBackboneっぽく書いてる。
- 15. Marionetteの全体像 MarionetteがBackboneに追加した事は3つ ● 1)View ● 2)Router ● 3)全体連携 ※量的にも内容的にも1のViewがmain。 後はおまけ
- 16. 1)viewのまとめ ● A)Viewを拡張 ○ View ○ ItemView ● B)Viewの集合 ○ CollectionItem ○ CompositeItem ● C)レイアウトを管理 ○ Region ○ Layout
- 17. 1)View A)Viewを拡張
- 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. Viewのtemplatehelper templateHelper : templateから呼べるfunction 例）公式docより これを view.render()すると、 “I think that Backbone.Marionette is the coolest” と表示される
- 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実行
- 23. 1)View B)Viewの集合
- 24. ulタグ(=CollectionView) Viewの集合？ BackboneのModelの集合=>Collection 同じように、Viewの集合を作ろうという話 例） ● liタグの1つ ○ さっきのItemView ● ulタグで囲う ○ CollectionView <=これ。 liタグ(=ItemView) liタグ(=ItemView) liタグ(=ItemView)
- 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)
- 27. Marionette.CompositeView CollectionViewを継承して以下を追加 ● templateを指定できる ○ ItemViewを囲うための親側のtemplateを作れる ○ appendHtmlメソッド上書きすると追加する場所や内容を 自分で書ける ● render ○ 再帰的にrender出来る ○ explorerのようなTree状のview作れる=>例
- 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. 違い CollectionViewとCompositeViewの違い =>ItemViewの包み方 ● CollectionView ○ 単純にtagで囲うLV ○ 単純に1階層のItemViewのrenderするだけ ● CompositeView ○ 親側にtemplate指定できる ■ その中に子供のtemplate埋め込める ○ 再起的に子孫のviewのrenderを実行できる
- 30. 実際の所 ● CopositeViewを使う方が多いかも ○ そんなに単純なViewにならないから ○ template有った方が柔軟 ● それでも、使える所は出来るだけ CollectionView使った方が良い ○ 「あたし、単純なんですー！」って言われると、ソース読 み易いから
- 34. LayoutとRegionの関係 使い方の例 ● Layout > Region > View
- 35. Region Viewの表示非表示等の管理 ● 表示/非表示 ○ Region.show(view)で表示(renderを実行) ○ Region.close()で非表示 ● 再表示管理 ○ 再表示時、前の子供のview全部closeさせる
- 36. ソースsample show/close書く ● elごちゃごちゃ書かない ○ なぜ書かなくて済むか？ ■ =>次のpageのLayout等で場所を指定する
- 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())
- 39. 実際のLayout ● 幾つか見るとLayoutそんなに使われてない? ○ =>後述のApplicationがRegion管理も出来る ● 使い分け ○ 基本 ■ Application > Region > View ○ 画面がいっぱい ■ 個別にLayout > Region > View
- 40. 2)Router
- 41. AppRouter Backbone.routerをextend ● appRoutesにBackboneのroutes書く ○ 書式はBackboneのroutesと一緒 ○ 実行する関数=Controllerの関数 ○ router内の関数ではない ● controller属性にcontrollerを指定 ○ controllerは、ただのobject
- 42. Controller こんな感じ
- 43. 3)全体の連携
- 44. 3)全体の連携 ● 1)Application ● 2)イベントの話 ○ A)command ○ B)Request/response ○ C)Event
- 45. Marionette.Application アプリのhub。初期化や調整等。 初期化処理=>アプリ開始 ● addInitializer(function(){ … }) ○ 初期化処理。例えば... ■ AppRouterのnew、history.startとか実行 ■ 初期画面作成処理 ● start ○ configを元にアプリを開始
- 47. Component同士の通信 以下、３種類あり ● Commands ○ 戻り値なし ● Request/Response ○ 戻り値あり ● Event ○ 元々Marionetteに埋め込まれているEventと連携 =>これがApplicationの中に埋め込まれてる ● ※実体はBackbone.wreqrというplugin
- 48. Commands ● 一カ所の処理を実行するだけ ○ ※呼び出しはどこからでも書ける ● 戻り値は無い
- 50. Events ● Backbone.Eventsをextend ○ 何かが起こった事を伝える時便利 ○ 複数の処理を実行したい時に便利
- 51. まとめ 良い所 ● ①Viewの構成が整理=>分かり易くなる ● ②開発作業の効率化 ● ③ソースが汚れない コンポーネント ● View ○ ItemView/CollectionView/CompositeView ● Region/Layout ● AppRouter/Controller ● Application ○ Command/Request,Response/Event
- 52. おしまい