introduction to marionette.js (jscafe14)
DESCRIPTION
Marionette.jsの概要TRANSCRIPT
Introduction toBackbone.Marionette
ryuma tsukano
jsCafe14
Marionetteとは？
Backbone.jsの上に被せたlibrary
1. moduleを役割に応じて綺麗に整理
2. 決まった処理の記述を事前に埋込み
なぜMarionette?
Backboneを実際書いてみると色々悩む
● ①自由度が高過ぎ○ Viewの親子や配置等、人によってバラバラで大変
● ②用意されたmoduleだけでは足りない○ 特にViewやRouterが汚れる
● ③同じsourceばかり膨大な量を書くハメに...
=>これらを解決するためにMarionette
Marionetteの良い所
● ①Viewの構成が整理されて分かり易くなる○ Layout管理(Viewの配置)の仕組みがある○ どのView使うかでViewの親子階層が明確に
● ②開発作業の効率化○ とにかく書く量が半分以下に激減！○ 量が少ないので、読むのも楽になる！
● ③ソースが汚れない○ routerとController分けてる！○ イベント連携の仕組みが整理されてる！
噂：抽象度
噂「抽象度が高すぎなんじゃない？」
=> そんなに言う程ではない。simpleだし。
● 見えないcode = 今迄何度も書いてた所○ 何度も同じ事書きたくないじゃん○ 不明点はMarionetteのsource読めば良い
■ sourceは量が少なく、Backboneっぽいので、 すぐ辿れる
抽象度：補足
補足すると、Marionetteは“my way or highway?”なframework。
○ ※ Developing Backbone.js Applications より
● 気に入らない所は使わなくてもいい○ 厳密に全てを使わなくても大丈夫○ 一部、生Backbone/生jsを書いてもいい
噂：学習コスト
噂「学習コストかかるからあかんやろ」
=>勿論、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を図示した良記事
● リファレンス○ github: 公式document / 公式wiki
● tutorial○ blog : 1,2 / video : 1 / 書籍 : 1
● example○ todoMVC / 本棚アプリ?のソース / mailer?
● Marionette自体のboilerplate系○ github : boilerplate / yeomanのgenerator
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も沢山あってかなり助かる！
ソースはこんな感じ
● 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.CompositeViewViewの最小単位
ItemViewの集合
ItemViewの集合(template付き)
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を直接使う事はほぼ無い
Viewのtemplatehelper
templateHelper : templateから呼べるfunction例）公式docより
これを
view.render()すると、
“I think thatBackbone.Marionetteis the coolest”と表示される
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実行
ItemViewのソース
こんな感じ=>renderの定義とか自分で書かない
1)View
B)Viewの集合
ulタグ(=CollectionView)
Viewの集合？
BackboneのModelの集合=>Collection同じように、Viewの集合を作ろうという話
例）
● liタグの1つ○ さっきのItemView
● ulタグで囲う○ CollectionView <=これ。
liタグ(=ItemView)
liタグ(=ItemView)
liタグ(=ItemView)
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)
CollectionViewのソース
こんな感じ
=>基本はitemViewを指定するだけ
Marionette.CompositeView
CollectionViewを継承して以下を追加
● templateを指定できる○ ItemViewを囲うための親側のtemplateを作れる○ appendHtmlメソッド上書きすると追加する場所や内容を
自分で書ける
● render○ 再帰的にrender出来る○ explorerのようなTree状のview作れる=>例
ソース例
tableをcompositeで書いた例http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
Username FullName
taro yamada taro
hanako tanaka hanako
違い
CollectionViewとCompositeViewの違い
=>ItemViewの包み方
● CollectionView○ 単純にtagで囲うLV○ 単純に1階層のItemViewのrenderするだけ
● CompositeView○ 親側にtemplate指定できる
■ その中に子供のtemplate埋め込める○ 再起的に子孫のviewのrenderを実行できる
実際の所
● CopositeViewを使う方が多いかも○ そんなに単純なViewにならないから○ template有った方が柔軟
● それでも、使える所は出来るだけCollectionView使った方が良い○ 「あたし、単純なんですー！」って言われると、ソース読
み易いから
Viewの継承関係もう一度
Backbone.View
Marionette.View
Marionette.ItemView Marionette.CollectionView
Marionette.CompositeViewViewの最小単位
ItemViewの集合
ItemViewの集合(template付き)
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要素をmenuというRegionで登録■ ここでshowするとid=sideにviewのelを描写
○ 後でaddRegionで追加も出来る
● 実はItemViewをextendしてる○ ItemViewのようにtemplate指定可能○ ItemViewのようにLayout自体をshowできる○ 例）MyApp.mainRegion.show(new ChildLayout())
Layoutソース
● id=menuの要素にmenuというRegion登録● menuにMenuViewを表示する
実際のLayout
● 幾つか見るとLayoutそんなに使われてない?○ =>後述のApplicationがRegion管理も出来る
● 使い分け○ 基本
■ Application > Region > View○ 画面がいっぱい
■ 個別にLayout > Region > View
2)Router
AppRouter
Backbone.routerをextend● appRoutesにBackboneのroutes書く
○ 書式はBackboneのroutesと一緒○ 実行する関数=Controllerの関数○ router内の関数ではない
● controller属性にcontrollerを指定○ controllerは、ただのobject
Controller
こんな感じ
3)全体の連携
3)全体の連携
● 1)Application● 2)イベントの話
○ A)command○ B)Request/response○ C)Event
Marionette.Application
アプリのhub。初期化や調整等。
初期化処理=>アプリ開始
● addInitializer(function(){ … })○ 初期化処理。例えば...
■ AppRouterのnew、history.startとか実行■ 初期画面作成処理
● start○ configを元にアプリを開始
Application
こんな感じ
Component同士の通信
以下、３種類あり
● Commands○ 戻り値なし
● Request/Response○ 戻り値あり
● Event○ 元々Marionetteに埋め込まれているEventと連携
=>これがApplicationの中に埋め込まれてる● ※実体はBackbone.wreqrというplugin
Commands
● 一カ所の処理を実行するだけ○ ※呼び出しはどこからでも書ける
● 戻り値は無い
Request/Response
● 別のcomponentから情報取得する時使う○ 戻り値が有る
=>これで”RESPONSE HIT”が返って来る
Events
● Backbone.Eventsをextend○ 何かが起こった事を伝える時便利○ 複数の処理を実行したい時に便利
まとめ
良い所
● ①Viewの構成が整理=>分かり易くなる● ②開発作業の効率化● ③ソースが汚れない
コンポーネント
● View○ ItemView/CollectionView/CompositeView
● Region/Layout● AppRouter/Controller● Application
○ Command/Request,Response/Event
おしまい