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
10
3.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
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.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
820
Other Decks in Programming
See All in Programming
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
220
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
JetBrainsのAI機能の紹介 #jjug
yusuke
0
120
CDK引数設計道場100本ノック
badmintoncryer
2
590
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
330
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
150
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
130
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
QA x AIエコシステム段階構築作戦
osu
0
220
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Balancing Empowerment & Direction
lara
1
510
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Producing Creativity
orderedlist
PRO
346
40k
Faster Mobile Websites
deanohume
308
31k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Docker and Python
trallard
45
3.5k
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? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ ͣʣ
ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏