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
why we need rich webapps @ recruit marketing pa...
Search
Yosuke Furukawa
PRO
January 28, 2017
Programming
1
230
why we need rich webapps @ recruit marketing partners meetup 1/25
recruit marketing partners meetup で話した奴です
Yosuke Furukawa
PRO
January 28, 2017
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
7
3.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
220
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
800
Other Decks in Programming
See All in Programming
tsconfigのオプションで変わる型世界
keisukeikeda
1
130
Parallel::Pipesの紹介
skaji
2
880
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
140
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Perlで痩せる
yuukis
1
660
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
490
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
漸進。
ssssota
0
1.3k
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Docker and Python
trallard
44
3.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Applications with DynamoDB
mza
95
6.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
85
A Tale of Four Properties
chriscoyier
159
23k
Why Our Code Smells
bkeepers
PRO
336
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Why we need Rich web application framework @yosuke_furukawa
͓ݺͼ͍͖ͨͩ͋Γ͕ͱ͏͝ ͍͟·͢ɻ
͜ͷͷͬͱਂ͍ॴ͕ฉ͖͍ͨͱฉ͍ͯ ͖·ͨ͠ɻ
ࠓ͢͜ͱ • Why React? • Why Redux? • Why Server
Side Rendering? • Why Backend For Frontend? • Why Consumer Driven Development? • How do we create rich applications? 5W 1H Ͱ͠·͢ɻ
Why React?
ྺ࢙తৼΓฦΓ
Backbone.js • ݴΘͣͱΕͨ Client-side MVC ͷϒʔϜՐ ͚ • jQuery ͕ϏϧτΠϯ͞Ε͍ͯͯɺඇৗʹݱ࣮
ղ • ࣮ࡍͬͯΔ͜ͱͳΜͩͬͨͷͩΖ͏͔
Backbone.js .PEFM 7JFX $POUSPMMFS ͍ͬͯΔ͜ͱͦͷ1: ަ௨ཧ
Backbone.js .PEFM 7JFX $POUSPMMFS σʔλͷ֨ೲݿ APIݺͼग़͠ͷϩδοΫ UIͷදݱ MͱVΛܨ͙ॾʑ
Backbone.js .PEFM 7JFX $POUSPMMFS σʔλͷ֨ೲݿ APIݺͼग़͠ͷϩδοΫ UIͷදݱ MͱVΛܨ͙ॾʑ jQueryͰϑΝΠϧ͚ͩͰΰχϣΰχϣॲཧ ͔ͯͨ࣌͠Βͷ٫
Backbone.js .PEFM 7JFX $POUSPMMFS ͍ͯΑʁʁ
Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ
Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ͑ͯ
Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ͑ͯ ViewΛม͑Δ
Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β
Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ͑ͯ
Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ͑ͯ Modelม͑Δ
Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ͑ͯ Modelม͑Δ ໘ʂʂʂʂʂ
Angular (v1) • ୈೋ Client-side MVC ϒʔϜͷՐ͚ • ํόΠϯσΟϯάͱ͍͏ثΛҾͬ͛͞ ͯొ
• MVCͰͳ͘ɺ MV Whatever ͩͱݴ͍ுͬ ͍ͯͨ
Angular .PEFM 7JFX 8IBUFWFS ͍ͬͯΔ͜ͱ: ํόΠϯσΟϯά
Angular .PEFM 7JFX 8IBUFWFS ViewΛࣗಈߋ৽ Modelม͑ͨΒ CJOEFS
Angular .PEFM 7JFX 8IBUFWFS ViewΛม͑ͨΒ ModelΛࣗಈߋ৽ CJOEFS
Angular .PEFM 7JFX 8IBUFWFS ViewΛม͑ͨΒ ModelΛࣗಈߋ৽ CJOEFS ָͪΜʂʂʂʂʂʂʂʂʂʂ
Angular .PEFM 7JFX 8IBUFWFS ͯΑʁʁʁʁ CJOEFS
Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS
Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS ΠϕϯτϧʔϓࣗͰ࣋ͬ ͯEJSUZDIFDLͯ͠·͢
Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS ΠϕϯτϧʔϓࣗͰ࣋ͬ ͯEJSUZDIFDLͯ͠·͢ વॏ͍
React • ୈࡾ࣍ϑϩϯτΤϯυϒʔϜͷՐ͚ • ԾDOMͱ͍͏ثΛҾͬ͛ͯ͞ొ • ࣮Backbone/AngularͱൺֱϨΠϠ͕ҧ͏ (ReactviewͷΈ) • ൺֱਥ͔ΒReactͱvsͰܨ͛Μͳͱౖ͔ΒΕΔࣄ
͋Δ
React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ͑ͯ ViewΛม͑Δ Backbone.js ͜Εͷ࣮ࡍԿ͕໘͔ͩͬͨ
React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ͑ͯ ViewΛม͑Δ Backbone.js 7JFX%0.ߏ %0.ͷதͰԿ͕มΘͬͨͷ͔ࣗͰ
KRVFSZͰΰϦΰϦॻ͍ͯ͘ඞཁ͕͋Δ
React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ͑ͯ ViewΛม͑Δ Backbone.js 7JFX%0.ߏ %0.ͷதͰԿ͕มΘͬͨͷ͔ࣗͰ
KRVFSZͰΰϦΰϦॻ͍ͯ͘ඞཁ͕͋Δ વى͖Δߋ৽࿙Εɺ વى͖Δແବͳߋ৽
React Before After VDOMͱݺΕΔπϦʔߏΛ͍࣋ͬͯͯɺͦͷߏ ಉ͕࢜ൺֱ͞ΕΔ͜ͱͰࣗಈతʹมߋՕॴΛผ͢Δ ID ID ID ID ID
ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID ID
React ঢ়ଶมߋ TFU4UBUF ͞ΕΔͱEJSUZqBH͕ ཱͪɺࢠϊʔυ͕࠶ඳըରʹͳΔ
React /PEFʹରͯ͠ঢ়ଶมߋ TFU4UBUF ͞ΕΔͱEJSUZqBH͕ ཱͪɺࢠϊʔυશ͕ͯ࠶ඳըରʹ ͳΔ
React ࢠϊʔυͷҰ෦࠶ඳըͤͨ͘͞ͳ ͍߹ TIPVME$PNQPOFOU6QEBUFΛ͑ ࠶ඳը͠ͳ͘ͳΔɻ
React ࢠϊʔυͷҰ෦࠶ඳըͤͨ͘͞ͳ ͍߹ TIPVME$PNQPOFOU6QEBUFΛ͑ ࠶ඳը͠ͳ͘ͳΔɻ ߋ৽࿙ΕͱແବΛ͙ ߏ
Why React? • ࣮DOMΛѻ͏ͷͰͳ͘ɺԾDOMΛѻ͏͜ ͱͰࡶͳϨϯμϦϯάΛͯ͠ແବͱ࿙ΕΛগ ͳ͘͢Δ • ࠓͷͱ͜ΖଞͷVueJSMithril͜ͷΞϓϩʔ νͰ͋ΓɺϒʔϜͷՐ͚ͱͯ͠ઌ಄Λͬ ͍ͯΔͨΊɺ͜͜Λத৺ʹΤίγεςϜ͕Γ
্͕ͬͯΔɻ
Why Redux?
OK, React͔ͬͨɻ Redux͍ͬͯ͏ͷͳΜͩͶ?
Reduxͷલʹ͑Α͏Flux Fluxͷલʹ͑Α͏ Observer Pattern
Observer Pattern • มߋݕ͢ΔΈ wikipedia ΑΓൈਮ
Observer Pattern • ཁมߋ͕͋ͬͨΒ؍ଌऀʹ͑ΔΈ • BackboneAngularʹ࣮ଘࡏ͢Δɻ Event௨ɺࢹͷΈ͕͋ΕՄೳɻ • addEventListener('click') ͜ΕΫϦοΫ͞Ε
ͨࣄΛݕ͢ΔΈ͕ͩɺ͜Εͦͷͷɻ
Flux • Flux ͜ͷ Observer Patternͷू߹ମ • Α͘ݟΔਤ
Flux • ઌఔղઆͨ͠ͱ͓Γ React ͨͩͷ View • View ʹมߋ௨͢ΔΈ͕ඞཁ •
ͦΕ͕Fluxͷ֓೦ͷ̍ͭStore ͜ΕͶ
Flux • FluxAction => Dispatcher => Store ͱൃੜ ͨ͠ΠϕϯτΛܨ͍͖͛ͯɺ React
ͷ view Λ ߋ৽͢ΔͨΊͷঢ়ଶɾΠϕϯτཧख๏ ϘλϯΫϦοΫ )551(&5 +40/ 4UPSFʹϚοϓ 4UPSF͕มߋ͞Ε ͨͷΛड͚ͯ 3FBDUߋ৽
Flux • Fluxͷࢀߟ࣮͕ facebook/flux • ͕ͩɺϓϦϛςΟϒ͗͢Δɻ • ؆୯ͳΞϓϦͳΒ͜ΕͰ͍͍͕ɺෳࡶͰେن ͳΛ࡞Δʹ͏গ͠ཧ͍͢͠ํ͕ ྑ͍
Redux • FluxͷֶʹԊͬͨܗ + ؔܕϓϩάϥϛϯ άͷimmutablitypure functional ͳ෦ͷ ΤοηϯεΛೖΕͨͷ •
ࡅ͚ͯݴ͏ͳΒؔܕFluxͱͰ໊͚Δͷ ͔
Redux • ֶͱͯ̏ͭ͠ • Singleton Store • State is read-only
• (state, action) => newState ྑ͞Λཧղ͠Α͏ͱ͢Δͱؔܕͷ ߟ͑ํ͕͍ΔͷͰͱΓ͋͑ͣॻ͍ͯΈͨํ͕ૣ͍
Redux • ͦΕͰઆ໌ͯ͠ΈΔ • Singleton Store • Storeʢͭ·Γঢ়ଶʣ͔̍ͭ͠ͳ͍ɺ͔͠৭Μͳॴ͔Β৮ΕΔΑ͏ʹͳ͍ͬͯ Δɻ •
State is read-only • ঢ়ଶͷมߋجຊతʹͰ͖ͳ͍ɺมߋ͢ΔͷReducerͷΈɻ • (state, action) => newState • ͔͠ Reducer ͕ͬͯΔͷঢ়ଶͷ"มߋ"Ͱͳ͍ɻݫີʹɺ৽͍͠ঢ়ଶΛ࡞ͬͯ Ϛοϐϯά͢Δʹ͍͠ɻ༰Λॻ͖͚͑ͨͩͰreduxมߋͨ͠ͱೝΊͯ͘Ε ͣɺ৽͍͠ΦϒδΣΫτΛฦ͢ඞཁ͕͋Δ
Redux • ͦΕͰઆ໌ͯ͠ΈΔ • Singleton Store • Storeʢͭ·Γঢ়ଶʣ͔̍ͭ͠ͳ͍ɺ͔͠৭Μͳॴ͔Β৮ΕΔΑ͏ʹͳ͍ͬͯ Δɻ •
State is read-only • ঢ়ଶͷมߋجຊతʹͰ͖ͳ͍ɺมߋ͢ΔͷReducerͷΈɻ • (state, action) => newState • ͔͠ Reducer ͕ͬͯΔͷঢ়ଶͷ"มߋ"Ͱͳ͍ɻݫີʹɺ৽͍͠ঢ়ଶΛ࡞ͬͯ Ϛοϐϯά͢Δʹ͍͠ɻ༰Λॻ͖͚͑ͨͩͰreduxมߋͨ͠ͱೝΊͯ͘Ε ͣɺ৽͍͠ΦϒδΣΫτΛฦ͢ඞཁ͕͋Δ ؆୯ʹݴͬͯ͠·͑ঢ়ଶͷ͕͍͢͠ɻ ్த͔Βউखʹঢ়ଶ͕ॻ͖͑ΒΕΔ͜ͱ͕ͳ͍ͷͰ σόοά͍͢͠ʢredux-devtoolsʣ
Redux • Frequently Asked Question: • Ͳ͜ʹϩδοΫΛॻ͘ΜͰ͠ΐ͏͔ʁ
Redux • Frequently Asked Question: • Ͳ͜ʹϩδοΫΛॻ͘ΜͰ͠ΐ͏͔ʁ • ͑ɿͦΜͳͷͳ͍
Redux • ͓લͷॻ͜͏ͱ͍ͯ͠ΔϩδοΫͱԿͩ • UIϩδοΫʁ => React ʹ͔͚ • ۀϩδοΫ?
=> αʔόαΠυʹݴ͑ • ۀͱUIͷதؒʁ => BFF (ޙड़) • ڧ͍ͯ͋͛ΔͳΒίί͔ɾɾɾʁ ͜͜
Why Redux? • ঢ়ଶͱΠϕϯτͷཧ • ReactͷviewʹObserver PatternΛͬͯมߋ Λ͑Δ • ReduxFluxʹ͞ΒʹؔܕͷΤοηϯεΛ
ͯ͠ঢ়ଶΛѻ͍ͨ͘͢͠ͷ
Why Server Side Rendering?
None
ϨΠςϯγ͍ͬͯ͏ͷ͕͋ΔΜͩΑɺϘέ
None
None
Server Side Rendering • Ͳ͜·Ͱ͘ͳͬͯϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘ Δ·Ͱͷ࣌ؒ)ͱ͍͏ͷ͕͋Δ • Boston <=> Stanford
ؒͳΒݱ࣌Ͱ 50ms • SPAॳظϖʔδͷϩʔυʹ͓͍ͯෆར
Why Server Side Rendering? • ॳظϨϯμϦϯά͕Α͘ͳΔ • SEOOGPλάରࡦͳͲΓ͘͢ͳΔ • ʢBFFͷʹଓ͘ʣ
Why Backend For Frontend?
Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide
Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide ͜ΕΛಡΊɺҎ্
Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT WebApps based on HTML
Client Server 'SPOUFOE -PHJDT #BDLFOE -PHJDT Partial SPA 'SPOUFOE -PHJDT
Client Server #BDLFOE -PHJDT Rich Single Page Web Apps 'SPOUFOE
-PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Backend For Frontend • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ • ͜͜࠷ۙΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳ ΣϒΞϓϦέʔγϣϯ͕૿͑ͨɻ • Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ͋
Γɺthin-Server / thick-Client ͳํʹͳ͍ͬͯΔ
͕ͩɺͬͯཉ͍͠ ຊʹͦΕΫϥΠΞϯτͷ ׂ͔Ͳ͏͔
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ͜͜Ͱ͍ͬͯΔ͜ͱɿ "1*ͷूॲཧ "1*ϨεϙϯεΛ6*༻ʹՃ "1*SFTQPOTF$BDIF $JSDVJU#SFBLFS FUD
ͳΜͰ͜͏ͳΔͷ͔
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ΫϥΠΞϯτɿ ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ ಠཱͨ͠ϏδωεϩδοΫΛ ఏڙ͢Δ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ΫϥΠΞϯτɿ ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ ಠཱͨ͠ϏδωεϩδοΫΛ ఏڙ͢Δ ͋ͱɺ৫ͷน
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ΫϥΠΞϯτຊདྷͷ6*ͷ ॲཧʹྗͰ͖Δ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ը໘Λߏங͢Δखॿ͚Λ͢Δ "1*ฒྻݺͼग़͠ $BDIFͨ͘͞Μ࣋ͯΔ 'JMF6QMPBE8FC4PDLFUFUD
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend using Node.js #BDLFOE -PHJDT <13>͜͜Λ/PEFKT ʹ͢Δͱͬͱ৭ΜͳϝϦοτ͕
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Ұ෦ͷ'SPOUFOE-PHJDΛڞ ௨ԽͰ͖Δ 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ը໘ͷWBMJEBUJPO )5.-ੜFUD 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Why Backend For Frontend? • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛܨ͙ௐఀ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ
• Cache͜͜ͷͰΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
Why Consumer Driven Contract?
Consumer Driven Contract • ैདྷόοΫΤϯυ (Provider)͕ܾΊ͍ͯͨ API ͷ༷ΛϑϩϯτΤϯυ(Consumer)͕ओಋ͠ ͯཁٻΛॻ͘(Contract)͜ͱͰ API
༷ΛܾΊ ͍ͯ͘ͱ͍͏ελΠϧͷ༷ࡦఆํ๏
Consumer Driven Contract • Contract Λఆٛ͢Δ(APIͷ༷ΛJSON͔Կ͔ Ͱॻ͘)
Consumer Driven Contract • هड़͞ΕͨϑΝΠϧΛͬͯmockͱͯ͠׆༻ ͢Δ
Consumer Driven Contract • mock͕ΫϥΠΞϯτͱͳΓɺProviderͷϨε ϙϯεΛνΣοΫ͢Δ
Consumer Driven Contract • ϑϩϯτΤϯυ͕͍͍͢APIʹͳΔ • ͬͪ͜ͷرΛͦͷ··࣮͍ͯ͠Δ͚ͩͰɺόο ΫΤϯυ͕ϋοϐʔʹͳΔ༁Ͱͳ͍ • ͪͳΈʹ࣮ફͯ͠Έͨॴɺ͜ΕΛͬͯίϛϡ
χέʔγϣϯίετ͕͍҆Θ͚Ͱͳ͔ͬͨʢͪΌ ΜͱίϛϡχέʔγϣϯΛऔΔඞཁ͋ͬͨʣ
Why Consumer Driven Contract • ैདྷ௨ΓͷΓํͰϑϩϯτΤϯυ։ൃͷ ߹͕ѱ͘ͳΔ • ͳΔ͘ͳΒɺΤϯυϢʔβʹ͍ۙॴͰAPI ༷ΛܾΊΔ͠
• Agreedͱ͍͏ϥΠϒϥϦΛͬͯmockΛॻ͘ ͜ͱͰCDC࣮ફՄೳ
How do we create rich applications?
How do we create rich applications? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ
ڭՊॻ
7 principles of Rich Web Applications • socket.io ͷ࡞ऀ •
Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • Googleͷྫ
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • CloudUpͷྫ
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯݶք͕͋Δ • ޫͷʹউͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰԠ͍ͯ͠ΔࣄΛද͢
ϢʔβʔͷೖྗʹਝʹԠ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯݶք͕͋Δ • ޫͷʹউͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰԠ͍ͯ͠ΔࣄΛද͢ • (͝·͔͢ͱݴ͏)
σʔλͷมߋʹԠ͢Δ • ߋ৽ॲཧΛߦΘͳ࣮ͯ͘ࡍʹσʔλΛಉظ ͢Δɻ • มߋ͕ൃੜͨ͠ΒͦͷσʔλΛมߋ͢Δɻ
historyΛյ͢ͳ
historyΛյ͢ͳ
historyΛյ͢ͳ
historyΛյ͢ͳ • ํ๏ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorage/sessionStorageͷݕ౼ͳͲ
ৼΔ͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ͑Ζ
ৼΔ͍Λ༧ଌ͠Α͏ • ແݶεΫϩʔϧ x ϖʔδઌಡΈ
ϓϩτλΠϓ
redux-proto ͱݺΕΔϓϩ τλΠϓ͕͋Δ ※ڵຯͷ͋Δਓ૬ஊͯ͘͠ ΕͨΒϦϙδτϦݟ͑ΔΑ͏ ʹ͠·͢
ΞϓϦέʔγϣϯߏஙΨΠυ
ΞϓϦέʔγϣϯͷߏஙΨΠ υϥΠϯΛ࡞தʂ ※΄΅ະணख ※ݹͷࠓظλεΫ
How do we create rich applications? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ ͣʣ
ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏