frontend development on recruit tech

r-tech night vol.5 2017/3/8

Transcript

1. Frontend Develops on Recruit Tech 2017 8th March @r-tech night vol.5
2. @yosuke_furukawa ϦΫϧʔτςΫϊϩδʔζॴଐ γχΞιϑτ΢ΣΞΤϯδχΞ
3. <13>
   8FC %#
   1SFTT
   ݄߸
   ʹͯɺ3FBDUͷهࣄಛू
4. ࠓ೔ݴ͍͍ͨ͜ͱ ʮϑϨʔϜϫʔΫ͸࡞Δ΋ͷ ʹ߹Θͤͯ࡞Δʯ
5. ϦΫϧʔτͷWeb
6. ϦΫϧʔτͷWeb ݕࡧɹ some website
7. ϦΫϧʔτͷWeb ݕࡧɹ some website τοϓϖʔδʹݕࡧͰ͖ Δͱ͜Ζ͕͋ͬͯ ݕࡧ͢ΔͱϦετϏϡʔ ͕ग़ͯ ϦετΛΫϦοΫ͢Δͱ ৄࡉϖʔδ͕ग़Δ
8. ϦΫϧʔτͷWeb ݕࡧɹ some website τοϓϖʔδʹݕࡧͰ͖ Δͱ͜Ζ͕͋ͬͯ ݕࡧ͢ΔͱϦετϏϡʔ ͕ग़ͯ ϦετΛΫϦοΫ͢Δͱ ৄࡉϖʔδ͕ग़Δ యܕతͳ8FCαΠτ
9. ϦΫϧʔτͷWeb
 ʢ࠷ۙ͸͜͏͍͏ͷ΋૿͖͑ͯͨʣ chat
   
   
   
   
   
   
   YYYYYYY bbs
   
   
   
   
   
   YYYYYY Enquete 2
   YYYYYYYYY
   ˘ BBBBBBBBB
   ˘ CCCCCCCC
   ˘ DDDDDDDDD
   ˘ EEEEEEEE
10. ϦΫϧʔτͷWeb
 ʢ࠷ۙ͸͜͏͍͏ͷ΋૿͖͑ͯͨʣ chat
    
    
    
    
    
    
    YYYYYYY bbs
    
    
    
    
    
    YYYYYY Enquete 2
    YYYYYYYYY
    ˘ BBBBBBBBB
    ˘ CCCCCCCC
    ˘ DDDDDDDDD
    ˘ EEEEEEEE νϟοτͰ͖ͯ ܝࣔ൘ͰϝοηʔδʹϦ ΞΫγϣϯ෇͚ΒΕͯ Ξϯέʔτͱ͔Ͱ
    Ϣʔβʔͱίϛϡχέʔ γϣϯऔΕΔ
11. ϦΫϧʔτͷWeb
 ʢ࠷ۙ͸͜͏͍͏ͷ΋૿͖͑ͯͨʣ chat
    
    
    
    
    
    
    YYYYYYY bbs
    
    
    
    
    
    YYYYYY Enquete 2
    YYYYYYYYY
    ˘ BBBBBBBBB
    ˘ CCCCCCCC
    ˘ DDDDDDDDD
    ˘ EEEEEEEE νϟοτͰ͖ͯ ܝࣔ൘ͰϝοηʔδʹϦ ΞΫγϣϯ෇͚ΒΕͯ Ξϯέʔτͱ͔Ͱ
    Ϣʔβʔͱίϛϡχέʔ γϣϯऔΕΔ ΠϯλϥΫςΟϒͳ
    8FCΞϓϦ
12. WebαΠτͷཁ๬ • ͱʹ͔͘αΠτύϑΥʔϚϯε • Ұཡ͔Βݕࡧ͢Δਓ΋͍Δ͚Ͳৄࡉʹ௚઀ߦ ͘ਓ΋͍Δ(େମ༧໿αΠτܥ͸ৄࡉ > Ұཡ) ډञ԰༧໿ͨ͠Βৄࡉ 63-ΛγΣΞͯ͠ෆಛఆ ଟ਺ʹڞ༗͢ΔͨΊ
13. WebΞϓϦͷཁ๬ • Native ΞϓϦͬΆ͍ Look & Feel • Interactive ͳಈ͖(Chat ΍ ͍͍Ͷ௨஌౳) chat Like ཁ͸/BUJWFΞϓϦͱಉ͡ ಈ͖Λͯ͠΄͍͠
14. ϦΫϧʔτͷWebͷཁ๬ • αΠτܥ͸ύϑΥʔϚϯε • ΞϓϦܥ͸Look & Feel chat
15. ϦΫϧʔτͷWebͷཁ๬ • αΠτܥ͸ύϑΥʔϚϯε • ΞϓϦܥ͸Look & Feel chat ྆ऀͷཁ๬Λຬͨ͢ʹ͸͜Ε·Ͱͷ 8FCϑϨʔϜϫʔΫͰ͸ແཧ
16. Recruit Technologies Ͱ͸ React, Redux, Node.js Ͱ৽͘͠ϑϨʔϜϫʔΫ Λ࡞͍ͬͯΔ
17. Web αΠτͷࣄྫ DEMO
18. Web ΞϓϦͷࣄྫ DEMO
19. ϑϩϯτΤϯυΛ࡞Δ্Ͱ ؾΛ͚͍ͭͯΔࣄ
20. αʔόͰ΋ΫϥΠΞϯτͰ΋ ϨϯμϦϯά͢Δ
21. αʔόͰ΋ΫϥΠΞϯτͰ΋Ϩ ϯμϦϯά͢Δ • αʔόαΠυϨϯμϦϯάͱݺ͹ΕΔ΋ͷ • ΫϥΠΞϯτͱαʔόͰಉ͡ϩδοΫͰϨϯ μϦϯά͢Δ • ॳظදࣔͷվળʹޮՌ͋Γʢ͋ͱOGP΍SEO ౳ͷରԠ͕͠΍͍͢ʣ
22. ΫϥΠΞϯταΠυͰͷΈϨ ϯμϦϯάͨ͠৔߹ ʢॴҦSPAͷ৔߹ʣ
23. (&5
    BSUJDMFT loading… (&5
    BTTFUCVOEMFKT (&5
    BQJBSUJDMFT
24. αʔόαΠυϨϯμϦϯάͷ ৔߹
25. (&5
    BSUJDMFT loading… (&5
    BTTFUCVOEMFKT αʔόαΠυͰطʹσʔλΛGFUDI ͯ͠)5.-ΛߏஙࡁΈͷͨΊߴ଎ ࣍Ҏ߱ͷϦΫΤετ͸"1*ܦ༝Ͱ
    ΫϥΠΞϯταΠυϨϯμϦϯά͢Δ
26. (&5
    BSUJDMFT loading… (&5
    BTTFUCVOEMFKT αʔόαΠυͰطʹσʔλΛGFUDI ͯ͠)5.-ΛߏஙࡁΈͷͨΊߴ଎ ࣍Ҏ߱ͷϦΫΤετ͸"1*ܦ༝Ͱ
    ΫϥΠΞϯταΠυϨϯμϦϯά͢Δ ॳظදࣔ଎౓্͕͕Δ
27. DEMO
28. αʔόαΠυϨϯμϦϯά • ॳظදࣔ଎౓ͷվળͱϨϯμϦϯά͞Εͨޙ ͷ෦෼ϨϯμϦϯάΛ͢Δٕज़ • ճ༡தͷϢʔβʔͷUX΋ॳظදࣔͷ଎౓΋վ ળͰ͖Δ • ݕࡧͯ͠Ұཡදࣔ͢Δૢ࡞΋ৄࡉ͚ͩΛදࣔ ͢Δૢ࡞΋ύϑΥʔϚϯεΛ޲্ͤ͞΍͍͢
29. αʔόαΠυϨϯμϦϯά • ͨͩ͠ɺ஫ҙ఺΋͋Δ • ಛʹࠓͷReactͷαʔόαΠυϨϯμϦϯά͸ॏ ͍(ϨϯμϦϯά͚ͩͰ100msͱ͔͔͔Δ৔߹΋͋ Δ) • ͔͠΋͜ͷॲཧ͸ඇಉظͰ͸ͳ͍ͷͰblocking͞ ΕΔ
30. αʔόαΠυϨϯμϦϯά • ͜ΕΛճආ͢ΔͨΊʹɿ • ϨϯμϦϯά݁ՌΛҰ࣌తʹΩϟογϡ͍ͯ͠Δʢϓ ϩηε಺Ωϟογϡ (nginxͷcache dirʹอଘ΋ݕ ౼த)) • Above the fold ͷΈϨϯμϦϯάͤͯ͞αʔόαΠ υϨϯμϦϯάΛݶఆతʹߦ͏ඞཁ͕͋Δ(ະݕূ)
31. HistoryΛյ͞ͳ͍
32. HistoryΛյ͞ͳ͍ • ໭ΔɾਐΉΛͨ࣌͠ʹҎલʹݟͯͨঢ়ଶ͕ͪΌ Μͱ෮ݩ͞ΕΔ • ౰વͱ͍͑͹౰વ • ͨͩ͠ɺͰ͖͍ͯΔαΠτ͸গͳ͍
33. History ͕յΕͯΔαΠτྫ
34. History ͕յΕͯΔαΠτྫ εΫϩʔϧҐஔ่͕ΕΔࣄҊ
35. εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝ ໭Δ
36. ໭Δ ద౰ͳҐஔʹεΫϩʔϧ ͔ͯ͠Βผͳϖʔδʹભ Ҡ͢Δ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
37. ໭Δ ભҠͨ͠ϖʔδ͔Β໭Δ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
38. ໭Δ ໭ͬͨ࣌ʹ͸ݩͷ)5.-͸ফ͑ͯ ͍Δʢ+BWB4DSJQUͰ)5.-͕ߏங ͞ΕΔલʹOBWJHBUF͞ΕΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
39. ໭Δ ͜ͷ࣌ʹϒϥ΢β͸ݩͷεΫϩʔ ϧҐஔΛ֮͑ͯΔ͕ɺ)5.-͕׬ શʹϨϯμϦϯά͞Ε͍ͯͳ͍ͷ ͰҐஔ͕࠶ݱ͞Εͳ͍ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
40. ໭Δ Ґஔ͕࠶ݱͰ͖ͳ͍ͷͰɺεΫϩʔ ϧҐஔ͸)5.-͕දࣔͰ͖͍ͯΔ ॴ·ͰʹͳΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
41. ճආࡦ ໭ΔɾਐΉΛͨ࣌͠ʹσʔλ ಡΈࠐΈத͸ϨϯμϦϯάΛ εΩοϓͤ͞Ε͹ྑ͍
42. ໭Δ ໭Δ࣌ʹBKBYͷ࠶ϦΫΤετ͕૸ Δɺ࠶ϦΫΤετ͕૸͍ͬͯΔؒ ͸ϨϯμϦϯάͤͣ͞ɺϨεϙϯε ͕ฦ͖͔ͬͯͯΒϨϯμϦϯά͞ ͤΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
43. DEMO
44. Consumer Driven Contract Ͱ։ൃ͢Δ
45. Consumer Driven Contract • ैདྷόοΫΤϯυ (Provider)͕ܾΊ͍ͯͨ API ͷ࢓༷ΛϑϩϯτΤϯυ(Consumer)͕ओಋ͠ ͯཁٻΛॻ͘(Contract)͜ͱͰ API ࢓༷ΛܾΊ ͍ͯ͘ͱ͍͏ελΠϧͷ࢓༷ࡦఆํ๏
46. Consumer Driven Contract • Contract Λఆٛ͢Δ(APIͷ࢓༷ΛJSON͔Կ͔ Ͱॻ͘)
47. Consumer Driven Contract • هड़͞ΕͨϑΝΠϧΛ࢖ͬͯmockͱͯ͠׆༻ ͢Δ
48. Consumer Driven Contract • mock͕ΫϥΠΞϯτͱͳΓɺProviderͷϨε ϙϯεΛνΣοΫ͢Δ
49. Consumer Driven Contract • ϑϩϯτΤϯυ͕࢖͍΍͍͢APIʹͳΔ • ͬͪ͜ͷر๬Λͦͷ··࣮૷͍ͯ͠Δ͚ͩͰɺόο ΫΤϯυ͕ϋοϐʔʹͳΔ༁Ͱ͸ͳ͍ • ͪͳΈʹ࣮ફͯ͠Έͨॴɺ͜ΕΛ࢖ͬͯ΋ίϛϡ χέʔγϣϯίετ͕͍҆Θ͚Ͱ͸ͳ͔ͬͨʢͪΌ ΜͱίϛϡχέʔγϣϯΛऔΔඞཁ͸͋ͬͨʣ
50. DEMO
51. Why Consumer Driven Contract • ैདྷ௨Γͷ΍ΓํͰ͸ϑϩϯτΤϯυ։ൃͷ౎ ߹͕ѱ͘ͳΔ • ͳΔ΂͘ͳΒɺΤϯυϢʔβʹ͍ۙॴͰAPI࢓ ༷ΛܾΊΔ΂͠ • Agreedͱ͍͏ϥΠϒϥϦΛ࢖ͬͯmockΛॻ͘ ͜ͱͰCDC͸࣮ફՄೳ
52. Ͳ͏΍ͬͯ޿ΊΔ͔
53. Ͳ͏΍ͬͯ޿ΊΔ͔ʁ • ࣄྫΛ࡞͍ͬͯͬͯ޿ΊΔ • ڭҭͯ͠޿ΊΔ • ڭՊॻ • ϓϩτλΠϓ • ΞϓϦέʔγϣϯߏஙΨΠυ
54. ڭՊॻ
55. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
56. 7 principles of Rich Web Applications • socket.io ͷ࡞ऀ • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 ͜ͷݪଇʹैͬͯ࡞Δ
57. ϓϩτλΠϓ
58. ϓϩτλΠϓ • React / Redux / Node.js ͷ࣮૷ྫूΛ࡞͍ͬͯ Δ • react-router ΍ແݶεΫϩʔϧͳͲΛ࢖ͬͨࢀ ߟ࣮૷΋ؚ·Ε͍ͯΔ • Living Recruit Standard ͱͯ͠ৗʹ࠷৽ͷϥΠ ϒϥϦʹ௥ै͍ͯ͘͠༧ఆɻ
59. ΞϓϦέʔγϣϯߏஙΨΠυ
60. ΞϓϦέʔγϣϯߏஙΨΠυ • Ӷҙ࡞੒தʂʂʂʂ • ख͕଍Γͯͳ͍ • Ұॹʹ࡞͍ͬͯ͘ਓืूதʂʂʂʂʂ
61. ॿ͚͍ͯͩ͘͞ʂʂʂʂʂʂ
62. Thank you