state-of-the-art-javascript

#stapy で話した JS 最前線の話です。

Transcript

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