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
370
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.3k
環境の一致について考えてみる / Environment Parity
spring_mt
4
7.3k
1人でできる Docker Kubernetes(GKE)を 使った新規サービス立ち上げ / Docker and Kubernetes(GKE) for new services
spring_mt
19
7.8k
CI CD Test on ReRep
spring_mt
3
3.4k
Swagger (OpenAPI 2.0) を使ったAPI仕様Drivenな開発 / API-Spec-Driven development with Swagger
spring_mt
9
3.6k
Rails on GKEで運用する Webアプリケーションの紹介/Rails on GKE
spring_mt
0
500
新規事業立ち上げからマイクロサービスについて考えてみる
spring_mt
1
1.2k
hpbn_3
spring_mt
0
130
chef-soloの簡単な使い方
spring_mt
4
1k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Designing Experiences People Love
moore
142
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
The Language of Interfaces
destraynor
161
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
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)