Download as PDF, PPTX
![今から
個別のcomponentの説明をしていきます。
★おすすめ
=>本体のソースを見ながら聞くと、
ある程度納得しながら進めれるかも。
● 正直に書かれたBackboneのソースなので、割と平易
に読めるかと。
=>本体は[ こちら ]から](https://image.slidesharecdn.com/marionette-130914081302-phpapp01/85/introduction-to-Marionette-js-jscafe14-14-320.jpg)
![Backbone/Marionette recap [2015]](https://cdn.slidesharecdn.com/ss_thumbnails/backbonemarionette2015-150109101453-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
introduction to Marionette.js (jscafe14)
- 1.
- 2.
- 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 orhighway?”なframework。 ○ ※ Developing Backbone.js Applications より ● 気に入らない所は使わなくてもいい ○ 厳密に全てを使わなくても大丈夫 ○ 一部、生Backbone/生jsを書いてもいい
- 7.
- 8.
- 9. 事例等 ● 海外venture系で実験的に使い始めてる? ○ from公式wiki事例集 ○ 有名な物は無いが... ● 今年(‘13)7月のBackbone confでも言及有り ○ (1つ目/2つ目)
- 10.
- 11. 情報源 ● 入門 ○ github:DevelopingBackbone.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っぽく書いてる。
- 14.
- 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.
- 18.
- 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()すると、 “Ithink 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実行
- 22.
- 23.
- 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)
- 26.
- 27. Marionette.CompositeView CollectionViewを継承して以下を追加 ● templateを指定できる ○ ItemViewを囲うための親側のtemplateを作れる ○appendHtmlメソッド上書きすると追加する場所や内容を 自分で書ける ● render ○ 再帰的にrender出来る ○ explorerのようなTree状のview作れる=>例
- 28.
- 29. 違い CollectionViewとCompositeViewの違い =>ItemViewの包み方 ● CollectionView ○ 単純にtagで囲うLV ○単純に1階層のItemViewのrenderするだけ ● CompositeView ○ 親側にtemplate指定できる ■ その中に子供のtemplate埋め込める ○ 再起的に子孫のviewのrenderを実行できる
- 30. 実際の所 ● CopositeViewを使う方が多いかも ○ そんなに単純なViewにならないから ○template有った方が柔軟 ● それでも、使える所は出来るだけ CollectionView使った方が良い ○ 「あたし、単純なんですー！」って言われると、ソース読 み易いから
- 31.
- 32.
- 33.
- 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())
- 38.
- 39. 実際のLayout ● 幾つか見るとLayoutそんなに使われてない? ○ =>後述のApplicationがRegion管理も出来る ●使い分け ○ 基本 ■ Application > Region > View ○ 画面がいっぱい ■ 個別にLayout > Region > View
- 40.
- 41. AppRouter Backbone.routerをextend ● appRoutesにBackboneのroutes書く ○ 書式はBackboneのroutesと一緒 ○実行する関数=Controllerの関数 ○ router内の関数ではない ● controller属性にcontrollerを指定 ○ controllerは、ただのobject
- 42.
- 43.
- 44. 3)全体の連携 ● 1)Application ● 2)イベントの話 ○A)command ○ B)Request/response ○ C)Event
- 45. Marionette.Application アプリのhub。初期化や調整等。 初期化処理=>アプリ開始 ● addInitializer(function(){ …}) ○ 初期化処理。例えば... ■ AppRouterのnew、history.startとか実行 ■ 初期画面作成処理 ● start ○ configを元にアプリを開始
- 46.
- 47. Component同士の通信 以下、３種類あり ● Commands ○ 戻り値なし ●Request/Response ○ 戻り値あり ● Event ○ 元々Marionetteに埋め込まれているEventと連携 =>これがApplicationの中に埋め込まれてる ● ※実体はBackbone.wreqrというplugin
- 48.
- 49.
- 50. Events ● Backbone.Eventsをextend ○ 何かが起こった事を伝える時便利 ○複数の処理を実行したい時に便利
- 51. まとめ 良い所 ● ①Viewの構成が整理=>分かり易くなる ● ②開発作業の効率化 ●③ソースが汚れない コンポーネント ● View ○ ItemView/CollectionView/CompositeView ● Region/Layout ● AppRouter/Controller ● Application ○ Command/Request,Response/Event
- 52.