Submit Search
Upload
introduction to Marionette.js (jscafe14)
•
56 likes
•
28,416 views
Ryuma Tsukano
Follow
Marionette.jsの概要
Read less
Read more
Technology
Report
Share
Report
Share
1 of 52
Download now
Download to read offline
Recommended
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
WebGL and Three.js
WebGL and Three.js
yomotsu
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Recommended
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
WebGL and Three.js
WebGL and Three.js
yomotsu
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Masayuki Abe
Backbone.js入門
Backbone.js入門
AdvancedTechNight
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
Backbone.js
Backbone.js
daisuke shimizu
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
画像を縮小するお話
画像を縮小するお話
technocat
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Start React with Browserify
Start React with Browserify
Muyuu Fujita
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
Toshio Ehara
覚醒!JavaScript
覚醒!JavaScript
Haraguchi Go
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
Yuichiro Suzuki
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
Backbone/Marionette introduction
Backbone/Marionette introduction
matt-briggs
Marionette: the Backbone framework
Marionette: the Backbone framework
frontendne
More Related Content
What's hot
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Masayuki Abe
Backbone.js入門
Backbone.js入門
AdvancedTechNight
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
Backbone.js
Backbone.js
daisuke shimizu
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
画像を縮小するお話
画像を縮小するお話
technocat
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Start React with Browserify
Start React with Browserify
Muyuu Fujita
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
Toshio Ehara
覚醒!JavaScript
覚醒!JavaScript
Haraguchi Go
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
Yuichiro Suzuki
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
What's hot
(20)
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Backbone.js入門
Backbone.js入門
JavaScriptことはじめ
JavaScriptことはじめ
Backbone.js
Backbone.js
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
画像を縮小するお話
画像を縮小するお話
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Kawaz的jQuery入門
Kawaz的jQuery入門
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Start React with Browserify
Start React with Browserify
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
覚醒!JavaScript
覚醒!JavaScript
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
Creators'night#12今井
Creators'night#12今井
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
WordPressと外部APIとの連携
WordPressと外部APIとの連携
2時間で学ぶjQuery
2時間で学ぶjQuery
WordPressで提供するWeb API
WordPressで提供するWeb API
Viewers also liked
Backbone/Marionette introduction
Backbone/Marionette introduction
matt-briggs
Marionette: the Backbone framework
Marionette: the Backbone framework
frontendne
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
Marionette - TorontoJS
Marionette - TorontoJS
matt-briggs
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Artyom Trityak
Backgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
Neerav Mittal
JavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Jungryul Choi
Workshop 7: Single Page Applications
Workshop 7: Single Page Applications
Visual Engineering
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Mark
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
harshit040591
Introduction à Marionette
Introduction à Marionette
Raphaël Lemaire
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
Backbone.js
Backbone.js
Knoldus Inc.
Introduction to Backbone.js
Introduction to Backbone.js
Jonathan Weiss
Introduction to Backbone.js
Introduction to Backbone.js
Roman Kalyakin
MVC & backbone.js
MVC & backbone.js
Mohammed Arif
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Mikko Ohtamaa
Viewers also liked
(20)
Backbone/Marionette introduction
Backbone/Marionette introduction
Marionette: the Backbone framework
Marionette: the Backbone framework
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Marionette - TorontoJS
Marionette - TorontoJS
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Backgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
JavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Workshop 7: Single Page Applications
Workshop 7: Single Page Applications
AngularJS 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 World
Introduction à Marionette
Introduction à Marionette
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Backbone.js
Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
MVC & backbone.js
MVC & backbone.js
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Similar to introduction to Marionette.js (jscafe14)
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス
株式会社 オープンソース・ワークショップ
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
Sasaki Minoru
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
Mami Shiino
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
Mvpvm pattern
Mvpvm pattern
Mami Shiino
ゲームエンジンとMVC
ゲームエンジンとMVC
AimingStudy
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Yoshitaka Seo
Reactnative はじめの一歩
Reactnative はじめの一歩
PIXTA Inc.
Djangoのススメ
Djangoのススメ
Alisue Lambda
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
Tomoharu ASAMI
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
Sachiko Kajishima
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!
sawat1203
Similar to introduction to Marionette.js (jscafe14)
(20)
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Introduction for Browser Side MVC
Introduction for Browser Side MVC
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Mvpvm pattern
Mvpvm pattern
ゲームエンジンとMVC
ゲームエンジンとMVC
Head First XML Layout on Android
Head First XML Layout on Android
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Reactnative はじめの一歩
Reactnative はじめの一歩
Djangoのススメ
Djangoのススメ
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Recently uploaded
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
introduction to Marionette.js (jscafe14)
1.
Introduction to Backbone.Marionette ryuma tsukano jsCafe14
2.
Marionetteとは? Backbone.jsの上に被せたlibrary 1. moduleを役割に応じて綺麗に整理 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 or
highway?”なframework。 ○ ※ Developing Backbone.js Applications より ● 気に入らない所は使わなくてもいい ○ 厳密に全てを使わなくても大丈夫 ○ 一部、生Backbone/生jsを書いてもいい
7.
噂:学習コスト 噂「学習コストかかるからあかんやろ」 =>勿論、0では無いがそこまで大変でない ● Backboneの延長として+αしただけ ○ simpleでそんなに独自ではない。 ○
殆ど、Backboneにextendしてる
8.
学習コストの補足 結局、生のBackboneだけを使ってても ● ゆくゆく共通化するような事 ● (暗黙的/明示的に)現場でルール化する事 =>これらを準備してくれるのがMarionette Marionetteの学習= 現場で同等の独自の仕組み勉強するのと同じ
9.
事例等 ● 海外venture系で実験的に使い始めてる? ○ from
公式wiki事例集 ○ 有名な物は無いが... ● 今年(‘13)7月のBackbone confでも言及有り ○ (1つ目/2つ目)
10.
githubのstar数 ここのサイトでは Backboneplugin中 一番start多いのが =>Marionette ※ちなみに2位のchaplinも 同じ様なframework
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っぽく書いてる。
14.
今から 個別のcomponentの説明をしていきます。 ★おすすめ =>本体のソースを見ながら聞くと、 ある程度納得しながら進めれるかも。 ● 正直に書かれた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を拡張
18.
Viewの継承関係 =>先祖になるViewの話から Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
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実行
22.
ItemViewのソース こんな感じ=>renderの定義とか自分で書かない
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)
26.
CollectionViewのソース こんな感じ =>基本はitemViewを指定するだけ
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使った方が良い ○ 「あたし、単純なんですー!」って言われると、ソース読 み易いから
31.
Viewの継承関係もう一度 Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
32.
1)View C)レイアウトを管理
33.
Layoutの親子関係 Layout Region CollectionView CompositeViewItemView ※Regionの中に 子供のLayout入る事がある
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.
Layoutソース ● id=menuの要素にmenuというRegion登録 ● menuにMenuViewを表示する
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を元にアプリを開始
46.
Application こんな感じ
47.
Component同士の通信 以下、3種類あり ● Commands ○ 戻り値なし ●
Request/Response ○ 戻り値あり ● Event ○ 元々Marionetteに埋め込まれているEventと連携 =>これがApplicationの中に埋め込まれてる ● ※実体はBackbone.wreqrというplugin
48.
Commands ● 一カ所の処理を実行するだけ ○ ※呼び出しはどこからでも書ける ●
戻り値は無い
49.
Request/Response ● 別のcomponentから情報取得する時使う ○ 戻り値が有る =>これで”RESPONSE
HIT”が返って来る
50.
Events ● Backbone.Eventsをextend ○ 何かが起こった事を伝える時便利 ○
複数の処理を実行したい時に便利
51.
まとめ 良い所 ● ①Viewの構成が整理=>分かり易くなる ● ②開発作業の効率化 ●
③ソースが汚れない コンポーネント ● View ○ ItemView/CollectionView/CompositeView ● Region/Layout ● AppRouter/Controller ● Application ○ Command/Request,Response/Event
52.
おしまい
Download now