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
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Open source software: how to live long and go far
gaelvaroquaux
0
660
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
310
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
230
技術を改善し続ける
gumioji
0
120
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
120
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
4k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Review Best Practice
trishagee
67
18k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
How to Ace a Technical Interview
jacobian
276
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Fireside Chat
paigeccino
34
3.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
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? • ڭՊॻ • ϓϩτλΠϓ
• ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ ͣʣ
ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏