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

by sutiwo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

•ϥΠϒϑΝϯσΟϯάػೳͷ։ൃத৺ 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ैདྷͷํ๏

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Payment Request API Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ | Web | Google Developers : https://developers.google.com/web/updates/2016/07/payment-request?hl=ja

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

FRESH! === Isomorphic (React + Fluxible)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

v15 -> v16 Ͱ΍ͬͨ͜ͱ 1. Fluxible, ֎෦UIίϯϙʔωϯτΛΞοϓσʔτ 2. , return string ͷ࢖༻ 3. SSRͰ renderToStream ॻ͖׵͑

Slide 27

Slide 27 text

ͷ࢖༻

Slide 28

Slide 28 text

ͷ࢖༻

, Ͱғ͍ͬͯͨ

Slide 29

Slide 29 text

ͷ࢖༻

Slide 30

Slide 30 text

ͷ࢖༻

, ғΘͳͯ͘ ͍͍

Slide 31

Slide 31 text

return String

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Benchmark 0 750 1500 2250 3000 Avg Stdev Max 1.921 179 491 2.504 465 954 v15.5.4 v16.0 ms

Slide 34

Slide 34 text

renderToString -> renderToNodeStream -SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ -Node.js ͷ StreamAPI Writable Λ࢖ͬͯඇಉظॲཧ -metaλάͷ࡞੒Ͱ෭࡞༻͕ൃੜ (ޙड़)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

renderToNodeStream Ͱͷ Benchmark renderToString renderToStream

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ϦϦʔε֬ೝͷྲྀΕ STG

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ϦϦʔε֬ೝͷྲྀΕ Standby STG

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

໿ 150

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

ࣗಈԽ͠Α͏

Slide 53

Slide 53 text

ಡΈ : ύΝύΝςΟΟΞ

Slide 54

Slide 54 text

Node.js ͔Β Headless Chrome (v59 <=) Λૢ࡞ 1݄12೔ʹ v1.0 ϦϦʔε Chrome DevTools νʔϜ͕ϝϯςφϯε 

Slide 55

Slide 55 text

- Node.js =< 8 async/await ࢖͑Δ - Transpile ෆཁ - ςετ߲໨+αͷػೳ  (ScreenShot, FMPͷܭଌ)

Slide 56

Slide 56 text

Assertion Test Framework Browser Operation

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

FRESH! INITIATIVE LABORATORY (FIL)

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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