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

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