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

Af6c71a5ce07091572fa09c5a4728f85?s=47 sutiwo
February 11, 2018

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

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

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

Af6c71a5ce07091572fa09c5a4728f85?s=128

sutiwo

February 11, 2018
Tweet

Transcript

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

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

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

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

  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

  6. 1. Payment Request API ͷಋೖ 2. React v15 to v16

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

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  8. None
  9. - FRESH! ͷαʔϏε಺ͰίΠϯΛߪೖ - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ ϥΠϒϑΝϯσΟϯάͱ͸

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

  11. ैདྷͷํ๏

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

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

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

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

    Request API ͱ͸
  19. Payment Request API Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ | Web | Google Developers :

    https://developers.google.com/web/updates/2016/07/payment-request?hl=ja
  20. None
  21. None
  22. - ϒϥ΢β͸ Chrome ͷΈ - basic-card ͷΈରԠ - PRA༻ͷΤϯυϙΠϯτΛ༻ҙ FRESH!

    ॳظಋೖͰͷରԠ
  23. 1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  24. FRESH! === Isomorphic (React + Fluxible)

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

  26. v15 -> v16 Ͱ΍ͬͨ͜ͱ 1. Fluxible, ֎෦UIίϯϙʔωϯτΛΞοϓσʔτ 2. <Fragment />

    , return string ͷ࢖༻ 3. SSRͰ renderToStream ॻ͖׵͑
  27. <Fragment /> ͷ࢖༻

  28. <Fragment /> ͷ࢖༻ <div>, <span> Ͱғ͍ͬͯͨ

  29. <Fragment /> ͷ࢖༻

  30. <Fragment /> ͷ࢖༻ <div>, <span> ғΘͳͯ͘ ͍͍

  31. return String

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

  33. Benchmark 0 750 1500 2250 3000 Avg Stdev Max 1.921

    179 491 2.504 465 954 v15.5.4 v16.0 ms
  34. renderToString -> renderToNodeStream -SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ -Node.js

    ͷ StreamAPI Writable Λ࢖ͬͯඇಉظॲཧ -metaλάͷ࡞੒Ͱ෭࡞༻͕ൃੜ (ޙड़)
  35. Request1 -> Request1 ͷ renderToNodeStream -> Request2 -> Request2 ͷ

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

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

  38. 1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  39. ϦϦʔε֬ೝͷྲྀΕ ※࣮ࡍͷσϓϩΠϑϩʔͱ͸ҟͳΔ

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

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

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

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

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

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

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

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

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

  49. ໿ 150

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

  51. None
  52. ࣗಈԽ͠Α͏

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

  54. Node.js ͔Β Headless Chrome (v59 <=) Λૢ࡞ 1݄12೔ʹ v1.0 ϦϦʔε

    Chrome DevTools νʔϜ͕ϝϯςφϯε

  55. - Node.js =< 8 async/await ࢖͑Δ - Transpile ෆཁ -

    ςετ߲໨+αͷػೳ
 (ScreenShot, FMPͷܭଌ)
  56. Assertion Test Framework Browser Operation

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

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

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

  61. 1. Payment Request API ͷಋೖ 2. React v15 to v16

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
  62. FRESH! INITIATIVE LABORATORY (FIL)

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

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

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

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

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

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

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

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

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