Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
backbone.jsの使用例 その1
Search
Spring_MT
July 25, 2013
0
330
backbone.jsの使用例 その1
Spring_MT
July 25, 2013
Tweet
Share
More Decks by Spring_MT
See All by Spring_MT
Deep Environment Parity CDNT 2019
spring_mt
5
3.2k
環境の一致について考えてみる / Environment Parity
spring_mt
4
7.1k
1人でできる Docker Kubernetes(GKE)を 使った新規サービス立ち上げ / Docker and Kubernetes(GKE) for new services
spring_mt
19
7.6k
CI CD Test on ReRep
spring_mt
3
3.2k
Swagger (OpenAPI 2.0) を使ったAPI仕様Drivenな開発 / API-Spec-Driven development with Swagger
spring_mt
9
3.3k
Rails on GKEで運用する Webアプリケーションの紹介/Rails on GKE
spring_mt
0
440
新規事業立ち上げからマイクロサービスについて考えてみる
spring_mt
1
1.1k
hpbn_3
spring_mt
0
100
chef-soloの簡単な使い方
spring_mt
4
960
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Scaling GitHub
holman
459
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Statistics for Hackers
jakevdp
797
220k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimizing for Happiness
mojombo
376
70k
A Tale of Four Properties
chriscoyier
157
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Site-Speed That Sticks
csswizardry
3
280
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)