Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Next Generation Web Application Architecture
Koji SHIMADA
February 23, 2012
Technology
1
560
Next Generation Web Application Architecture
Ruby Sapporo Night vol.14
Koji SHIMADA
February 23, 2012
Tweet
Share
More Decks by Koji SHIMADA
See All by Koji SHIMADA
snoozer05
7
2.4k
snoozer05
14
3k
snoozer05
3
640
snoozer05
4
600
snoozer05
4
1.4k
snoozer05
2
690
snoozer05
21
5.1k
snoozer05
0
270
snoozer05
4
1.3k
Other Decks in Technology
See All in Technology
_kensh
1
190
satoryu
0
2.4k
kraj
0
5.4k
torisoup
0
310
clustervr
0
170
neo_analytics
1
1.1k
papix
0
220
yasuakiomokawa
0
380
kanaugust
PRO
0
180
yamasaki696
0
350
noir_neo
0
130
oracle4engineer
0
2.7k
Featured
See All Featured
brettharned
93
3k
trallard
13
650
danielanewman
1
480
kneath
294
39k
malarkey
393
60k
jponch
103
5k
garrettdimon
287
110k
caitiem20
308
17k
afnizarnur
176
14k
iamctodd
17
1.9k
dougneiner
55
5.4k
keithpitt
401
20k
Transcript
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
l Δ͔ͳ൴ํͷੲɺ͋ΔॴͰɺԿͳ͘ແەঢ়ଶͷۭؒ Λඬ͍ͬͯͨɺͰͨΒΊʹू·ͬͨݪࢠͷখ͞ͳू߹ʹɺͦ Εਂࠁͳ֎ইΛ༩͑ͨɻͦͯ͠ɺҟৗͳɺͱͯ͋Γͦ͏ ͳ͍ύλʔϯͰݪࢠͨͪΛΕͳ͍Α͏ʹ݁ͼ͚ͭͯ͠ ·ͬͨɻ͜ͷΑ͏ͳύλʔϯࣗࣗΛίϐʔ͢Δͱ͍͏ ͜ͱΛૣ͍͏ͪʹ֮͑ͯ͠·͍ ͜Εύλʔϯ͕ඇຌͳͷ Ͱ͋Δ͜ͱͷҰ໘Λ͍ࣔͯ͠Δ ɺύλʔϯ͕ඬ͏ͯ͢ͷ
Ͱɺմঢ়ͷࡂ͕Ҿ͖ى͜͞Εଓ͚ͨɻ͜ͷΑ͏ʹͯ͠ Ӊʹੜ໋͕ੜͨ͠ͷͰ͋Δɻ ʰۜՏώονϋΠΫɾΨΠυʱ 20122݄23༵
͠·ͩ͜͏͡ ౡాߒೋ Photo by tmaeda 20122݄23༵
ຊ3VCZͷձ 20122݄23༵
Ұൠࣾஂ๏ਓ-0$"- 20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
ΑΖ͘͠ ͓ئ͍͠·͢ 20122݄23༵
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
͓ॻ͖ ✓ ΫϥΠΞϯτ.7$ͬͯԿͩΖ͏ ✓ ͏͍ͪͲ.7$ ✓ .7$ܥͷύλʔϯͷܥේʹ͍ͭͯ ✓ ͏͍ͪͲΫϥΠΞϯτ.7$ 20122݄23༵
20122݄23༵
Backbone.js gives structure to web applications by providing models with
key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. 20122݄23༵
Demo https://github.com/snoozer05/backbone-tiny-example 20122݄23༵
ΫϥΠΞϯτ.7$ 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l .7$͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹؔΘΒͣɺͦΕΒશ͕ͯ b.7$`ͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ݱࡏͷ8FCΞϓϦέʔγϣϯ ։ൃͰΑࣖ͘ʹ͢Δ.7$ http://www.flickr.com/photos/indigoskies/6523275513/ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ 20122݄23༵
.7$ͷΦϦδφϧ Ͱͳ͍ 20122݄23༵
͏͍ͪͲ.7$ 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ╙30࿁Smalltalkീᒝળ 䉅䈉䈇䈤䈬MVC 2011ᐕ330ᣣ 㒙ㇱᐢ 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai MVC • Model-View-Controller • XEROX PARC LRG䈱Trygve Mikkjel Heyerdahl
Reenskaug䈮䉋䈦䈩1978-1979䈮ឭ᩺ – MODELS - VIEWS – CONTROLLERS • http://d.hatena.ne.jp/digitalsoul/20100913/1284330448 – DynaBookⷐ᳞᭽䈱৻ㇱ • 䊝䊂䊦䈲⍮⼂䈱⽎ • 䊎䊠䊷䈲䊝䊂䊦䈱䋨ⷞⷡ⊛䈭䋩⽎ • 䉮䊮䊃䊨䊷䊤䈲䊡䊷䉱䈫䉲䉴䊁䊛䈫䉕⚌䈨䈔䉎䉅䈱 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • 㕍ᧁᷕ䈘䉖 • 1987ᐕ㗃 • ን჻䉷䊨䉾䉪䉴ᖱႎ䉲䉴䊁䊛(FXIS)䈱␠ౝᢥ ᦠ
• ዋ䈭䈒䈫䉅3䊋䊷䉳䊢䊮䈅䉎 • ⑳䈲␠䈚䈢1988ᐕ䈮OJT䉕ฃ䈔䈢 20122݄23༵
http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • MVC䈫䈲 – Smalltalk䉲䉴䊁䊛ో䉕⽾䈇䈩䈇䉎⸳⸘ᜰ㊎ – ήℂ䈮ᓥ䈉ᔅⷐ䈲䈭䈇䈏䇮䈖䉏䉕↪䈚䈭䈇䈫៊䉕䈜䉎 •
䊝䊂䊦䈲䇮↹㕙䈮␜䈚䈢䈇䉥䊑䉳䉢䉪䊃䈠䈱䉅䈱 • 䊎䊠䊷䈲䇮䊝䊂䊦䉕䇸䈇䈧䇮䈬䈖䈮䇮䈬䈱䈱ᄢ䈐䈘 䈪䇮䈬䈱䉋䈉䈮␜䈘䉏䉎䈱䈎䇹䉕⍮䈦䈩䈇䉎 • 䉮䊮䊃䊨䊷䊤䈲䇮䊝䊂䊦䉇䊎䊠䊷䉕ᠲ䈜䉎䈢䉄䈱 䊡䊷䉱䈎䉌䈱ⷐ᳞䉕ฃ䈔ઃ䈔䇮ో䉕ᓮ䈜䉎 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai MVC䈱ಽ㘃 • 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • ଐሽᕈ䉕↪䈜䉎MVC • 䊒䊤䉧䊑䊦䉕↪䈜䉎MVC 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • 䊝䊂䊦䈏න⚐䈠䈱䉅䈱䈪䇮䊎䊠䊷䈲␜䈜䉎䈣䈔䇮 䈭䉖䈪䉅䈎䉖䈪䉅䉮䊮䊃䊨䊷䊤䈏䈵䈫䉍䈪㗎ᒛ䉎 • 䊝䊂䊦䈲䇮䊂䊷䉺▤ℂ䈣䈔䉕ኾ㐷䈮ⴕ䈉䉥䊑䉳䉢䉪䊃 䈪䈅䉎䈲䈝䈭䈱䈮䇮䉮䊮䊃䊨䊷䊤䈮ᡰ㈩䈘䉏䉎䊂䊷䉺 䈮ᚑ䉍ਅ䈏䈦䈩䈇䉎 •
䊝䊂䊦䈱ᖱႎ㓝⭁䈏⎕䉌䉏䉎 • 䊝䊂䊦䈫䊎䊠䊷䈏ኒធ䈮㑐ଥ䈚䈩䈇䉎 • ᄌᦝ䉇ᒛ䈮ᒙ䈇 • 䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌䉂䉌䉏䈭䈇 20122݄23༵
ଐሽᕈ䉕↪䈜䉎MVC • 䈵䈫䈧䈱䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌ⷰ䉎䈖䈫䈮ኻᔕ • ଐሽᕈ䈱ዉ – 䊝䊂䊦䈏ᄌൻ䈜䉎䈫䇮䊝䊂䊦䈲⥄ಽ䈮䇸changed:䇹䈱䊜䉾 䉶䊷䉳䉕ㅍ䉎 – 䈜䉎䈫䊝䊂䊦䉕ⷰ䈩䈇䉎䈜䈼䈩䈱䊎䊠䊷䈮䇸update:䇹䈫䈇
䈉䊜䉾䉶䊷䉳䈏ㅍା䈘䉏䉎 – 䊑䊨䊷䊄䉨䊞䉴䊁䉞䊮䉫ᯏ᭴ – ଐሽᕈㄉᦠ䈱䉨䊷䈮䊝䊂䊦䇮୯䈮䊎䊠䊷䈱㓸ว • 䊝䊂䊦䈱ᖱႎ㓝⭁䈏⏕┙ • 䉮䊮䊃䊨䊷䊤䈲䉁䈣䊜䊆䊠䊷䉕ᜬ䈦䈩䈇䉎 http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䊒䊤䉧䊑䊦䉕↪䈜䉎MVC • 䊎䊠䊷䈫䉮䊮䊃䊨䊷䊤䈱䊕䉝(VC)䈲䇮䊝䊂䊦䈎 䉌⁛┙ • M䉕VC䈮Ꮕ䈚ㄟ䉖䈪䈉 – 䊎䊠䊷䈱Ꮕ䈚ㄟ䉂(䊒䊤䉫䉟䊮䊜䉾䉶䊷䉳)䈲䊝䊂䊦 䈫䉶䊧䉪䉺(䊜䉸䉾䊄ฬ)䉕ᒁᢙ䈮ᜬ䈧
• on:aspect:menu: • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱ᖱႎ䉕ෳᾖ䈜䉎䉶䊧䉪䉺䈣䈔 䉕⍮䈦䈩䈇䉎 • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱䊜䊆䊠䊷䉕ෳᾖ䈜䉎䉶䊧䉪䉺 䈣䈔䉕⍮䈦䈩䈇䉎 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l ʹݴͬͯɺݹయతͳ.7$ ࠓͷϦονΫϥΠΞϯτʹରͯ͠ ͋·Γ༻Λͳ͠·ͤΜɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ରܕγεςϜͷ.7$ܥ ΞʔΩςΫνϟͷܥේ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
1SFTFOUBUJPO.PEFM ✓ υϝΠϯϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛϞσϧͷͰ ✓ 7JFX.PEFMͷखલʹஔ͔Ε ͨ1SFTFOUBUJPO.PEFMΛ ࢹ͢Δ 20122݄23༵
1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ࢹ 20122݄23༵
ݹయతͳ.7$͕ ͍࣋ͬͯͨΛ ղܾ͠Α͏ͱͨ͠ͷ 20122݄23༵
ݹయతͳ.7$͕͍࣋ͬͯͨ ✓ γεςϜʹଘࡏ͢ΔϩδοΫ ϏδωεϩδοΫ͚ͩ͡Όͳ͍ ✓ ϓϨθϯςʔγϣϯϩδοΫͷ ஔ͖͕ ✓ .7$Ͱ7JFX͔.PEFM ʹ͓͔͘͠ແ͍
20122݄23༵
1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ࢹ 20122݄23༵
1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ 7JTVBM8PSLTͰͷΞϓϩʔν ✓ .PEFM7JFX7JFX.PEFM ✓ 81'ͰͷΞϓϩʔν 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
.PEFM7JFX1SFTFOUFS ✓ ೖྗ੍ޚ04͞Μ͕ͬͯ͘ΕΔ ͷͰίϯτϩʔϥ͞Μ͕ୀ ✓ 7JFXଆΛૢ࡞͍ͨ͠ϓϨθ ϯςʔγϣϯϩδοΫ͋ͬͨ ✓ ϩδοΫΛ࣋ͭଆͰ͍͡ΕΔ ਓ͕ඞཁ
20122݄23༵
.PEFM7JFX1SFTFOUFS View (V/C) Model Presenter ࢹ ૢ࡞Մ 20122݄23༵
ϙΠϯτ 20122݄23༵
$POUSPMMFSͱ 1SFTFOUFS ੜཱ͍ͪͷҟͳΔͷ 20122݄23༵
ཧ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
υϝΠϯϩδοΫҎ֎ͷϩδοΫ ΛͲ͜ʹஔ͍ͯɺͦΕͱଞͷίϯ ϙʔωϯτΛͲ͏͏·͘ڠௐͤ͞ Δ͔ͷ࣮ફͷྺ࢙ .7$ܥΞʔΩςΫνϟύλʔϯ 20122݄23༵
࠷ۙͷ+BWB4DSJQUϥΠϒϥϦ ✓ #BDLCPOFKT ✓ ,OPDLPVUKT ✓ +BWB4DSJQU.7$ ✓ #BUNBOKT 20122݄23༵
3BJMTͷੈքͰ ✓ $FMMT ✓ %SBQFS ✓ 20122݄23༵
8FCΞϓϦέʔγϣϯͷ ੈքʹɺϦονΫϥΠΞ ϯτͱେنԽʹΑͬͯϓ ϨθϯςʔγϣϯϩδοΫ ͱͷઓ͍͕ຊ֨Խͭ͠ ͭ͋Δ 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l .7$͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹؔΘΒͣɺͦΕΒશ͕ͯ b.7$bͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ΫϥΠΞϯτ.7$ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ Ͱͳ͘ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
·ͩ ͕ ͬ͘͠Γ͖͍ͯͳ͍͜ͱ ✓ ϓϨθϯςʔγϣϯϩδοΫʹυ ϝΠϯϩδοΫʹ͏·͓͚͘ͳ͍ Α͏ͳϩδοΫ͋ΔΑ͏ͳ ✓ ΫϥΠΞϯτଆʹԿΛஔ͍ͯαʔό ଆʹԿΛஔ͍ͯͦΕΒ͕Ͳ͏ڠௐ͢
͖͔ 20122݄23༵
*TUIJTBOTXFS https://gist.github.com/1362110 20122݄23༵
ઌਓͷܙʹֶͼͭͭ ͞ΒͳΔ࣮ફͱ͕ٞ ඞཁͦ͏ 20122݄23༵
ଓ͘ 20122݄23༵
ͦͷଞͷใͷϙΠϯλ ✓ 81'͚ͷϞσϧϏϡʔϓϨθϯ λʔϏϡʔϞσϧઃܭύλʔϯ http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx ✓ ։ൃऀ͕͓͖ͬͯ͘ɺͭͷ6*Ξʔ ΩςΫνϟɾύλʔϯ http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/ greatblogentry_10_01.html
20122݄23༵
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ 20122݄23༵
Ruby Sapporo Night vol.14 2012-02-23 Thu Apple Store, Sapporo 20122݄23༵