Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
攻めつづける FRESH! のWeb ver.新春
sutiwo
February 11, 2018
Technology
3
4.1k
攻めつづける FRESH! のWeb ver.新春
#insideFE #insideFE_B
15:40〜 のセッションです。
Inside Frontend :
https://inside-frontend.com/#seminar-b3
sutiwo
February 11, 2018
Tweet
Share
More Decks by sutiwo
See All by sutiwo
FRESH! クライアントサイドパフォーマンス改善
sutiwo
1
2k
Kill Pollingした話
sutiwo
1
1.2k
Other Decks in Technology
See All in Technology
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
950
UIKitのアップデート #WWDC22
akatsuki174
4
350
今どきのLinux事情
tokida
44
36k
MRTK3 - DataBinding and Theming 入門
futo23
0
210
PUTとPOSTどっち使う?
hankehly
0
280
MySQL HeatWaveの新しいトピック! / MySQL HeatWave Update 202206
yoshiakiyamasaki
0
100
Camp Digital 2022: tailored advice
kyliehavelock
0
150
【Pythonデータ分析勉強会#33】「DearPyGuiに入門しました」の続き~Image-Processing-Node-Editor~
kazuhitotakahashi
0
190
ZephyrRTOSのLongan Nanoへの移植
tokitahiroshi
0
110
XRとシビックテック
satoshirobatofujimoto
0
100
インフラのCI/CDはGitHub Actionsに任せた
mihyon
0
120
What's new in Vision
satotakeshi
0
220
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
30k
Ruby is Unlike a Banana
tanoku
91
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
It's Worth the Effort
3n
172
25k
In The Pink: A Labor of Love
frogandcode
131
21k
Fireside Chat
paigeccino
12
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
47
3.9k
Navigating Team Friction
lara
175
11k
Optimizing for Happiness
mojombo
365
63k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Transcript
߈Ί͚ͭͮΔ FRESH! ͷWeb @su.wo INSIDE FRONTEND #2 2018.2.11 ver. ৽य़
• su.wo / su.wo_ •Front-end engineer •CyberAgent, Inc. •FRESH!
•ੜ์ૹϓϥοτϑΥʔϜ •ϑϩϯτνʔϜPCͱSPϒϥβɺ৴ը໘
•ੜ์ૹϓϥοτϑΥʔϜ •ϑϩϯτνʔϜ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
1. Payment Request API ͷಋೖ 2. React v15 to v16
Ͱͬͨ͜ͱ 3. Puppeteer Λͬͨ E2E ςετ 4. ͦͷଞͷऔΓΈ Agenda
None
- FRESH! ͷαʔϏεͰίΠϯΛߪೖ - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ ϥΠϒϑΝϯσΟϯάͱ
- FRESH! ͷαʔϏεͰίΠϯΛߪೖ - ߪೖͨ͠ίΠϯֹ(ॴֹ࣋)ʹԠͯ͡ࢧԉ - ࢧԉͨ݁͠Ռ༷ʑͳಛయ͕ڗडͰ͖Δ ϥΠϒϑΝϯσΟϯάͱ
ैདྷͷํ๏
None
None
None
- 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
None
None
- ϒϥβ Chrome ͷΈ - basic-card ͷΈରԠ - PRA༻ͷΤϯυϙΠϯτΛ༻ҙ FRESH!
ॳظಋೖͰͷରԠ
1. Payment Request API ͷಋೖ 2. React v15 to v16
Ͱͬͨ͜ͱ 3. Puppeteer Λͬͨ E2E ςετ 4. ͦͷଞͷऔΓΈ Agenda
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. <Fragment />
, return string ͷ༻ 3. SSRͰ renderToStream ॻ͖͑
<Fragment /> ͷ༻
<Fragment /> ͷ༻ <div>, <span> Ͱғ͍ͬͯͨ
<Fragment /> ͷ༻
<Fragment /> ͷ༻ <div>, <span> ғΘͳͯ͘ ͍͍
return String
v15.5.4 v16.0 Autocannon Ͱͷଌఆ݁Ռ
Benchmark 0 750 1500 2250 3000 Avg Stdev Max 1.921
179 491 2.504 465 954 v15.5.4 v16.0 ms
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 Ͱͷ Benchmark renderToString renderToStream
1. Payment Request API ͷಋೖ 2. React v15 to v16
Ͱͬͨ͜ͱ 3. Puppeteer Λͬͨ E2E ςετ 4. ͦͷଞͷऔΓΈ Agenda
ϦϦʔε֬ೝͷྲྀΕ ※࣮ࡍͷσϓϩΠϑϩʔͱҟͳΔ
ϦϦʔε֬ೝͷྲྀΕ STG
ϦϦʔε֬ೝͷྲྀΕ STG • QAςετ • σΟϨΫλʔ֬ೝ • ຊ൪ϦϦʔε2-3લ
ϦϦʔε֬ೝͷྲྀΕ Standby STG
ϦϦʔε֬ೝͷྲྀΕ Standby STG • ϦϦʔεՕॴͷ֬ೝ • νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD
ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD • ϦϦʔεՕॴͷ֬ೝ • Τϥʔϩάͷ֬ೝͳͲ • νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD
ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD νΣοΫγʔτ✅ νΣοΫγʔτ✅
ϦϦʔε֬ೝͷྲྀΕ Standby STG PRD νΣοΫγʔτ✅ νΣοΫγʔτ✅ όοΫΤϯυAPIϦϦʔεͰಉ͡ྲྀΕ
150
150߲ νΣοΫγʔτ✅ ಓʹ֬ೝ
None
ࣗಈԽ͠Α͏
ಡΈ : ύΝύΝςΟΟΞ
Node.js ͔Β Headless Chrome (v59 <=) Λૢ࡞ 1݄12ʹ v1.0 ϦϦʔε
Chrome DevTools νʔϜ͕ϝϯςφϯε
- Node.js =< 8 async/await ͑Δ - Transpile ෆཁ -
ςετ߲+αͷػೳ (ScreenShot, FMPͷܭଌ)
Assertion Test Framework Browser Operation
None
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ͷܭଌ
1. Payment Request API ͷಋೖ 2. React v15 to v16
Ͱͬͨ͜ͱ 3. Puppeteer Λͬͨ E2E ςετ 4. ͦͷଞͷऔΓΈ Agenda
FRESH! INITIATIVE LABORATORY (FIL)
FRESH! INITIATIVE LABORATORY (FIL) 20%ϧʔϧͷΑ͏ͳ੍
FIL is - ִिͷ༵ۚʹ࣮ࢪ - ظతεύϯͰඞཁʹͳΓͦ͏ͳٕज़Λݕূ - ۀʹࡴ͞Εͯ์ஔؾຯͩͬͨ՝ΛҰ - ʹετοΫ
Webmen FRESH! EQUALIZER (WebAudioAPI) ಈը࠶ੜͷมߋػೳ Speech Synthesis API ΛͬͨίϝϯτಡΈ্͛ػೳ
1. Payment Request API ͷಋೖ ܾࡁ͕εϜʔζʹͳͬͨ ·ͱΊ
2. React v15 to v16 Ͱͬͨ͜ͱ Ϩεϙϯε͕ඦms͘ͳͬͨ ·ͱΊ
3. Puppeteer Λͬͨ E2E ςετ ϦϦʔε֬ೝָ͕ʹͳͬͨ ·ͱΊ
4. ͦͷଞͷऔΓΈ FILͰΑ͍ͷ͕࡞Εͨ ·ͱΊ
͜Ε͔Β߈Ίଓ͚Α͏
Thank you, Ask Me Anything FRESH! Front-end Team