Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5分でわかるMarionette.jsのいいところ
Search
koba04
July 11, 2014
Programming
7
14k
5分でわかるMarionette.jsのいいところ
天下一クライアントサイドJS MV*フレームワーク武道会 (2014/07/11)のLTの資料です。
koba04
July 11, 2014
Tweet
Share
More Decks by koba04
See All by koba04
フロントエンドの現在地とこれから
koba04
10
5.2k
Standing on the shoulders of giants
koba04
0
2.9k
React/Next によるアプリケーション開発のこれから
koba04
61
17k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.9k
How useEvent would change our applications
koba04
1
3.1k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
15k
Make it Declarative with React
koba04
0
1.7k
Ready for React in 2019
koba04
2
1.7k
Algorithms in React
koba04
14
17k
Other Decks in Programming
See All in Programming
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
160
TypeScriptでDXを上げろ! Hono編
yusukebe
4
910
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
リッチエディターを安全に開発・運用するために
unachang113
1
330
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
140
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
870
iOS開発スターターキットの作り方
akidon0000
0
230
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
320
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
100
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Agile that works and the tools we love
rasmusluckow
329
21k
Site-Speed That Sticks
csswizardry
10
730
A Modern Web Designer's Workflow
chriscoyier
695
190k
Why Our Code Smells
bkeepers
PRO
337
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
It's Worth the Effort
3n
185
28k
Designing for humans not robots
tammielis
253
25k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
ͰΘ͔Δ.BSJPOFUUFKTͷ͍͍ͱ͜Ζ ఱԼҰΫϥΠΞϯταΠυ+4.7 ϑϨʔϜϫʔΫಓձ !LPCB
8IBUJT.BSJPOFUUFKT
8IBUJT.BSJPOFUUFKT w #BDLCPOFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ w େنΞϓϦέʔγϣϯʹ͑͏Δઃܭ w 7JFXपΓͷศརͳ֦ுͳͲ w ࠷ۙWʹͳͬͨ
8IZDIPPTF
8IZDIPPTF 4JOHMF1BHF"QQMJDBUJPOΛ࠷ॳ#BDLCPOFKT͚ͩͰ࣮ ωετͨ͠7JFXߏͷαϙʔτ͕ඞཁ ࣗྗͰ࣮ʜ It’s very similar
to Marionette.js!!
͍͍ͱ͜Ζ
7JFXΛ͍͍ײ͡ʹߏԽͯ͘͠ΕΔ
4VQQPSU/FTUFE7JFX w #BDLCPOFKT͚ͩͩͱࣗͰ7JFXͷআ WJFXSFNPWF Λ͢Δඞ ཁ͕͋Δ w .BSJPOFUUFKTͰ3FHJPOͱ3FHJPO.BOBHFS "QQMJDBUJPOͱ -BZPVU7JFX͕͍࣋ͬͯΔ
͕7JFXͷΓସ͑࣌ͷॾʑΛͬͯ͘ ΕΔ var app = new Marionette.Application();! app.addRegions({ main: "#main" });! ! # render()͢Δඞཁͳ͍!!! app.main.show(new MyView());! app.main.show(new MyOtherView()); ˠ;PNCJF7JFX͕࡞ΒΕʹ͍͘
7JFX.BOBHFNFOU Application LayoutView ItemView CollectionView ItemView (in CollectionView)
7JFX.BOBHFNFOU var TopView = Backbone.Marionette.LayoutView.extend({! template: template,! regions: {! artistSearch:
“.js-artist-search",! topTracks: “.js-top-tracks"! },! onRender: function() {! this.artistSearch.show(! ! ! new ArtistSearchView(model: new Artist())! );! ! this.listenTo(tracks, 'reset', this.showTracks);! },! showTracks: function() {! this.topTracks.show(! new TracksView(collection: tracks)! );! }! });! ! ɿ! ɿ! App.content.show(new TopView());! RegionΛఆٛ ೖྗΤϦΞΛදࣔ collection͕reset͞ΕͨΒ ۂҰཡͷCollectionViewΛ දࣔ ApplicationͷRegionʹදࣔ
ओઓ+BWB4DSJQU
-PHJDMFTTUFNQMBUF w ֤$PNQPOFOUຖʹ7JFXΛ࡞ΔͨΊɺςϯϓϨʔτͰͷذΛ࠷ খݶʹग़དྷΔ w զʑςϯϓϨʔτ͕ແ๏ଳʹͳΔͷΛԿݟ͖ͯͨͣʜ
ಡΈ͍͢
:PVEPO`UOFFEUPHPPHMF w ͱͯಡΈ͍͢ίʔυͱͱͯಡΈ͍͢υΩϡϝϯτ w ͕ͬͭΓ͓͏ͱ͢Δͱ݁ہ࣮ݟΔ͜ͱʹͳΔͷͰɺϑϨʔϜϫʔ ΫͷͰιʔε͕ಡΊͳ͍ͱπϥ͍ w (PPHMFͷτϨϯυʁͦΕͬͯʜ
ͦͷଞ
.PSF w #FIBWJPSTʹΑΔ7JFXͷৼΔ͍ͷڞ௨Խ w "QQMJDBUJPOͷ.PEVMFʹΑΔׂ w ༷ʑͳλΠϛϯάͰͷΠϕϯτൃߦͱUSJHHFS.FUIPE w VJUSJHHFSTͳͲͪΐͬͱͨ͠ศརػೳ
·ͱΊ
4VNNBSZ w #BDLCPOFKT͔ΒͷҠߦίετ͕͍ w େنͳ4JOHMF1BHF"QQMJDBUJPOΛ࡞Δͷʹͱͯద͍ͯ͠Δ w $PNQPOFOUࢦͰ7JFXΛׂग़དྷΔ w ϩδοΫΛ+BWB4DSJQUଆʹدͤΔ͜ͱ͕ग़དྷΔ
.BLFZPVS#BDLCPOFBQQMJDBUJPOTEBODF speakerdeck.com/koba04