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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

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

5. 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. 6.

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

   Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
7. 7.

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

   Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
8. 8.

   None
9. 9.

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

10. 10.

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

11. 11.

    ैདྷͷํ๏

12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

    Request API ͱ͸
19. 19.

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

    https://developers.google.com/web/updates/2016/07/payment-request?hl=ja
20. 20.

    None
21. 21.

    None
22. 22.

    - ϒϥ΢β͸ Chrome ͷΈ - basic-card ͷΈରԠ - PRA༻ͷΤϯυϙΠϯτΛ༻ҙ FRESH!

    ॳظಋೖͰͷରԠ
23. 23.

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

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
24. 24.

    FRESH! === Isomorphic (React + Fluxible)

25. 25.

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

26. 26.

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

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

    <Fragment /> ͷ࢖༻

28. 28.

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

29. 29.

    <Fragment /> ͷ࢖༻

30. 30.

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

31. 31.

    return String

32. 32.

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

33. 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. 34.

    renderToString -> renderToNodeStream -SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ -Node.js

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

    Request1 -> Request1 ͷ renderToNodeStream -> Request2 -> Request2 ͷ

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

    Request1 -> Request1 ͷ renderToNodeStream -> Request2 -> Request2 ͷ

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

    renderToNodeStream Ͱͷ Benchmark renderToString renderToStream

38. 38.

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

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
39. 39.

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

40. 40.

    ϦϦʔε֬ೝͷྲྀΕ STG

41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

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

45. 45.

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

46. 46.

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

47. 47.

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

48. 48.

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

49. 49.

    ໿ 150

50. 50.

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

51. 51.

    None
52. 52.

    ࣗಈԽ͠Α͏

53. 53.

    ಡΈ : ύΝύΝςΟΟΞ

54. 54.

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

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

55. 55.

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

    ςετ߲໨+αͷػೳ
 (ScreenShot, FMPͷܭଌ)
56. 56.

    Assertion Test Framework Browser Operation

57. 57.

    None
58. 58.

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

59. 59.

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

60. 60.

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

61. 61.

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

    Ͱ΍ͬͨ͜ͱ 3. Puppeteer Λ࢖ͬͨ E2E ςετ 4. ͦͷଞͷऔΓ૊Έ Agenda
62. 62.

    FRESH! INITIATIVE LABORATORY (FIL)

63. 63.

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

64. 64.

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

65. 65.

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

66. 66.

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

67. 67.

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

68. 68.

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

69. 69.

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

70. 70.

    ͜Ε͔Β΋߈Ίଓ͚Α͏

71. 71.

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