Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next Generation Web Application Architecture

Next Generation Web Application Architecture

Ruby Sapporo Night vol.14

Koji SHIMADA
PRO

February 23, 2012
Tweet

More Decks by Koji SHIMADA

Other Decks in Technology

Transcript

  1. ͠·ͩ͜͏͡ SHIMADA Koji ೔ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.

    2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌୅ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 2012೥2݄23೔໦༵೔
  2. l ͸Δ͔ͳ൴ํͷੲɺ͋Δ৔ॴͰɺԿ΋ͳ͘ແەঢ়ଶͷۭؒ Λඬ͍ͬͯͨɺͰͨΒΊʹू·ͬͨݪࢠͷখ͞ͳू߹ʹɺͦ Ε͸ਂࠁͳ֎ইΛ༩͑ͨɻͦͯ͠ɺҟৗͳɺͱͯ΋͋Γͦ͏ ΋ͳ͍ύλʔϯͰݪࢠͨͪΛ཭Εͳ͍Α͏ʹ݁ͼ͚ͭͯ͠ ·ͬͨɻ͜ͷΑ͏ͳύλʔϯ͸ࣗ෼ࣗ਎Λίϐʔ͢Δͱ͍͏ ͜ͱΛૣ͍͏ͪʹ֮͑ͯ͠·͍ ͜Ε͸ύλʔϯ͕ඇຌͳ΋ͷ Ͱ͋Δ͜ͱͷҰ໘Λ͍ࣔͯ͠Δ ɺύλʔϯ͕ඬ͏͢΂ͯͷ

    ࿭੕Ͱɺմঢ়ͷࡂ೉͕Ҿ͖ى͜͞Εଓ͚ͨɻ͜ͷΑ͏ʹͯ͠ Ӊ஦ʹੜ໋͕஀ੜͨ͠ͷͰ͋Δɻ ʰۜՏώονϋΠΫɾΨΠυʱ 2012೥2݄23೔໦༵೔
  3. ͠·ͩ͜͏͡ ౡాߒೋ Photo by tmaeda 2012೥2݄23೔໦༵೔

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

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

  6. 2012೥2݄23೔໦༵೔

  7. 2012೥2݄23೔໦༵೔

  8. 2012೥2݄23೔໦༵೔

  9. 2012೥2݄23೔໦༵೔

  10. 2012೥2݄23೔໦༵೔

  11. 2012೥2݄23೔໦༵೔

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

  13. ͠·ͩ͜͏͡ SHIMADA Koji ೔ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.

    2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌୅ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 2012೥2݄23೔໦༵೔
  14. ͓඼ॻ͖ ✓ ΫϥΠΞϯτ.7$ͬͯԿͩΖ͏ ✓ ΋͏͍ͪͲ.7$ ✓ .7$ܥͷύλʔϯͷܥේʹ͍ͭͯ ✓ ΋͏͍ͪͲΫϥΠΞϯτ.7$ 2012೥2݄23೔໦༵೔

  15. 2012೥2݄23೔໦༵೔

  16. 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೔໦༵೔
  17. Demo https://github.com/snoozer05/backbone-tiny-example 2012೥2݄23೔໦༵೔

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

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

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

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

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

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

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

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

  26. 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೔໦༵೔
  27. http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ૶䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • 㕍ᧁᷕ䈘䉖 • 1987ᐕ㗃 • ን჻䉷䊨䉾䉪䉴ᖱႎ䉲䉴䊁䊛(FXIS)䈱␠ౝᢥ ᦠ

    • ዋ䈭䈒䈫䉅3䊋䊷䉳䊢䊮䈅䉎 • ⑳䈲౉␠䈚䈢1988ᐕ䈮OJT䉕ฃ䈔䈢 2012೥2݄23೔໦༵೔
  28. http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html 2012೥2݄23೔໦༵೔

  29. http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ૶䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • MVC䈫䈲 – Smalltalk䉲䉴䊁䊛ో૕䉕⽾䈇䈩䈇䉎⸳⸘ᜰ㊎ – ήℂ䈮ᓥ䈉ᔅⷐ䈲䈭䈇䈏䇮䈖䉏䉕೑↪䈚䈭䈇䈫៊䉕䈜䉎 •

    䊝䊂䊦䈲䇮↹㕙䈮⴫␜䈚䈢䈇䉥䊑䉳䉢䉪䊃䈠䈱䉅䈱 • 䊎䊠䊷䈲䇮䊝䊂䊦䉕䇸䈇䈧䇮䈬䈖䈮䇮䈬䈱૏䈱ᄢ䈐䈘 䈪䇮䈬䈱䉋䈉䈮⴫␜䈘䉏䉎䈱䈎䇹䉕⍮䈦䈩䈇䉎 • 䉮䊮䊃䊨䊷䊤䈲䇮䊝䊂䊦䉇䊎䊠䊷䉕ᠲ૞䈜䉎䈢䉄䈱 䊡䊷䉱䈎䉌䈱ⷐ᳞䉕ฃ䈔ઃ䈔䇮ో૕䉕೙ᓮ䈜䉎 2012೥2݄23೔໦༵೔
  30. http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 2012೥2݄23೔໦༵೔

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

  32. http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • 䊝䊂䊦䈏න⚐䈠䈱䉅䈱䈪䇮䊎䊠䊷䈲⴫␜䈜䉎䈣䈔䇮 䈭䉖䈪䉅䈎䉖䈪䉅䉮䊮䊃䊨䊷䊤䈏䈵䈫䉍䈪㗎ᒛ䉎 • 䊝䊂䊦䈲䇮䊂䊷䉺▤ℂ䈣䈔䉕ኾ㐷䈮ⴕ䈉䉥䊑䉳䉢䉪䊃 䈪䈅䉎䈲䈝䈭䈱䈮䇮䉮䊮䊃䊨䊷䊤䈮ᡰ㈩䈘䉏䉎䊂䊷䉺 䈮ᚑ䉍ਅ䈏䈦䈩䈇䉎 •

    䊝䊂䊦䈱ᖱႎ㓝⭁䈏⎕䉌䉏䉎 • 䊝䊂䊦䈫䊎䊠䊷䈏ኒធ䈮㑐ଥ䈚䈩䈇䉎 • ᄌᦝ䉇᜛ᒛ䈮ᒙ䈇 • 䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌䉂䉌䉏䈭䈇 2012೥2݄23೔໦༵೔
  33. ଐሽᕈ䉕೑↪䈜䉎MVC • 䈵䈫䈧䈱䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌ⷰ䉎䈖䈫䈮ኻᔕ • ଐሽᕈ䈱ዉ౉ – 䊝䊂䊦䈏ᄌൻ䈜䉎䈫䇮䊝䊂䊦䈲⥄ಽ䈮䇸changed:䇹䈱䊜䉾 䉶䊷䉳䉕ㅍ䉎 – 䈜䉎䈫䊝䊂䊦䉕ⷰ䈩䈇䉎䈜䈼䈩䈱䊎䊠䊷䈮䇸update:䇹䈫䈇

    䈉䊜䉾䉶䊷䉳䈏ㅍା䈘䉏䉎 – 䊑䊨䊷䊄䉨䊞䉴䊁䉞䊮䉫ᯏ᭴ – ଐሽᕈㄉᦠ䈱䉨䊷䈮䊝䊂䊦䇮୯䈮䊎䊠䊷䈱㓸ว • 䊝䊂䊦䈱ᖱႎ㓝⭁䈏⏕┙ • 䉮䊮䊃䊨䊷䊤䈲䉁䈣䊜䊆䊠䊷䉕ᜬ䈦䈩䈇䉎 http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 2012೥2݄23೔໦༵೔
  34. http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䊒䊤䉧䊑䊦䉕೑↪䈜䉎MVC • 䊎䊠䊷䈫䉮䊮䊃䊨䊷䊤䈱䊕䉝(VC)䈲䇮䊝䊂䊦䈎 䉌⁛┙ • M䉕VC䈮Ꮕ䈚ㄟ䉖䈪૶䈉 – 䊎䊠䊷䈱Ꮕ䈚ㄟ䉂(䊒䊤䉫䉟䊮䊜䉾䉶䊷䉳)䈲䊝䊂䊦 䈫䉶䊧䉪䉺(䊜䉸䉾䊄ฬ)䉕ᒁᢙ䈮ᜬ䈧

    • on:aspect:menu: • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱ᖱႎ䉕ෳᾖ䈜䉎䉶䊧䉪䉺䈣䈔 䉕⍮䈦䈩䈇䉎 • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱䊜䊆䊠䊷䉕ෳᾖ䈜䉎䉶䊧䉪䉺 䈣䈔䉕⍮䈦䈩䈇䉎 2012೥2݄23೔໦༵೔
  35. .BSUJO'PXMFSTBJE photo by pragdave 2012೥2݄23೔໦༵೔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  51. ੔ཧ 2012೥2݄23೔໦༵೔

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

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

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

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

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

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

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

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

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

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

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

  63. ·ͩ ๻͕ ͬ͘͠Γ͖͍ͯͳ͍͜ͱ ✓ ϓϨθϯςʔγϣϯϩδοΫʹ΋υ ϝΠϯϩδοΫʹ΋͏·͓͚͘ͳ͍ Α͏ͳϩδοΫ΋͋ΔΑ͏ͳ ✓ ΫϥΠΞϯτଆʹԿΛஔ͍ͯαʔό ଆʹԿΛஔ͍ͯͦΕΒ͕Ͳ͏ڠௐ͢

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

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

  66. ଓ͘ 2012೥2݄23೔໦༵೔

  67. ͦͷଞͷ৘ใ΁ͷϙΠϯλ ✓ 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೔໦༵೔
  68. ͠·ͩ͜͏͡ SHIMADA Koji ೔ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.

    2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌୅ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 2012೥2݄23೔໦༵೔
  69. ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ 2012೥2݄23೔໦༵೔

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