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
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
840
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
560
CDK引数設計道場100本ノック
badmintoncryer
1
240
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
150
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
550
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
PicoRuby on Rails
makicamel
2
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
86
4.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Adaptive Systems
keathley
43
2.7k
Site-Speed That Sticks
csswizardry
10
690
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
54
6.5k
It's Worth the Effort
3n
185
28k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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