backbone.jsの使用例 その1

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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/ΑΓ࠷ॳͷҰߦ໨Λൈਮ
   

   View Slide

5. backbone.jsͱ͸ʁ
   ɾαʔόʔͱJSONͰ΍ΓͱΓ͢ΔRESTfulΠϯλ
   ʔϑΣʔε
   ɾkey-valueܕͷσʔλ(ଐੑͷઃఆ)ͱΧελϜΠϕ
   ϯτΛ࣋ͭϞσϧ
   ɾෳ਺ͷϞσϧΛѻ͏ͨΊͷAPIΛ࣋ͭίϨΫγϣϯ
   ɾΠϕϯτϋϯυϦϯάΛߦ͏Ϗϡʔ
   

   View Slide

6. MVCͷ࿩͸Ͳ͜ʁ
   

   View Slide

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

   View Slide

8. Controller
   Model View
   Dispatcher
   App Server
   Web Browser
   HTTP Request HTTP Response
   σʔλͷऔಘͱૢ࡞
   σʔλͷड͚౉͠
   HTMLͷϨϯμϦϯά
   ϨϯμϦϯά͕׬ྃͨ͠
   HTMLΛؚΉHTTP Response
   

   View Slide

9. WebΞϓϦέʔγϣϯ
   ͷMVC(Model 2)
   • ॏ͍ Model ͱ͍ܰ Controller
   • View͸ӬଓԽ͠ͳ͍
   • HTTP͸εςʔτϨεͳͷͰViewʹঢ়
   ଶΛอ࣋͢Δඞཁ͕ͳ͍(Session
   CookieͰอ࣋)
   • Controller͸ModelΛViewΛͭͳ͙ކ
   

   View Slide

10. GoFͷMVC
    (఻౷తͳMVC)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. backboneͷMVC
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. ࣮ࡍʹ࢖ͬͯΈΔ
    

    View Slide

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

    View Slide

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

    View Slide

22. ͦͷલʹ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide