Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
攻めつづける FRESH! のWeb ver.新春
Search
sutiwo
February 11, 2018
Technology
3
5.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
2.4k
Kill Pollingした話
sutiwo
1
1.6k
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
AWS認定を取る中で感じたこと
siromi
1
190
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.5k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
730
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
86
4.7k
Writing Fast Ruby
sferik
628
62k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Site-Speed That Sticks
csswizardry
10
690
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
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