攻めつづける 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. ৽य़
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
9. - FRESH! ͷαʔϏε಺ͰίΠϯΛߪೖ - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ ϥΠϒϑΝϯσΟϯάͱ͸
10. - FRESH! ͷαʔϏε಺ͰίΠϯΛߪೖ - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ ϥΠϒϑΝϯσΟϯάͱ͸
11. ैདྷͷํ๏
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
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߲໨ νΣοΫγʔτ✅ ஍ಓʹ֬ೝ
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
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