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
Building frontend development environment and w...
Search
Hayato Koriyama
July 03, 2019
Programming
2
1.5k
Building frontend development environment and web performance monitoring
Hayato Koriyama
July 03, 2019
Tweet
Share
More Decks by Hayato Koriyama
See All by Hayato Koriyama
Migration to BrowserWindow in Electron
nekobato
3
880
Mobile Animation Tuning
nekobato
1
740
P2P Netfwork with Node.js
nekobato
1
790
Electron年報
nekobato
0
850
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
320
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
850
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
290
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
WindowInsetsだってテストしたい
ryunen344
1
190
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
740
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Gamification - CAS2011
davidbonilla
81
5.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
It's Worth the Effort
3n
185
28k
Writing Fast Ruby
sferik
628
61k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building Adaptive Systems
keathley
43
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Unsuck your backbone
ammeep
671
58k
Transcript
1 Building frontend development environment and web performance monitoring フロントエンド開発環境の構築とパフォーマンス監視
Mercari x Merpay Frontend Tech Talk vol.2
2 (Hayato Koriyama) Mercari JP Web Platform DevOps @nekobato
3 What is Mercari JP Web DevOps Agenda Why Web
DevOps? Building & Monitoring 02 03 01
4 What is Web DevOps? --
5 Mercari JP Web Re-architecture DevOps Members
6 Mercari JP Web Re-architecture Project Frontend + α (Backend
+ SET) Recent Mercari JP Web Team New technical stack
7 Mercari JP Web Re-architecture Project ViewDev (Frontend) + Backend
+ DevOps SSR Frontend GraphQL Server SSR Backend Server Session Server microservices Web Gateway New web team
8 ↓Frontend Engineer ↓UI Designer ↓BlockChain Engineer ↓Frontend Engineer Web
DevOps
9 Mercari JP Web Frontend Stack
10 Mercari JP Web DevOps Stack microservice platform
11 Why DevOps?
12 Developers working on... - Develop features - Make local
development environments - Configure error tracking - Configure logging system - Configure performance monitoring - Maintenance CircleCI jobs - Make deploy pipeline - …and so on
13 Why DevOps? To focus on development
14 Web Re-architecture DevOps
15 Web Re-architecture DevOps
16 Frontend DevOps Toolset E2E Performance Monitoring Frontend Error Tracking
Build Development Environment
17 In CircleCI, workflow add a comment to each Pull
Request DevTools
18 Storybook static files per Pull Request https://[ internal Website
]/[Repository name]/[Pull Request Number]/storybook AWS S3 Push Commit Build Storybook Upload Assets
19 Bundle Analyzer per Pull Request
20 Bundle Analyzer per Pull Request https://[ internal Website ]/[Repository
name]/[Pull Request Number]/analyze/server https://[ internal Website ]/[Repository name]/[Pull Request Number]/analyze/client AWS S3 Push Commit Build Storybook Upload Assets
21 Check Modules License
22 Check Vulnerability
23 Monitoring
24 Calibreapp
25 Calibreapp - First Meaningful Paint - Speed Index Alert
threshold: 20% slower than recent Mercari JP Web (measured at 2019-02-18) https://timkadlec.com/2014/01/fast-enough/ SLI/SLO
26 Alert from the outlier Calibreapp
27 Calibreapp - Caused from the new feature - Our
network incident - Issues on Calibreapp This alert is...
28 Calibreapp - Snapshot per hour - Extract median of
recent 14 snapshots - Alert if the median exceeds the threshold Extract median of recent 14 snapshots
29 Calibreapp Carousel...
30 Sentry Error tracking service
31 Sentry - Sentry ⇔ JIRA Issue Link - Slack
alert notification - An issue is first seen - An issue is seen more than N times in 1m
32 Sentry workflow 1. Sentry notification 2. On-call member create
a ticket 3. Assign a member to ticket
33 Support & Knowledge for after release - On-call training
for members - Describe Design Doc
34 Conclusion microservice platform