#insideFE #insideFE_B 15:40〜 のセッションです。
Inside Frontend : https://inside-frontend.com/#seminar-b3
߈Ί͚ͭͮΔ FRESH! ͷWeb@su.woINSIDE FRONTEND #2 2018.2.11ver. ৽य़
View Slide
• su.wo / su.wo_•Front-end engineer•CyberAgent, Inc.•FRESH!
•ੜ์ૹϓϥοτϑΥʔϜ•ϑϩϯτνʔϜPCͱSPϒϥβɺ৴ը໘
•ϥΠϒϑΝϯσΟϯάػೳͷ։ൃத৺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
1. Payment Request API ͷಋೖ2. React v15 to v16 Ͱͬͨ͜ͱ3. Puppeteer Λͬͨ E2E ςετ4. ͦͷଞͷऔΓΈAgenda
- FRESH! ͷαʔϏεͰίΠϯΛߪೖ- ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ- ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖ΔϥΠϒϑΝϯσΟϯάͱ
ैདྷͷํ๏
- GMO ϖΠϝϯτήʔτΣΠͷαΠτભҠ- FRESH! ͰΧʔυใอ࣋͠ͳ͍
- ೃછΈ͋Δख๏- ߪೖͷʹผυϝΠϯભҠ- ςϯϓϨʔτͷߋ৽͕໘ (ϩάɾσβΠϯ)
FRESH! ʹΧʔυใ͕อ࣋͞Εͯ͠·͏ҹ
- ܾࡁʹඞཁͳΠϯλʔϑΣʔεΛϒϥβωΠςΟϒͰఏڙ- ΫϨδουΧʔυใͷೖྗɾPayment Appͱͷ࿈ܞΛ୲͏- ࢧ͍ॲཧߦΘͳ͍- ܾࡁΛΑΓศརͰηΩϡΞʹPayment Request API ͱ
Payment Request API Ͱ؆୯ɾߴͳܾࡁΛ࣮ݱ͢Δ | Web | Google Developers :https://developers.google.com/web/updates/2016/07/payment-request?hl=ja
- ϒϥβ Chrome ͷΈ- basic-card ͷΈରԠ- PRA༻ͷΤϯυϙΠϯτΛ༻ҙFRESH! ॳظಋೖͰͷରԠ
FRESH! === Isomorphic (React + Fluxible)
React v16.0 - React Blog :https://reactjs.org/blog/2017/09/26/react-v16.0.html
v15 -> v16 Ͱͬͨ͜ͱ1. Fluxible, ֎෦UIίϯϙʔωϯτΛΞοϓσʔτ2. , return string ͷ༻3. SSRͰ renderToStream ॻ͖͑
ͷ༻
ͷ༻, Ͱғ͍ͬͯͨ
ͷ༻, ғΘͳ͍͍ͯ͘
return String
v15.5.4 v16.0Autocannon Ͱͷଌఆ݁Ռ
Benchmark0750150022503000Avg Stdev Max1.9211794912.504465954v15.5.4 v16.0ms
renderToString -> renderToNodeStream-SSR ࣌ ReactElement Λॳظͷ HTML ʹඳը͢Δ-Node.js ͷ StreamAPI Writable Λͬͯඇಉظॲཧ-metaλάͷ࡞Ͱ෭࡞༻͕ൃੜ (ޙड़)
Request1-> Request1 ͷ renderToNodeStream-> Request2-> Request2 ͷ renderToNodeStream-> Request2ͷ .on(‘finish’) Metadata Λऔͬͯdispose(ΫϦΞ)͢Δ-> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ෭࡞༻ εϨουηʔϑ
Request1-> Request1 ͷ renderToNodeStream-> Request2-> Request2 ͷ renderToNodeStream-> Request2ͷ .on(‘finish’) Metadata ΛऔͬͯΫϦΞ͢Δ-> Request1ͷ .on(‘finish’) Metadata ͕ۭʹͳΔ෭࡞༻ εϨουηʔϑmetadata Λ contextɺfluxͳͲάϩʔόϧεςʔτ
renderToNodeStream Ͱͷ BenchmarkrenderToString renderToStream
ϦϦʔε֬ೝͷྲྀΕ※࣮ࡍͷσϓϩΠϑϩʔͱҟͳΔ
ϦϦʔε֬ೝͷྲྀΕSTG
ϦϦʔε֬ೝͷྲྀΕSTG• QAςετ• σΟϨΫλʔ֬ೝ• ຊ൪ϦϦʔε2-3લ
ϦϦʔε֬ೝͷྲྀΕStandbySTG
ϦϦʔε֬ೝͷྲྀΕStandbySTG• ϦϦʔεՕॴͷ֬ೝ• νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕStandbySTG PRD
ϦϦʔε֬ೝͷྲྀΕStandbySTG PRD• ϦϦʔεՕॴͷ֬ೝ• Τϥʔϩάͷ֬ೝͳͲ• νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕStandbySTG PRDνΣοΫγʔτ✅ νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕStandbySTG PRDνΣοΫγʔτ✅ νΣοΫγʔτ✅όοΫΤϯυAPIϦϦʔεͰಉ͡ྲྀΕ
150
150߲νΣοΫγʔτ✅ ಓʹ֬ೝ
ࣗಈԽ͠Α͏
ಡΈ : ύΝύΝςΟΟΞ
Node.js ͔Β Headless Chrome (v59 <=) Λૢ࡞1݄12ʹ v1.0 ϦϦʔεChrome DevTools νʔϜ͕ϝϯςφϯε
- Node.js =< 8 async/await ͑Δ- Transpile ෆཁ- ςετ߲+αͷػೳ (ScreenShot, FMPͷܭଌ)
AssertionTest FrameworkBrowser Operation
Using that Headless Chrome You’ve Been Hearing About :https://medium.com/@ivanmontiel/using-that-headless-chrome-youve-been-hearing-about-543a8cc07af5
େมͳ͜ͱ- ൪εςʔλε͕ෳ͋Γςετ࣮ߦ࣌ཁ݅Λຬͨ͞ͳ͍ͷ͕͋Δ- ܾࡁͷςετͰߪೖ͕ඞཁͳ߹ঢ়ଶ- ᘳʹ࡞Δͷ࿑ྗ͕͔͔Δ
ࠓޙΓ͍ͨ͜ͱ- CIͰϙνοͱ࣮ߦ- CronͰఆظ࣮ߦ- εΫϦʔϯγϣοτͱςετ݁Ռͷอ࣋- FMPͷܭଌ
FRESH! INITIATIVE LABORATORY (FIL)
FRESH! INITIATIVE LABORATORY (FIL)20%ϧʔϧͷΑ͏ͳ੍
FIL is- ִिͷ༵ۚʹ࣮ࢪ- ظతεύϯͰඞཁʹͳΓͦ͏ͳٕज़Λݕূ- ۀʹࡴ͞Εͯ์ஔؾຯͩͬͨ՝ΛҰ- ʹετοΫ
WebmenFRESH! EQUALIZER (WebAudioAPI)ಈը࠶ੜͷมߋػೳSpeech Synthesis API ΛͬͨίϝϯτಡΈ্͛ػೳ
1. Payment Request API ͷಋೖܾࡁ͕εϜʔζʹͳͬͨ·ͱΊ
2. React v15 to v16 Ͱͬͨ͜ͱϨεϙϯε͕ඦms͘ͳͬͨ·ͱΊ
3. Puppeteer Λͬͨ E2E ςετϦϦʔε֬ೝָ͕ʹͳͬͨ·ͱΊ
4. ͦͷଞͷऔΓΈFILͰΑ͍ͷ͕࡞Εͨ·ͱΊ
͜Ε͔Β߈Ίଓ͚Α͏
Thank you, Ask Me AnythingFRESH! Front-end Team