Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sutiwo
February 11, 2018

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

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

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

sutiwo

February 11, 2018
Tweet

More Decks by sutiwo

Other Decks in Technology

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