Next Generation Web Application Architecture

Slide 1

Slide 1 text

͠·ͩ͜͏͡ SHIMADA Koji ೔ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture. 2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌୅ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 2012೥2݄23೔໦༵೔

Slide 2

Slide 2 text

l ͸Δ͔ͳ൴ํͷੲɺ͋Δ৔ॴͰɺԿ΋ͳ͘ແەঢ়ଶͷۭؒ Λඬ͍ͬͯͨɺͰͨΒΊʹू·ͬͨݪࢠͷখ͞ͳू߹ʹɺͦ Ε͸ਂࠁͳ֎ইΛ༩͑ͨɻͦͯ͠ɺҟৗͳɺͱͯ΋͋Γͦ͏ ΋ͳ͍ύλʔϯͰݪࢠͨͪΛ཭Εͳ͍Α͏ʹ݁ͼ͚ͭͯ͠ ·ͬͨɻ͜ͷΑ͏ͳύλʔϯ͸ࣗ෼ࣗ਎Λίϐʔ͢Δͱ͍͏ ͜ͱΛૣ͍͏ͪʹ֮͑ͯ͠·͍ ͜Ε͸ύλʔϯ͕ඇຌͳ΋ͷ Ͱ͋Δ͜ͱͷҰ໘Λ͍ࣔͯ͠Δ ɺύλʔϯ͕ඬ͏͢΂ͯͷ ࿭੕Ͱɺմঢ়ͷࡂ೉͕Ҿ͖ى͜͞Εଓ͚ͨɻ͜ͷΑ͏ʹͯ͠ Ӊ஦ʹੜ໋͕஀ੜͨ͠ͷͰ͋Δɻ ʰۜՏώονϋΠΫɾΨΠυʱ 2012೥2݄23೔໦༵೔

Slide 3

Slide 3 text

͠·ͩ͜͏͡ ౡాߒೋ Photo by tmaeda 2012೥2݄23೔໦༵೔

Slide 4

Slide 4 text

೔ຊ3VCZͷձ 2012೥2݄23೔໦༵೔

Slide 5

Slide 5 text

Ұൠࣾஂ๏ਓ-0$"- 2012೥2݄23೔໦༵೔

Slide 6

Slide 6 text

2012೥2݄23೔໦༵೔

Slide 7

Slide 7 text

2012೥2݄23೔໦༵೔

Slide 8

Slide 8 text

2012೥2݄23೔໦༵೔

Slide 9

Slide 9 text

2012೥2݄23೔໦༵೔

Slide 10

Slide 10 text

2012೥2݄23೔໦༵೔

Slide 11

Slide 11 text

2012೥2݄23೔໦༵೔

Slide 12

Slide 12 text

ΑΖ͘͠ ͓ئ͍͠·͢ 2012೥2݄23೔໦༵೔

Slide 13

Slide 13 text

Slide 14

Slide 14 text

͓඼ॻ͖ ✓ ΫϥΠΞϯτ.7$ͬͯԿͩΖ͏ ✓ ΋͏͍ͪͲ.7$ ✓ .7$ܥͷύλʔϯͷܥේʹ͍ͭͯ ✓ ΋͏͍ͪͲΫϥΠΞϯτ.7$ 2012೥2݄23೔໦༵೔

Slide 15

Slide 15 text

2012೥2݄23೔໦༵೔

Slide 16

Slide 16 text

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. 2012೥2݄23೔໦༵೔

Slide 17

Slide 17 text

Demo https://github.com/snoozer05/backbone-tiny-example 2012೥2݄23೔໦༵೔

Slide 18

Slide 18 text

ΫϥΠΞϯτ.7$ 2012೥2݄23೔໦༵೔

Slide 19

Slide 19 text

.BSUJO'PXMFSTBJE photo by pragdave 2012೥2݄23೔໦༵೔

Slide 20

Slide 20 text

l .7$͸͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹ΋ؔΘΒͣɺͦΕΒશ͕ͯ b.7$`ͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ΋ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨ΋఻ݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 2012೥2݄23೔໦༵೔

Slide 21

Slide 21 text

ݱࡏͷ8FCΞϓϦέʔγϣϯ ։ൃͰΑࣖ͘ʹ͢Δ.7$ http://www.ﬂickr.com/photos/indigoskies/6523275513/ 2012೥2݄23೔໦༵೔

Slide 22

Slide 22 text

http://www.ﬂickr.com/photos/indigoskies/6523275513/ .7$.PEFM l౰࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛ౰ͯ͸Ίͨ΋ͷ 2012೥2݄23೔໦༵೔

Slide 23

Slide 23 text

.7$ͷΦϦδφϧ Ͱ͸ͳ͍ 2012೥2݄23೔໦༵೔

Slide 24

Slide 24 text

΋͏͍ͪͲ.7$ 2012೥2݄23೔໦༵೔

Slide 25

Slide 25 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ╙30࿁Smalltalkീᒝળ 䉅䈉䈇䈤䈬MVC 2011ᐕ3᦬30ᣣ 㒙ㇱ๺ᐢ 2012೥2݄23೔໦༵೔

Slide 26

Slide 26 text

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ⷐ᳞઀᭽䈱৻ㇱ • 䊝䊂䊦䈲⍮⼂䈱⴫⽎ • 䊎䊠䊷䈲䊝䊂䊦䈱䋨ⷞⷡ⊛䈭䋩⴫⽎ • 䉮䊮䊃䊨䊷䊤䈲䊡䊷䉱䈫䉲䉴䊁䊛䈫䉕⚌䈨䈔䉎䉅䈱 2012೥2݄23೔໦༵೔

Slide 27

Slide 27 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ૶䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • 㕍ᧁᷕ䈘䉖 • 1987ᐕ㗃 • ን჻䉷䊨䉾䉪䉴ᖱႎ䉲䉴䊁䊛(FXIS)䈱␠ౝᢥ ᦠ • ዋ䈭䈒䈫䉅3䊋䊷䉳䊢䊮䈅䉎 • ⑳䈲౉␠䈚䈢1988ᐕ䈮OJT䉕ฃ䈔䈢 2012೥2݄23೔໦༵೔

Slide 28

Slide 28 text

http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html 2012೥2݄23೔໦༵೔

Slide 29

Slide 29 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ૶䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • MVC䈫䈲 – Smalltalk䉲䉴䊁䊛ో૕䉕⽾䈇䈩䈇䉎⸳⸘ᜰ㊎ – ήℂ䈮ᓥ䈉ᔅⷐ䈲䈭䈇䈏䇮䈖䉏䉕೑↪䈚䈭䈇䈫៊䉕䈜䉎 • 䊝䊂䊦䈲䇮↹㕙䈮⴫␜䈚䈢䈇䉥䊑䉳䉢䉪䊃䈠䈱䉅䈱 • 䊎䊠䊷䈲䇮䊝䊂䊦䉕䇸䈇䈧䇮䈬䈖䈮䇮䈬䈱૏䈱ᄢ䈐䈘䈪䇮䈬䈱䉋䈉䈮⴫␜䈘䉏䉎䈱䈎䇹䉕⍮䈦䈩䈇䉎 • 䉮䊮䊃䊨䊷䊤䈲䇮䊝䊂䊦䉇䊎䊠䊷䉕ᠲ૞䈜䉎䈢䉄䈱䊡䊷䉱䈎䉌䈱ⷐ᳞䉕ฃ䈔ઃ䈔䇮ో૕䉕೙ᓮ䈜䉎 2012೥2݄23೔໦༵೔

Slide 30

Slide 30 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 2012೥2݄23೔໦༵೔

Slide 31

Slide 31 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai MVC䈱ಽ㘃 • 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • ଐሽᕈ䉕೑↪䈜䉎MVC • 䊒䊤䉧䊑䊦䉕೑↪䈜䉎MVC 2012೥2݄23೔໦༵೔

Slide 32

Slide 32 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • 䊝䊂䊦䈏න⚐䈠䈱䉅䈱䈪䇮䊎䊠䊷䈲⴫␜䈜䉎䈣䈔䇮䈭䉖䈪䉅䈎䉖䈪䉅䉮䊮䊃䊨䊷䊤䈏䈵䈫䉍䈪㗎ᒛ䉎 • 䊝䊂䊦䈲䇮䊂䊷䉺▤ℂ䈣䈔䉕ኾ㐷䈮ⴕ䈉䉥䊑䉳䉢䉪䊃䈪䈅䉎䈲䈝䈭䈱䈮䇮䉮䊮䊃䊨䊷䊤䈮ᡰ㈩䈘䉏䉎䊂䊷䉺䈮ᚑ䉍ਅ䈏䈦䈩䈇䉎 • 䊝䊂䊦䈱ᖱႎ㓝⭁䈏⎕䉌䉏䉎 • 䊝䊂䊦䈫䊎䊠䊷䈏ኒធ䈮㑐ଥ䈚䈩䈇䉎 • ᄌᦝ䉇᜛ᒛ䈮ᒙ䈇 • 䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌䉂䉌䉏䈭䈇 2012೥2݄23೔໦༵೔

Slide 33

Slide 33 text

ଐሽᕈ䉕೑↪䈜䉎MVC • 䈵䈫䈧䈱䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌ⷰ䉎䈖䈫䈮ኻᔕ • ଐሽᕈ䈱ዉ౉ – 䊝䊂䊦䈏ᄌൻ䈜䉎䈫䇮䊝䊂䊦䈲⥄ಽ䈮䇸changed:䇹䈱䊜䉾䉶䊷䉳䉕ㅍ䉎 – 䈜䉎䈫䊝䊂䊦䉕ⷰ䈩䈇䉎䈜䈼䈩䈱䊎䊠䊷䈮䇸update:䇹䈫䈇䈉䊜䉾䉶䊷䉳䈏ㅍା䈘䉏䉎 – 䊑䊨䊷䊄䉨䊞䉴䊁䉞䊮䉫ᯏ᭴ – ଐሽᕈㄉᦠ䈱䉨䊷䈮䊝䊂䊦䇮୯䈮䊎䊠䊷䈱㓸ว • 䊝䊂䊦䈱ᖱႎ㓝⭁䈏⏕┙ • 䉮䊮䊃䊨䊷䊤䈲䉁䈣䊜䊆䊠䊷䉕ᜬ䈦䈩䈇䉎 http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 2012೥2݄23೔໦༵೔

Slide 34

Slide 34 text

http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䊒䊤䉧䊑䊦䉕೑↪䈜䉎MVC • 䊎䊠䊷䈫䉮䊮䊃䊨䊷䊤䈱䊕䉝(VC)䈲䇮䊝䊂䊦䈎䉌⁛┙ • M䉕VC䈮Ꮕ䈚ㄟ䉖䈪૶䈉 – 䊎䊠䊷䈱Ꮕ䈚ㄟ䉂(䊒䊤䉫䉟䊮䊜䉾䉶䊷䉳)䈲䊝䊂䊦䈫䉶䊧䉪䉺(䊜䉸䉾䊄ฬ)䉕ᒁᢙ䈮ᜬ䈧 • on:aspect:menu: • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱ᖱႎ䉕ෳᾖ䈜䉎䉶䊧䉪䉺䈣䈔䉕⍮䈦䈩䈇䉎 • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱䊜䊆䊠䊷䉕ෳᾖ䈜䉎䉶䊧䉪䉺䈣䈔䉕⍮䈦䈩䈇䉎 2012೥2݄23೔໦༵೔

Slide 35

Slide 35 text

.BSUJO'PXMFSTBJE photo by pragdave 2012೥2݄23೔໦༵೔

Slide 36

Slide 36 text

l ཰௚ʹݴͬͯɺݹయతͳ.7$͸ ࠓͷϦονΫϥΠΞϯτʹରͯ͠͸ ͋·Γ༻Λͳ͠·ͤΜɻ http://martinfowler.com/eaaDev/uiArchs.html 2012೥2݄23೔໦༵೔

Slide 37

Slide 37 text

ର࿩ܕγεςϜͷ.7$ܥ ΞʔΩςΫνϟͷܥේ 2012೥2݄23೔໦༵೔

Slide 38

Slide 38 text

.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 2012೥2݄23೔໦༵೔

Slide 39

Slide 39 text

.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 2012೥2݄23೔໦༵೔

Slide 40

Slide 40 text

1SFTFOUBUJPO.PEFM ✓ υϝΠϯϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛϞσϧͷ૚Ͱ෼཭ ✓ 7JFX͸.PEFMͷखલʹஔ͔Ε ͨ1SFTFOUBUJPO.PEFMΛ؂ ࢹ͢Δ 2012೥2݄23೔໦༵೔

Slide 41

Slide 41 text

1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ؂ࢹ 2012೥2݄23೔໦༵೔

Slide 42

Slide 42 text

ݹయతͳ.7$͕ ͍࣋ͬͯͨ໰୊Λ ղܾ͠Α͏ͱͨ͠΋ͷ 2012೥2݄23೔໦༵೔

Slide 43

Slide 43 text

ݹయతͳ.7$͕͍࣋ͬͯͨ໰୊ ✓ γεςϜʹଘࡏ͢ΔϩδοΫ͸ ϏδωεϩδοΫ͚ͩ͡Όͳ͍ ✓ ϓϨθϯςʔγϣϯϩδοΫͷ ஔ͖৔͕໰୊ ✓ .7$Ͱ͸7JFX͔.PEFM ʹ͓͔͘͠ແ͍ 2012೥2݄23೔໦༵೔

Slide 44

Slide 44 text

1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ؂ࢹ 2012೥2݄23೔໦༵೔

Slide 45

Slide 45 text

1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ 7JTVBM8PSLTͰͷΞϓϩʔν ✓ .PEFM7JFX7JFX.PEFM ✓ 81'ͰͷΞϓϩʔν 2012೥2݄23೔໦༵೔

Slide 46

Slide 46 text

.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 2012೥2݄23೔໦༵೔

Slide 47

Slide 47 text

.PEFM7JFX1SFTFOUFS ✓ ೖྗ੍ޚ͸04͞Μ͕΍ͬͯ͘ΕΔ ͷͰίϯτϩʔϥ͞Μ͕ୀ৔ ✓ ௚઀7JFXଆΛૢ࡞͍ͨ͠ϓϨθ ϯςʔγϣϯϩδοΫ΋͋ͬͨ ✓ ϩδοΫΛ࣋ͭଆͰ௚઀͍͡ΕΔ ਓ͕ඞཁ 2012೥2݄23೔໦༵೔

Slide 48

Slide 48 text

.PEFM7JFX1SFTFOUFS View (V/C) Model Presenter ؂ࢹ ૢ࡞΋Մ 2012೥2݄23೔໦༵೔

Slide 49

Slide 49 text

ϙΠϯτ 2012೥2݄23೔໦༵೔

Slide 50

Slide 50 text

$POUSPMMFSͱ 1SFTFOUFS͸ ੜཱ͍ͪͷҟͳΔ΋ͷ 2012೥2݄23೔໦༵೔

Slide 51

Slide 51 text

੔ཧ 2012೥2݄23೔໦༵೔

Slide 52

Slide 52 text

.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 2012೥2݄23೔໦༵೔

Slide 53

Slide 53 text

υϝΠϯϩδοΫҎ֎ͷϩδοΫ ΛͲ͜ʹஔ͍ͯɺͦΕͱଞͷίϯ ϙʔωϯτΛͲ͏͏·͘ڠௐͤ͞ Δ͔ͷ࣮ફͷྺ࢙ .7$ܥΞʔΩςΫνϟύλʔϯ 2012೥2݄23೔໦༵೔

Slide 54

Slide 54 text

࠷ۙͷ+BWB4DSJQUϥΠϒϥϦ ✓ #BDLCPOFKT ✓ ,OPDLPVUKT ✓ +BWB4DSJQU.7$ ✓ #BUNBOKT 2012೥2݄23೔໦༵೔

Slide 55

Slide 55 text

3BJMTͷੈքͰ΋ ✓ $FMMT ✓ %SBQFS ✓ 2012೥2݄23೔໦༵೔

Slide 56

Slide 56 text

8FCΞϓϦέʔγϣϯͷ ੈքʹ΋ɺϦονΫϥΠΞ ϯτͱେن໛ԽʹΑͬͯϓ ϨθϯςʔγϣϯϩδοΫ ໰୊ͱͷઓ͍͕ຊ֨Խͭ͠ ͭ͋Δ 2012೥2݄23೔໦༵೔

Slide 57

Slide 57 text

.BSUJO'PXMFSTBJE photo by pragdave 2012೥2݄23೔໦༵೔

Slide 58

Slide 58 text

l .7$͸͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹ΋ؔΘΒͣɺͦΕΒશ͕ͯ b.7$bͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ΋ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨ΋఻ݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 2012೥2݄23೔໦༵೔

Slide 59

Slide 59 text

ΫϥΠΞϯτ.7$ 2012೥2݄23೔໦༵೔

Slide 60

Slide 60 text

http://www.ﬂickr.com/photos/indigoskies/6523275513/ .7$.PEFM l౰࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛ౰ͯ͸Ίͨ΋ͷ 2012೥2݄23೔໦༵೔

Slide 61

Slide 61 text

http://www.ﬂickr.com/photos/indigoskies/6523275513/ .7$.PEFM l౰࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛ౰ͯ͸Ίͨ΋ͷ Ͱ͸ͳ͘ 2012೥2݄23೔໦༵೔

Slide 62

Slide 62 text

.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 2012೥2݄23೔໦༵೔

Slide 63

Slide 63 text

·ͩ ๻͕ ͬ͘͠Γ͖͍ͯͳ͍͜ͱ ✓ ϓϨθϯςʔγϣϯϩδοΫʹ΋υ ϝΠϯϩδοΫʹ΋͏·͓͚͘ͳ͍ Α͏ͳϩδοΫ΋͋ΔΑ͏ͳ ✓ ΫϥΠΞϯτଆʹԿΛஔ͍ͯαʔό ଆʹԿΛஔ͍ͯͦΕΒ͕Ͳ͏ڠௐ͢ ΂͖͔ 2012೥2݄23೔໦༵೔

Slide 64

Slide 64 text

*TUIJTBOTXFS https://gist.github.com/1362110 2012೥2݄23೔໦༵೔

Slide 65

Slide 65 text

ઌਓͷ஌ܙʹֶͼͭͭ ͞ΒͳΔ࣮ફͱٞ࿦͕ ඞཁͦ͏ 2012೥2݄23೔໦༵೔

Slide 66

Slide 66 text

ଓ͘ 2012೥2݄23೔໦༵೔

Slide 67

Slide 67 text

ͦͷଞͷ৘ใ΁ͷϙΠϯλ ✓ 81'޲͚ͷϞσϧϏϡʔϓϨθϯ λʔϏϡʔϞσϧઃܭύλʔϯ http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx ✓ ։ൃऀ͕஌͓ͬͯ͘΂͖ɺͭͷ6*Ξʔ ΩςΫνϟɾύλʔϯ http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/ greatblogentry_10_01.html 2012೥2݄23೔໦༵೔

Slide 68

Slide 68 text

Slide 69

Slide 69 text

͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ 2012೥2݄23೔໦༵೔

Slide 70

Slide 70 text

Ruby Sapporo Night vol.14 2012-02-23 Thu Apple Store, Sapporo 2012೥2݄23೔໦༵೔