why we need rich webapps @ recruit marketing partners meetup 1/25

recruit marketing partners meetup で話した奴です

Transcript

1. Why we need Rich web application framework @yosuke_furukawa
2. ͓ݺͼ͍͖ͨͩ͋Γ͕ͱ͏͝ ͍͟·͢ɻ
3. ͜ͷ࿩ͷ΋ͬͱਂ͍ॴ͕ฉ͖͍ͨͱฉ͍ͯ ͖·ͨ͠ɻ
4. ࠓ೔࿩͢͜ͱ • Why React? • Why Redux? • Why Server Side Rendering? • Why Backend For Frontend? • Why Consumer Driven Development? • How do we create rich applications? 5W 1H Ͱ࿩͠·͢ɻ
5. Why React?
6. ྺ࢙తৼΓฦΓ
7. Backbone.js • ݴΘͣͱ஌Εͨ Client-side MVC ͷϒʔϜՐ෇ ͚໾ • jQuery ͕ϏϧτΠϯ͞Ε͍ͯͯɺඇৗʹݱ࣮ ղ • ࣮ࡍ΍ͬͯΔ͜ͱ͸ͳΜͩͬͨͷͩΖ͏͔
8. Backbone.js .PEFM 7JFX $POUSPMMFS ΍͍ͬͯΔ͜ͱͦͷ1: ަ௨੔ཧ
9. Backbone.js .PEFM 7JFX $POUSPMMFS σʔλͷ֨ೲݿ APIݺͼग़͠౳ͷϩδοΫ UIͷදݱ MͱVΛܨ͙ॾʑ
10. Backbone.js .PEFM 7JFX $POUSPMMFS σʔλͷ֨ೲݿ APIݺͼग़͠౳ͷϩδοΫ UIͷදݱ MͱVΛܨ͙ॾʑ jQueryͰ਺ϑΝΠϧ͚ͩͰΰχϣΰχϣॲཧ ͯͨ࣌͠୅͔Βͷ୤٫
11. Backbone.js .PEFM 7JFX $POUSPMMFS ͍΍଴ͯΑʁʁ
12. Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ
13. Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ఻͑ͯ
14. Backbone.js .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ఻͑ͯ ViewΛม͑Δ
15. Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β
16. Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ఻͑ͯ
17. Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ఻͑ͯ Modelม͑Δ
18. Backbone.js .PEFM 7JFX $POUSPMMFS ViewΛߋ৽ͨ͠Β Controllerʹ఻͑ͯ Modelม͑Δ ໘౗ʂʂʂʂʂ
19. Angular (v1) • ୈೋ Client-side MVC ϒʔϜͷՐ෇͚໾ • ૒ํ޲όΠϯσΟϯάͱ͍͏෢ثΛҾͬ͛͞ ͯొ৔ • MVCͰ͸ͳ͘ɺ MV Whatever ͩͱݴ͍ுͬ ͍ͯͨ
20. Angular .PEFM 7JFX 8IBUFWFS ΍͍ͬͯΔ͜ͱ: ૒ํ޲όΠϯσΟϯά
21. Angular .PEFM 7JFX 8IBUFWFS ViewΛࣗಈߋ৽ Modelม͑ͨΒ CJOEFS
22. Angular .PEFM 7JFX 8IBUFWFS ViewΛม͑ͨΒ ModelΛࣗಈߋ৽ CJOEFS
23. Angular .PEFM 7JFX 8IBUFWFS ViewΛม͑ͨΒ ModelΛࣗಈߋ৽ CJOEFS ָͪΜʂʂʂʂʂʂʂʂʂʂ
24. Angular .PEFM 7JFX 8IBUFWFS ଴ͯΑʁʁʁʁ CJOEFS
25. Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS
26. Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS Πϕϯτϧʔϓࣗ෼Ͱ࣋ͬ ͯEJSUZ
    
    DIFDL
    ͯ͠·͢
27. Angular .PEFM 7JFX 8IBUFWFS ͓લ୭Αʁ Կͯ͠ΜͷΑʁ CJOEFS Πϕϯτϧʔϓࣗ෼Ͱ࣋ͬ ͯEJSUZ
    
    DIFDL
    ͯ͠·͢ ౰વॏ͍
28. React • ୈࡾ࣍ϑϩϯτΤϯυϒʔϜͷՐ෇͚໾ • Ծ૝DOMͱ͍͏෢ثΛҾͬ͛ͯ͞ొ৔ • ࣮͸Backbone/Angularͱ͸ൺֱϨΠϠ͕ҧ͏
 (React͸viewͷΈ) • ൺֱਥ͔Β͸ReactͱvsͰܨ͛Μͳͱౖ͔ΒΕΔࣄ΋ ͋Δ
29. React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ఻͑ͯ ViewΛม͑Δ Backbone.js ͜Εͷ࣮ࡍԿ͕໘౗͔ͩͬͨ
30. React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ఻͑ͯ ViewΛม͑Δ Backbone.js 7JFX͸%0.ߏ଄
    %0.ͷதͰԿ͕มΘͬͨͷ͔͸ࣗ෼Ͱ KRVFSZ
    ͰΰϦΰϦॻ͍ͯ͘ඞཁ͕͋Δ
31. React .PEFM 7JFX $POUSPMMFS ModelมΘͬͨΒ Controllerʹ఻͑ͯ ViewΛม͑Δ Backbone.js 7JFX͸%0.ߏ଄
    %0.ͷதͰԿ͕มΘͬͨͷ͔͸ࣗ෼Ͱ KRVFSZ
    ͰΰϦΰϦॻ͍ͯ͘ඞཁ͕͋Δ ౰વى͖Δߋ৽࿙Εɺ ౰વى͖Δແବͳߋ৽
32. 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
33. React ঢ়ଶมߋ TFU4UBUF 
 ͞ΕΔͱEJSUZ
    qBH͕
    ཱͪɺࢠϊʔυ͕࠶ඳըର৅ʹͳΔ
34. React /PEFʹରͯ͠ঢ়ଶมߋ TFU4UBUF 
 ͞ΕΔͱEJSUZ
    qBH͕
    ཱͪɺࢠϊʔυશ͕ͯ࠶ඳըର৅ʹ ͳΔ
35. React ࢠϊʔυͷҰ෦͸࠶ඳըͤͨ͘͞ͳ ͍৔߹͸ TIPVME$PNQPOFOU6QEBUFΛ࢖͑ ͹࠶ඳը͠ͳ͘ͳΔɻ
36. React ࢠϊʔυͷҰ෦͸࠶ඳըͤͨ͘͞ͳ ͍৔߹͸ TIPVME$PNQPOFOU6QEBUFΛ࢖͑ ͹࠶ඳը͠ͳ͘ͳΔɻ ߋ৽࿙ΕͱແବΛ๷͙ ߏ଄
37. Why React? • ࣮DOMΛѻ͏ͷͰ͸ͳ͘ɺԾ૝DOMΛѻ͏͜ ͱͰࡶͳϨϯμϦϯάΛͯ͠΋ແବͱ࿙ΕΛগ ͳ͘͢Δ • ࠓͷͱ͜ΖଞͷVueJS΍Mithril΋͜ͷΞϓϩʔ νͰ͋ΓɺϒʔϜͷՐ෇͚໾ͱͯ͠ઌ಄Λ૸ͬ ͍ͯΔͨΊɺ͜͜Λத৺ʹΤίγεςϜ͕੝Γ ্͕ͬͯΔɻ
38. Why Redux?
39. OK, React͸෼͔ͬͨɻ Redux͍ͬͯ͏ͷ͸ͳΜͩͶ?
40. Reduxͷલʹ཈͑Α͏Flux Fluxͷલʹ཈͑Α͏ Observer Pattern
41. Observer Pattern • มߋݕ஌͢Δ࢓૊Έ wikipedia ΑΓൈਮ
42. Observer Pattern • ཁ͸มߋ͕͋ͬͨΒ؍ଌऀʹ఻͑Δ࢓૊Έ • Backbone΍Angularʹ΋࣮͸ଘࡏ͢Δɻ Event௨஌ɺ؂ࢹͷ࢓૊Έ͕͋Ε͹Մೳɻ • addEventListener('click') ͜Ε͸ΫϦοΫ͞Ε ͨࣄΛݕ஌͢Δ࢓૊Έ͕ͩɺ͜Εͦͷ΋ͷɻ
43. Flux • Flux ͸͜ͷ Observer Patternͷू߹ମ • Α͘ݟΔਤ
44. Flux • ઌఔղઆͨ͠ͱ͓Γ React ͸ͨͩͷ View • View ʹมߋ௨஌͢Δ࢓૊Έ͕ඞཁ • ͦΕ͕Fluxͷ֓೦ͷ̍ͭStore ͜ΕͶ
45. Flux • Flux͸Action => Dispatcher => Store ͱൃੜ ͨ͠ΠϕϯτΛܨ͍͖͛ͯɺ React ͷ view Λ ߋ৽͢ΔͨΊͷঢ়ଶɾΠϕϯτ؅ཧख๏ ϘλϯΫϦοΫ )551
    (&5 +40/ 4UPSFʹϚοϓ 4UPSF͕มߋ͞Ε ͨͷΛड͚ͯ 3FBDUߋ৽
46. Flux • Fluxͷࢀߟ࣮૷͕ facebook/flux • ͕ͩɺϓϦϛςΟϒ͗͢Δɻ • ؆୯ͳΞϓϦͳΒ͜ΕͰ͍͍͕ɺෳࡶͰେن ໛ͳ෺Λ࡞Δʹ͸΋͏গ͠؅ཧ͠΍͍͢ํ͕ ྑ͍
47. Redux • Fluxͷ఩ֶʹԊͬͨܗ + ؔ਺ܕϓϩάϥϛϯ άͷimmutablity΍pure functional ͳ෦෼ͷ ΤοηϯεΛೖΕͨ΋ͷ • ࡅ͚ͯݴ͏ͳΒؔ਺ܕFluxͱͰ΋໊෇͚Δͷ ͔
48. Redux • ఩ֶͱͯ͠͸̏ͭ • Singleton Store • State is read-only • (state, action) => newState ྑ͞Λཧղ͠Α͏ͱ͢Δͱؔ਺ܕͷ ߟ͑ํ͕͍ΔͷͰͱΓ͋͑ͣॻ͍ͯΈͨํ͕ૣ͍
49. Redux • ͦΕͰ΋આ໌ͯ͠ΈΔ • Singleton Store • Storeʢͭ·Γ͸ঢ়ଶʣ͸͔̍ͭ͠ͳ͍ɺ͔͠΋৭Μͳॴ͔Β৮ΕΔΑ͏ʹͳ͍ͬͯ Δɻ • State is read-only • ঢ়ଶͷมߋ͸جຊతʹͰ͖ͳ͍ɺมߋ͢Δͷ͸ReducerͷΈɻ • (state, action) => newState • ͔͠΋ Reducer ͕΍ͬͯΔͷ͸ঢ়ଶͷ"มߋ"Ͱ͸ͳ͍ɻݫີʹ͸ɺ৽͍͠ঢ়ଶΛ࡞ͬͯ Ϛοϐϯά͢Δʹ౳͍͠ɻ಺༰Λॻ͖׵͚͑ͨͩͰ͸redux͸มߋͨ͠ͱೝΊͯ͘Ε ͣɺ৽͍͠ΦϒδΣΫτΛฦ͢ඞཁ͕͋Δ
50. Redux • ͦΕͰ΋આ໌ͯ͠ΈΔ • Singleton Store • Storeʢͭ·Γ͸ঢ়ଶʣ͸͔̍ͭ͠ͳ͍ɺ͔͠΋৭Μͳॴ͔Β৮ΕΔΑ͏ʹͳ͍ͬͯ Δɻ • State is read-only • ঢ়ଶͷมߋ͸جຊతʹͰ͖ͳ͍ɺมߋ͢Δͷ͸ReducerͷΈɻ • (state, action) => newState • ͔͠΋ Reducer ͕΍ͬͯΔͷ͸ঢ়ଶͷ"มߋ"Ͱ͸ͳ͍ɻݫີʹ͸ɺ৽͍͠ঢ়ଶΛ࡞ͬͯ Ϛοϐϯά͢Δʹ౳͍͠ɻ಺༰Λॻ͖׵͚͑ͨͩͰ͸redux͸มߋͨ͠ͱೝΊͯ͘Ε ͣɺ৽͍͠ΦϒδΣΫτΛฦ͢ඞཁ͕͋Δ ؆୯ʹݴͬͯ͠·͑͹ঢ়ଶͷ௥੻͕͠΍͍͢ɻ ్த͔Βউखʹঢ়ଶ͕ॻ͖׵͑ΒΕΔ͜ͱ͕ͳ͍ͷͰ σόοά΋͠΍͍͢ʢredux-devtoolsʣ
51. Redux • Frequently Asked Question: • Ͳ͜ʹϩδοΫΛॻ͘ΜͰ͠ΐ͏͔ʁ
52. Redux • Frequently Asked Question: • Ͳ͜ʹϩδοΫΛॻ͘ΜͰ͠ΐ͏͔ʁ • ౴͑ɿͦΜͳ΋ͷ͸ͳ͍
53. Redux • ͓લͷॻ͜͏ͱ͍ͯ͠ΔϩδοΫͱ͸Կͩ • UIϩδοΫʁ => React ʹ͔͚ • ۀ຿ϩδοΫ? => αʔόαΠυʹݴ͑ • ۀ຿ͱUIͷதؒʁ => BFF (ޙड़) • ڧ͍ͯ͋͛ΔͳΒίί͔ɾɾɾʁ ͜͜
54. Why Redux? • ঢ়ଶͱΠϕϯτͷ؅ཧ • ReactͷviewʹObserver PatternΛ࢖ͬͯมߋ Λ఻͑Δ໾໨ • Redux͸Fluxʹ͞Βʹؔ਺ܕͷΤοηϯεΛ ଍ͯ͠ঢ়ଶΛѻ͍΍ͨ͘͢͠΋ͷ
55. Why Server Side Rendering?
57. ϨΠςϯγ͍ͬͯ͏ͷ͕͋ΔΜͩΑɺϘέ
60. Server Side Rendering • Ͳ͜·Ͱ଎͘ͳͬͯ΋ϨΠςϯγ(ߦ͔ͬͯΒؼͬͯ͘ Δ·Ͱͷ࣌ؒ)ͱ͍͏΋ͷ͕͋Δ • Boston <=> Stanford ؒͳΒݱ࣌఺Ͱ΋
 ໿50ms • SPA͸ॳظϖʔδͷϩʔυʹ͓͍ͯ͸ෆར
61. Why Server Side Rendering? • ॳظϨϯμϦϯά͕Α͘ͳΔ • SEO΍OGPλάରࡦͳͲ΍Γ΍͘͢ͳΔ • ʢBFFͷ࿩ʹଓ͘ʣ
62. Why Backend For Frontend?
63. Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide
64. Isomorphic Survival Guide by @koichik https://speakerdeck.com/koichik/isomorphic-survival-guide ͜ΕΛಡΊɺҎ্
65. Client Server 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT WebApps based on HTML
66. Client Server 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT Partial SPA 'SPOUFOE
    -PHJDT
67. Client Server #BDLFOE
    -PHJDT Rich Single Page Web Apps 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT
68. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT
69. Backend For Frontend • ClientͱServerͰϩδοΫ͕ߦͬͨΓདྷͨΓ͍ͯ͠Δ • ͜͜࠷ۙ͸ΫϥΠΞϯτͷϦιʔε͕૿͑ɺRichͳ ΢ΣϒΞϓϦέʔγϣϯ͕૿͑ͨɻ • Server͕ϚΠΫϩαʔϏεͳͲͰAPIԽ͢ΔྲྀΕ΋͋ Γɺthin-Server / thick-Client ͳํ޲ʹͳ͍ͬͯΔ
70. ͕ͩɺ଴ͬͯཉ͍͠ ຊ౰ʹͦΕ͸ΫϥΠΞϯτͷ ໾ׂ͔Ͳ͏͔
71. 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
72. 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
73. ͳΜͰ͜͏ͳΔͷ͔
74. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ
75. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT ΫϥΠΞϯτɿ
    ը໘ͱಈ͖Λ࡞Δɻ αʔόʔɿ
    ಠཱͨ͠ϏδωεϩδοΫΛ
    ఏڙ͢Δ ͋ͱɺ૊৫ͷน
76. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT
77. 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
78. 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*૚ͷ ॲཧʹ஫ྗͰ͖Δ
79. 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
80. 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
    
    ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕
81. 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
82. 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
83. Why Backend For Frontend? • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾ • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
84. Why Consumer Driven Contract?
85. Consumer Driven Contract • ैདྷόοΫΤϯυ (Provider)͕ܾΊ͍ͯͨ API ͷ࢓༷ΛϑϩϯτΤϯυ(Consumer)͕ओಋ͠ ͯཁٻΛॻ͘(Contract)͜ͱͰ API ࢓༷ΛܾΊ ͍ͯ͘ͱ͍͏ελΠϧͷ࢓༷ࡦఆํ๏
86. Consumer Driven Contract • Contract Λఆٛ͢Δ(APIͷ࢓༷ΛJSON͔Կ͔ Ͱॻ͘)
87. Consumer Driven Contract • هड़͞ΕͨϑΝΠϧΛ࢖ͬͯmockͱͯ͠׆༻ ͢Δ
88. Consumer Driven Contract • mock͕ΫϥΠΞϯτͱͳΓɺProviderͷϨε ϙϯεΛνΣοΫ͢Δ
89. Consumer Driven Contract • ϑϩϯτΤϯυ͕࢖͍΍͍͢APIʹͳΔ • ͬͪ͜ͷر๬Λͦͷ··࣮૷͍ͯ͠Δ͚ͩͰɺόο ΫΤϯυ͕ϋοϐʔʹͳΔ༁Ͱ͸ͳ͍ • ͪͳΈʹ࣮ફͯ͠Έͨॴɺ͜ΕΛ࢖ͬͯ΋ίϛϡ χέʔγϣϯίετ͕͍҆Θ͚Ͱ͸ͳ͔ͬͨʢͪΌ ΜͱίϛϡχέʔγϣϯΛऔΔඞཁ͸͋ͬͨʣ
90. Why Consumer Driven Contract • ैདྷ௨Γͷ΍ΓํͰ͸ϑϩϯτΤϯυ։ൃͷ౎ ߹͕ѱ͘ͳΔ • ͳΔ΂͘ͳΒɺΤϯυϢʔβʹ͍ۙॴͰAPI࢓ ༷ΛܾΊΔ΂͠ • Agreedͱ͍͏ϥΠϒϥϦΛ࢖ͬͯmockΛॻ͘ ͜ͱͰCDC͸࣮ફՄೳ
91. How do we create rich applications?
92. How do we create rich applications? • ڭՊॻ • ϓϩτλΠϓ • ΞϓϦέʔγϣϯߏஙΨΠυ
93. ڭՊॻ
94. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
95. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • Googleͷྫ
96. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • CloudUpͷྫ
97. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢
98. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͢ Δ • ͲΜͳʹϨΠςϯγΛԼ͛ͯ΋ݶք͕͋Δ • ޫͷ଎౓ʹ͸উͯͳ͍ • Ұ୴ΫϥΠΞϯτଆͰ൓Ԡ͍ͯ͠ΔࣄΛද͢ • (͝·͔͢ͱ΋ݴ͏)
99. σʔλͷมߋʹ൓Ԡ͢Δ • ߋ৽ॲཧΛߦΘͳͯ͘΋࣮ࡍʹσʔλΛಉظ ͢Δɻ • มߋ͕ൃੜͨ͠Βͦͷ౎౓σʔλΛมߋ͢Δɻ
100. historyΛյ͢ͳ
101. historyΛյ͢ͳ
102. historyΛյ͢ͳ
103. historyΛյ͢ͳ • ํ๏࿦ • historyͷ֦ுΛݕ౼͢Δ • history.pushState/popState/replaceState • localStorage/sessionStorageͷݕ౼ͳͲ
104. ৼΔ෣͍Λ༧ଌ͠Α͏ • ϨΠςϯγʔͷนΛ௒͑Ζ
105. ৼΔ෣͍Λ༧ଌ͠Α͏ • ແݶεΫϩʔϧ x ϖʔδઌಡΈ
106. ϓϩτλΠϓ
107. redux-proto ͱݺ͹ΕΔϓϩ τλΠϓ͕͋Δ ※ڵຯͷ͋Δਓ͸૬ஊͯ͘͠ ΕͨΒϦϙδτϦݟ͑ΔΑ͏ ʹ͠·͢
108. ΞϓϦέʔγϣϯߏஙΨΠυ
109. ΞϓϦέʔγϣϯͷߏஙΨΠ υϥΠϯΛ࡞੒தʂ ※΄΅ະணख ※ݹ઒ͷࠓظλεΫ
110. How do we create rich applications? • ڭՊॻ • ϓϩτλΠϓ • ΞϓϦέʔγϣϯߏஙΨΠυ • ͜ͷ̏ͭΛݟΕͨΒ΄΅࡞ΕΔΑ͏ʹͳΔʢ͸ ͣʣ
111. ΈΜͳͰ࡞͍͖ͬͯ·͠ΐ͏