Upgrade to Pro — share decks privately, control downloads, hide ads and more …

backbone.jsの使用例 その1

Spring_MT
July 25, 2013
300

backbone.jsの使用例 その1

Spring_MT

July 25, 2013
Tweet

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