Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ @Spring_MT Infra and App Engineer

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

MVCͷ࿩͸Ͳ͜ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

GoFͷMVC (఻౷తͳMVC)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

backboneͷMVC

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

࣮ࡍʹ࢖ͬͯΈΔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ͩͬͯΘ͔Γͮ́(ry

Slide 22

Slide 22 text

ͦͷલʹ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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