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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
1
70
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.1k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
250
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
220
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
1.1k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
940
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
130
パスタの技術
yusukebe
1
380
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
300
Introduction to Git & GitHub
latte72
0
110
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
19
7.5k
tool ディレクティブを導入してみた感想
sgash708
1
110
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
140
kiroでゲームを作ってみた
iriikeita
0
170
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Embracing the Ebb and Flow
colly
86
4.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Site-Speed That Sticks
csswizardry
10
770
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A better future with KSS
kneath
239
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Six Lessons from altMBA
skipperchong
28
4k
Unsuck your backbone
ammeep
671
58k
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? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ ͣʣ
ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏