backbone.jsの使用例 その1

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)