Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
backbone.jsの使用例 その1
Spring_MT
July 25, 2013
0
270
backbone.jsの使用例 その1
Spring_MT
July 25, 2013
Tweet
Share
More Decks by Spring_MT
See All by Spring_MT
spring_mt
5
1.9k
spring_mt
3
4.8k
spring_mt
19
6.8k
spring_mt
3
2k
spring_mt
9
2k
spring_mt
0
240
spring_mt
0
640
spring_mt
0
36
spring_mt
4
860
Featured
See All Featured
iamctodd
17
1.8k
shpigford
165
19k
chriscoyier
145
19k
bkeepers
408
57k
shpigford
368
42k
pauljervisheath
196
15k
mongodb
23
3.8k
keithpitt
401
20k
myddelton
109
11k
jonrohan
1021
380k
roundedbygravity
84
7.8k
marcelosomers
220
15k
Transcript
backbone.jsͷ༻ྫ ͦͷ➀ @Spring_MT
ࣗݾհ @Spring_MT Infra and App Engineer
backbone.jsͱʁ ҰݴͰ͍͏ͱɻɻɻ
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/ΑΓ࠷ॳͷҰߦΛൈਮ
backbone.jsͱʁ ɾαʔόʔͱJSONͰΓͱΓ͢ΔRESTfulΠϯλ ʔϑΣʔε ɾkey-valueܕͷσʔλ(ଐੑͷઃఆ)ͱΧελϜΠϕ ϯτΛ࣋ͭϞσϧ ɾෳͷϞσϧΛѻ͏ͨΊͷAPIΛ࣋ͭίϨΫγϣϯ ɾΠϕϯτϋϯυϦϯάΛߦ͏Ϗϡʔ
MVCͷͲ͜ʁ
webΞϓϦέʔγϣϯ (Railsͱ͔)
Controller Model View Dispatcher App Server Web Browser HTTP Request
HTTP Response σʔλͷऔಘͱૢ࡞ σʔλͷड͚͠ HTMLͷϨϯμϦϯά ϨϯμϦϯά͕ྃͨ͠ HTMLΛؚΉHTTP Response
WebΞϓϦέʔγϣϯ ͷMVC(Model 2) • ॏ͍ Model ͱ͍ܰ Controller • ViewӬଓԽ͠ͳ͍
• HTTPεςʔτϨεͳͷͰViewʹঢ় ଶΛอ࣋͢Δඞཁ͕ͳ͍(Session CookieͰอ࣋) • ControllerModelΛViewΛͭͳ͙ކ
GoFͷMVC (౷తͳMVC)
Controller Model View User Interaction σʔλͷૢ࡞ ૢ࡞ͷ༰Λ͢ ΠϕϯτΛൃՐ
MVC • Ӭଓతͳ View ͱަՄೳͳ Controller
MVC • ಉ͡MVCͱ͍͏୯ޠͰɺίϯςΩε τʹΑͬͯɺ༰͕มΘͬͯ͘Δ
backboneͷMVC
Collection Model View Router DOM ߋ৽ ΠϕϯτൃՐ Controller ΠϕϯτΛൃՐ σʔλͷૢ࡞
User Interaction OnHashChange PushState
backbone.js • ViewͷதʹϏϡʔϝιου(ඳը)ͱίϯ τϩʔϥʔϝιου(ϩδοΫ)Λ͚Δ • ControllerجຊͰͯ͜ͳ͍ • ModelCollectionܦ༝Ͱૢ࡞͢Δ
ϑϨʔϜϫʔΫͱ • ΞϓϦέʔγϣϯͷߏஙɺཧΛ؆୯ ʹ͢ΔͨΊͷಓ۩
backbone.js ɾαʔόʔͱJSONͰΓͱΓ͢ΔRESTfulΠϯλ ʔϑΣʔε ɾkey-valueܕͷσʔλ(ଐੑͷઃఆ)ͱΧελϜΠϕ ϯτΛ࣋ͭϞσϧ ɾ๛ͳϦετૢ࡞༻ͷAPIΛ࣋ͭίϨΫγϣϯ ɾΠϕϯτϋϯυϦϯάΛߦ͏Ϗϡʔ
࣮ࡍʹͬͯΈΔ
ͨͩɺαϯϓϧΞϓ ϦΘͳ͍YO
ͩͬͯΘ͔Γͮ́(ry
ͦͷલʹ
require.js • Ϟδϡʔϧͷґଘཧ • minify
ͰͬͯΈΔ ίʔυΛݩʹઆ໌͠·͢
ΫϥΠΞϯταΠυ • i18nରԠͲ͏͢Δͷ͔ʁ • render • validation • i18n༻ͷϞδϡʔϧ͋Δ͕͏ͷ͔ʁ
͝ਗ਼ௌ༗͏͍͟͝ ·ͨ͠
ࢀߟจݙ • αόΫϥ྆ํͰಈ͘ JavaScript ͷେن ։ൃΛߦ͏ͨΊʹ(https://gist.github.com/ tily/1362110)