backbone.jsの使用例 その1

Aa777465acd82d13333678f3fc082c59?s=47 Spring_MT
July 25, 2013
260

backbone.jsの使用例 その1

Aa777465acd82d13333678f3fc082c59?s=128

Spring_MT

July 25, 2013
Tweet

Transcript

  1. backbone.jsͷ࢖༻ྫ ͦͷ➀ @Spring_MT

  2. ࣗݾ঺հ @Spring_MT Infra and App Engineer

  3. backbone.jsͱ͸ʁ ҰݴͰ͍͏ͱɻɻɻ

  4. backbone.jsͱ͸ʁ 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. ɾhttp://backbonejs.org/ΑΓ࠷ॳͷҰߦ໨Λൈਮ
  5. backbone.jsͱ͸ʁ ɾαʔόʔͱJSONͰ΍ΓͱΓ͢ΔRESTfulΠϯλ ʔϑΣʔε ɾkey-valueܕͷσʔλ(ଐੑͷઃఆ)ͱΧελϜΠϕ ϯτΛ࣋ͭϞσϧ ɾෳ਺ͷϞσϧΛѻ͏ͨΊͷAPIΛ࣋ͭίϨΫγϣϯ ɾΠϕϯτϋϯυϦϯάΛߦ͏Ϗϡʔ

  6. MVCͷ࿩͸Ͳ͜ʁ

  7. webΞϓϦέʔγϣϯ (Railsͱ͔)

  8. Controller Model View Dispatcher App Server Web Browser HTTP Request

    HTTP Response σʔλͷऔಘͱૢ࡞ σʔλͷड͚౉͠ HTMLͷϨϯμϦϯά ϨϯμϦϯά͕׬ྃͨ͠ HTMLΛؚΉHTTP Response
  9. WebΞϓϦέʔγϣϯ ͷMVC(Model 2) • ॏ͍ Model ͱ͍ܰ Controller • View͸ӬଓԽ͠ͳ͍

    • HTTP͸εςʔτϨεͳͷͰViewʹঢ় ଶΛอ࣋͢Δඞཁ͕ͳ͍(Session CookieͰอ࣋) • Controller͸ModelΛViewΛͭͳ͙ކ
  10. GoFͷMVC (఻౷తͳMVC)

  11. Controller Model View User Interaction σʔλͷૢ࡞ ૢ࡞ͷ಺༰Λ౉͢ ΠϕϯτΛൃՐ

  12. MVC • Ӭଓతͳ View ͱަ׵Մೳͳ Controller

  13. MVC • ಉ͡MVCͱ͍͏୯ޠͰ΋ɺίϯςΩε τʹΑͬͯɺ಺༰͕มΘͬͯ͘Δ

  14. backboneͷMVC

  15. Collection Model View Router DOM ߋ৽ ΠϕϯτൃՐ Controller ΠϕϯτΛൃՐ σʔλͷૢ࡞

    User Interaction OnHashChange PushState
  16. backbone.js • ViewͷதʹϏϡʔϝιου(ඳը)ͱίϯ τϩʔϥʔϝιου(ϩδοΫ)Λ෼͚Δ • Controller͸جຊͰͯ͜ͳ͍ • Model͸Collectionܦ༝Ͱૢ࡞͢Δ

  17. ϑϨʔϜϫʔΫͱ͸ • ΞϓϦέʔγϣϯͷߏஙɺ؅ཧΛ؆୯ ʹ͢ΔͨΊͷಓ۩

  18. backbone.js ɾαʔόʔͱJSONͰ΍ΓͱΓ͢ΔRESTfulΠϯλ ʔϑΣʔε ɾkey-valueܕͷσʔλ(ଐੑͷઃఆ)ͱΧελϜΠϕ ϯτΛ࣋ͭϞσϧ ɾ๛෋ͳϦετૢ࡞༻ͷAPIΛ࣋ͭίϨΫγϣϯ ɾΠϕϯτϋϯυϦϯάΛߦ͏Ϗϡʔ

  19. ࣮ࡍʹ࢖ͬͯΈΔ

  20. ͨͩɺαϯϓϧΞϓ Ϧ͸࢖Θͳ͍YO

  21. ͩͬͯΘ͔Γͮ́(ry

  22. ͦͷલʹ

  23. require.js • Ϟδϡʔϧͷґଘ؅ཧ • minify

  24. Ͱ͸࢖ͬͯΈΔ ίʔυΛݩʹઆ໌͠·͢

  25. ΫϥΠΞϯταΠυ • i18nରԠͲ͏͢Δͷ͔ʁ • render • validation • i18n༻ͷϞδϡʔϧ΋͋Δ͕࢖͏ͷ͔ʁ

  26. ͝ਗ਼ௌ༗೉͏͍͟͝ ·ͨ͠

  27. ࢀߟจݙ • αόΫϥ྆ํͰಈ͘ JavaScript ͷେن໛ ։ൃΛߦ͏ͨΊʹ(https://gist.github.com/ tily/1362110)