攻めつづける FRESH! のWeb ver.新春

#insideFE #insideFE_B
15:40〜 のセッションです。

Inside Frontend : https://inside-frontend.com/#seminar-b3

Transcript

1. ߈Ί͚ͭͮΔ FRESH! ͷWeb
   @su.wo
   INSIDE FRONTEND #2 2018.2.11
   ver. ৽य़
   

   View Slide

2. • su.wo / su.wo_
   •Front-end engineer
   •CyberAgent, Inc.
   •FRESH!
   

   View Slide

3. •ੜ์ૹϓϥοτϑΥʔϜ
   •ϑϩϯτνʔϜ͸PCͱSPϒϥ΢βɺ഑৴ը໘
   

   View Slide

4. •ੜ์ૹϓϥοτϑΥʔϜ
   •ϑϩϯτνʔϜ͸PCͱSPϒϥ΢βɺ഑৴ը໘
   

   View Slide

5. •ϥΠϒϑΝϯσΟϯάػೳͷ։ൃத৺
   hNps:/
   /daily.freshlive.tv/posts/3378766
   •FullHDͰͷੜ഑৴͕Մೳʹ
   hNps:/
   /www.cyberagent.co.jp/news/detail/id=21288
   •4Kղ૾౓΁ͷߴը࣭ରԠ΋༧ఆ
   hNps:/
   /www.cyberagent.co.jp/news/detail/id=21239
   

   View Slide

6. 1. Payment Request API ͷಋೖ
   2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
   3. Puppeteer Λ࢖ͬͨ E2E ςετ
   4. ͦͷଞͷऔΓ૊Έ
   Agenda
   

   View Slide

7. 1. Payment Request API ͷಋೖ
   2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
   3. Puppeteer Λ࢖ͬͨ E2E ςετ
   4. ͦͷଞͷऔΓ૊Έ
   Agenda
   

   View Slide

8. View Slide

9. - FRESH! ͷαʔϏε಺ͰίΠϯΛߪೖ
   - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ
   - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ
   ϥΠϒϑΝϯσΟϯάͱ͸
   

   View Slide

10. - FRESH! ͷαʔϏε಺ͰίΠϯΛߪೖ
    - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ
    - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ
    ϥΠϒϑΝϯσΟϯάͱ͸
    

    View Slide

11. ैདྷͷํ๏
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. - GMO ϖΠϝϯτήʔτ΢ΣΠͷαΠτ΁ભҠ
    - FRESH! ͰΧʔυ৘ใ͸อ࣋͠ͳ͍
    

    View Slide

16. - ೃછΈ͋Δख๏
    - ߪೖͷ౓ʹผυϝΠϯ΁ભҠ
    - ςϯϓϨʔτͷߋ৽͕໘౗ (ϩάɾσβΠϯ)
    

    View Slide

17. FRESH! ʹΧʔυ৘ใ͕อ࣋͞Εͯ͠·͏ҹ৅
    

    View Slide

18. - ܾࡁʹඞཁͳΠϯλʔϑΣʔεΛϒϥ΢βωΠςΟϒͰఏڙ
    - ΫϨδουΧʔυ৘ใͷೖྗɾPayment Appͱͷ࿈ܞΛ୲͏
    - ࢧ෷͍ॲཧ͸ߦΘͳ͍
    - ܾࡁΛΑΓศརͰηΩϡΞʹ
    Payment Request API ͱ͸
    

    View Slide

19. Payment Request API Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ | Web | Google Developers :
    https://developers.google.com/web/updates/2016/07/payment-request?hl=ja
    

    View Slide

20. View Slide

21. View Slide

22. - ϒϥ΢β͸ Chrome ͷΈ
    - basic-card ͷΈରԠ
    - PRA༻ͷΤϯυϙΠϯτΛ༻ҙ
    FRESH! ॳظಋೖͰͷରԠ
    

    View Slide

23. 1. Payment Request API ͷಋೖ
    2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
    3. Puppeteer Λ࢖ͬͨ E2E ςετ
    4. ͦͷଞͷऔΓ૊Έ
    Agenda
    

    View Slide

24. FRESH! === Isomorphic (React + Fluxible)
    

    View Slide

25. React v16.0 - React Blog :
    https://reactjs.org/blog/2017/09/26/react-v16.0.html
    

    View Slide

26. v15 -> v16 Ͱ΍ͬͨ͜ͱ
    1. Fluxible, ֎෦UIίϯϙʔωϯτΛΞοϓσʔτ
    2. , return string ͷ࢖༻
    3. SSRͰ renderToStream ॻ͖׵͑
    

    View Slide

27. ͷ࢖༻
    

    View Slide

28. ͷ࢖༻
    ,
    Ͱғ͍ͬͯͨ
    

    View Slide

29. ͷ࢖༻
    

    View Slide

30. ͷ࢖༻
    ,
    ғΘͳͯ͘
    ͍͍
    

    View Slide

31. return String
    

    View Slide

32. v15.5.4 v16.0
    Autocannon Ͱͷଌఆ݁Ռ
    

    View Slide

33. Benchmark
    0
    750
    1500
    2250
    3000
    Avg Stdev Max
    1.921
    179
    491
    2.504
    465
    954
    v15.5.4 v16.0
    ms
    

    View Slide

34. renderToString -> renderToNodeStream
    -SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ
    -Node.js ͷ StreamAPI Writable Λ࢖ͬͯඇಉظॲཧ
    -metaλάͷ࡞੒Ͱ෭࡞༻͕ൃੜ (ޙड़)
    

    View Slide

35. Request1
    -> Request1 ͷ renderToNodeStream
    -> Request2
    -> Request2 ͷ renderToNodeStream
    -> Request2ͷ .on(‘finish’) Metadata Λऔͬͯdispose(ΫϦΞ)͢Δ
    -> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ
    ෭࡞༻ εϨουηʔϑ
    

    View Slide

36. Request1
    -> Request1 ͷ renderToNodeStream
    -> Request2
    -> Request2 ͷ renderToNodeStream
    -> Request2ͷ .on(‘finish’) Metadata ΛऔͬͯΫϦΞ͢Δ
    -> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ
    ෭࡞༻ εϨουηʔϑ
    metadata Λ contextɺfluxͳͲάϩʔόϧεςʔτ΁
    

    View Slide

37. renderToNodeStream Ͱͷ Benchmark
    renderToString renderToStream
    

    View Slide

38. 1. Payment Request API ͷಋೖ
    2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
    3. Puppeteer Λ࢖ͬͨ E2E ςετ
    4. ͦͷଞͷऔΓ૊Έ
    Agenda
    

    View Slide

39. ϦϦʔε֬ೝͷྲྀΕ
    ※࣮ࡍͷσϓϩΠϑϩʔͱ͸ҟͳΔ
    

    View Slide

40. ϦϦʔε֬ೝͷྲྀΕ
    STG
    

    View Slide

41. ϦϦʔε֬ೝͷྲྀΕ
    STG
    • QAςετ
    • σΟϨΫλʔ֬ೝ
    • ຊ൪ϦϦʔε2-3೔લ
    

    View Slide

42. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG
    

    View Slide

43. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG
    • ϦϦʔεՕॴͷ֬ೝ
    • νΣοΫγʔτ✅
    

    View Slide

44. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG PRD
    

    View Slide

45. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG PRD
    • ϦϦʔεՕॴͷ֬ೝ
    • Τϥʔϩάͷ֬ೝͳͲ
    • νΣοΫγʔτ✅
    

    View Slide

46. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG PRD
    

    View Slide

47. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG PRD
    νΣοΫγʔτ✅ νΣοΫγʔτ✅
    

    View Slide

48. ϦϦʔε֬ೝͷྲྀΕ
    Standby
    STG PRD
    νΣοΫγʔτ✅ νΣοΫγʔτ✅
    όοΫΤϯυAPIϦϦʔεͰ΋ಉ͡ྲྀΕ
    

    View Slide

49. ໿
    150
    

    View Slide

50. ໿150߲໨
    νΣοΫγʔτ✅ ஍ಓʹ֬ೝ
    

    View Slide

51. View Slide

52. ࣗಈԽ͠Α͏
    

    View Slide

53. ಡΈ : ύΝύΝςΟΟΞ
    

    View Slide

54. Node.js ͔Β Headless Chrome (v59 <=) Λૢ࡞
    1݄12೔ʹ v1.0 ϦϦʔε
    Chrome DevTools νʔϜ͕ϝϯςφϯε

    

    View Slide

55. - Node.js =< 8 async/await ࢖͑Δ
    - Transpile ෆཁ
    - ςετ߲໨+αͷػೳ

    (ScreenShot, FMPͷܭଌ)
    

    View Slide

56. Assertion
    Test Framework
    Browser Operation
    

    View Slide

57. View Slide

58. Using that Headless Chrome You’ve Been Hearing About :
    https://medium.com/@ivanmontiel/using-that-headless-chrome-youve-been-hearing-about-543a8cc07af5
    

    View Slide

59. େมͳ͜ͱ
    - ൪૊εςʔλε͕ෳ਺͋Γςετ࣮ߦ࣌ཁ݅Λຬͨ
    ͞ͳ͍΋ͷ͕͋Δ
    - ܾࡁͷςετͰߪೖ͕ඞཁͳ৔߹ঢ়ଶ
    - ׬ᘳʹ࡞Δͷ͸࿑ྗ͕͔͔Δ
    

    View Slide

60. ࠓޙ΍Γ͍ͨ͜ͱ
    - CIͰϙνοͱ࣮ߦ
    - CronͰఆظ࣮ߦ
    - εΫϦʔϯγϣοτͱςετ݁Ռͷอ࣋
    - FMPͷܭଌ
    

    View Slide

61. 1. Payment Request API ͷಋೖ
    2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
    3. Puppeteer Λ࢖ͬͨ E2E ςετ
    4. ͦͷଞͷऔΓ૊Έ
    Agenda
    

    View Slide

62. FRESH! INITIATIVE LABORATORY (FIL)
    

    View Slide

63. FRESH! INITIATIVE LABORATORY (FIL)
    20%ϧʔϧͷΑ͏ͳ੍౓
    

    View Slide

64. FIL is
    - ִिͷ༵ۚ೔ʹ࣮ࢪ
    - ௕ظతεύϯͰඞཁʹͳΓͦ͏ͳٕज़Λݕূ
    - ۀ຿ʹ๩ࡴ͞Εͯ์ஔؾຯͩͬͨ՝୊ΛҰ૟
    - ʹετοΫ
    

    View Slide

65. Webmen
    FRESH! EQUALIZER (WebAudioAPI)
    ಈը࠶ੜ଎౓ͷมߋػೳ
    Speech Synthesis API Λ࢖ͬͨίϝϯτಡΈ্͛ػೳ
    

    View Slide

66. 1. Payment Request API ͷಋೖ
    ܾࡁ͕εϜʔζʹͳͬͨ
    ·ͱΊ
    

    View Slide

67. 2. React v15 to v16 Ͱ΍ͬͨ͜ͱ
    Ϩεϙϯε͕਺ඦms͸΍͘ͳͬͨ
    ·ͱΊ
    

    View Slide

68. 3. Puppeteer Λ࢖ͬͨ E2E ςετ
    ϦϦʔε֬ೝָ͕ʹͳͬͨ
    ·ͱΊ
    

    View Slide

69. 4. ͦͷଞͷऔΓ૊Έ
    FILͰΑ͍΋ͷ͕࡞Εͨ
    ·ͱΊ
    

    View Slide

70. ͜Ε͔Β΋߈Ίଓ͚Α͏
    

    View Slide

71. Thank you, Ask Me Anything
    FRESH! Front-end Team
    

    View Slide