SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
Introduction to
Backbone.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.CompositeView
Viewの最小単位
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 that
Backbone.Marionette
is 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.CompositeView
Viewの最小単位
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同士の通信
以下、3種類あり
● 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
おしまい

Mais conteúdo relacionado

Mais procurados

Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1daisuke shimizu
 
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西Masayuki Abe
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめYuki Ishikawa
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門Atsushi Tadokoro
 
画像を縮小するお話
画像を縮小するお話画像を縮小するお話
画像を縮小するお話technocat
 
backbone.jsの使用例 その1
backbone.jsの使用例 その1backbone.jsの使用例 その1
backbone.jsの使用例 その1Makoto Haruyama
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門Kohki Miki
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめKohei Kadowaki
 
Start React with Browserify
Start React with BrowserifyStart React with Browserify
Start React with BrowserifyMuyuu Fujita
 
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像Toshio Ehara
 
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料leverages_event
 
Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井Daisuke Imai
 
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているかよこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているかYuichiro Suzuki
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描くAtsushi Tadokoro
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携Hidekazu Ishikawa
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb APIYuko Toriyama
 

Mais procurados (20)

Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
 
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
 
Backbone.js入門
Backbone.js入門Backbone.js入門
Backbone.js入門
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめ
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
画像を縮小するお話
画像を縮小するお話画像を縮小するお話
画像を縮小するお話
 
backbone.jsの使用例 その1
backbone.jsの使用例 その1backbone.jsの使用例 その1
backbone.jsの使用例 その1
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
 
Start React with Browserify
Start React with BrowserifyStart React with Browserify
Start React with Browserify
 
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
 
Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井
 
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているかよこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
 
2時間で学ぶjQuery
2時間で学ぶjQuery2時間で学ぶjQuery
2時間で学ぶjQuery
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb API
 

Destaque

Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introductionmatt-briggs
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone frameworkfrontendne
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!Yuji Nojima
 
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月Takuya Ueda
 
Marionette - TorontoJS
Marionette - TorontoJSMarionette - TorontoJS
Marionette - TorontoJSmatt-briggs
 
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Ryuma Tsukano
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Ryuma Tsukano
 
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Artyom Trityak
 
Backgrid - A Backbone Plugin
Backgrid - A Backbone PluginBackgrid - A Backbone Plugin
Backgrid - A Backbone PluginNeerav Mittal
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJungryul Choi
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsVisual Engineering
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsMark
 
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The WorldBackbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The Worldharshit040591
 
Introduction à Marionette
Introduction à MarionetteIntroduction à Marionette
Introduction à MarionetteRaphaël Lemaire
 
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General AssemblyIntro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General AssemblyAzat Mardanov
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.jsJonathan Weiss
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.jsRoman Kalyakin
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...Mikko Ohtamaa
 

Destaque (20)

Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introduction
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone framework
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
 
Marionette - TorontoJS
Marionette - TorontoJSMarionette - TorontoJS
Marionette - TorontoJS
 
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
 
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
 
Backgrid - A Backbone Plugin
Backgrid - A Backbone PluginBackgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
 
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The WorldBackbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
 
Introduction à Marionette
Introduction à MarionetteIntroduction à Marionette
Introduction à Marionette
 
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General AssemblyIntro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
MVC & backbone.js
MVC & backbone.jsMVC & backbone.js
MVC & backbone.js
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 

Semelhante a introduction to Marionette.js (jscafe14)

Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)Ryuma Tsukano
 
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソAsp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソYoshitaka Seo
 
Introduction for Browser Side MVC
Introduction for Browser Side MVCIntroduction for Browser Side MVC
Introduction for Browser Side MVCRyunosuke SATO
 
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング   3 dcg制作の流れ _ 基礎知識 _ blender入門(21. モデリング   3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2Sasaki Minoru
 
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm patternRIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm patternMami Shiino
 
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話Shohei Okada
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~Yoshitaka Seo
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリAkira Hatsune
 
ゲームエンジンとMVC
ゲームエンジンとMVCゲームエンジンとMVC
ゲームエンジンとMVCAimingStudy
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on AndroidYuki Anzai
 
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2Yoshitaka Seo
 
Reactnative はじめの一歩
Reactnative はじめの一歩Reactnative はじめの一歩
Reactnative はじめの一歩PIXTA Inc.
 
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】Tomoharu ASAMI
 
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツオブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ増田 亨
 
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackTry_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackkimukou_26 Kimukou
 
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回I phoneアプリ入門 第3回
I phoneアプリ入門 第3回Sachiko Kajishima
 
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!sawat1203
 

Semelhante a introduction to Marionette.js (jscafe14) (20)

Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
 
教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス
 
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソAsp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
 
Introduction for Browser Side MVC
Introduction for Browser Side MVCIntroduction for Browser Side MVC
Introduction for Browser Side MVC
 
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング   3 dcg制作の流れ _ 基礎知識 _ blender入門(21. モデリング   3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
 
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm patternRIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
 
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
 
Mvpvm pattern
Mvpvm patternMvpvm pattern
Mvpvm pattern
 
ゲームエンジンとMVC
ゲームエンジンとMVCゲームエンジンとMVC
ゲームエンジンとMVC
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on Android
 
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
 
Reactnative はじめの一歩
Reactnative はじめの一歩Reactnative はじめの一歩
Reactnative はじめの一歩
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
 
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
 
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツオブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
 
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackTry_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
 
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
 
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!
 

Último

2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...yoshidakids7
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也harmonylab
 

Último (13)

2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究   千坂知也
 

introduction to Marionette.js (jscafe14)