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.7k
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.5k
Rails on GKEで運用する Webアプリケーションの紹介/Rails on GKE
spring_mt
0
500
新規事業立ち上げからマイクロサービスについて考えてみる
spring_mt
1
1.2k
hpbn_3
spring_mt
0
120
chef-soloの簡単な使い方
spring_mt
4
1k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
The Pragmatic Product Professional
lauravandoore
35
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Rails Girls Zürich Keynote
gr2m
95
14k
For a Future-Friendly Web
brad_frost
179
9.8k
Making Projects Easy
brettharned
116
6.3k
Site-Speed That Sticks
csswizardry
10
710
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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)