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
Standing on the shoulders of giants
koba04
0
2.5k
React/Next によるアプリケーション開発のこれから
koba04
61
17k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.7k
How useEvent would change our applications
koba04
1
2.8k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
14k
Make it Declarative with React
koba04
0
1.4k
Ready for React in 2019
koba04
2
1.6k
Algorithms in React
koba04
13
12k
Suspense and TimeSlicing
koba04
0
240
Other Decks in Programming
See All in Programming
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
CSC307 Lecture 10
javiergs
PRO
0
310
CSC307 Lecture 13
javiergs
PRO
0
150
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
CSC307 Lecture 05
javiergs
PRO
0
210
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Why Our Code Smells
bkeepers
PRO
332
56k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Happy Clients
brianwarren
94
6.6k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Designing for Performance
lara
604
67k
Building Your Own Lightsaber
phodgson
101
5.9k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
The Mythical Team-Month
searls
217
43k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
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