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)