Next Generation Web Application Architecture

941b170e5a115a295cccb5f5cdf0a800?s=47 Koji SHIMADA
February 23, 2012

Next Generation Web Application Architecture

Ruby Sapporo Night vol.14

941b170e5a115a295cccb5f5cdf0a800?s=128

Koji SHIMADA

February 23, 2012
Tweet

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೔໦༵೔