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
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
160
ML.NETで始める機械学習
ymd65536
0
230
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
350
Jasprが凄い話
hyshu
0
120
PRレビューのお供にDanger
stoticdev
1
230
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Open source software: how to live long and go far
gaelvaroquaux
0
660
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
140
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
Jakarta EE meets AI
ivargrimstad
0
310
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
260
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building Adaptive Systems
keathley
40
2.4k
Embracing the Ebb and Flow
colly
84
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimizing for Happiness
mojombo
376
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ ͣʣ
ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏