2019/07/03 Mercari x Merpay Frontend Tech Talk vol.2
===
###### tags: `セミナー` `Webフロントエンド`

### Server Side Rendering Tuning with Next.js @vwxyutarooo
* 直近で取り組んで一番楽しかったこと
* SSRにおけるパフォーマンスチューニング
* メルカリのWebの話
* Mercari Web Re-Architecture
* 老朽化している → 一箇所直したら他でバグりがち
* PHP → Modernアーキテクチャにしたい
* 絶賛直してる
* TypeScript
* GraphQL(APOLLO)
* ライブラリはAPOLLO一強
* SSR(NextJS)
* リリース前にCPU負荷が高いことが分かった
* Render Method Turning 怖い✗
* Cache だめぽい✗
* 調査
* 調査に clinicJS を使った
* Styled Components 重い
* renderメソッドが２回呼ばれてる
* 対応
* renderToStaticMarkupとrenderToHTMLが呼ばれる
* Fragments + React Apollo ✗
* Fragments + Apollo Client ○
* → 70 ~ 80% の改善に繋がった
* SSR対象を削る
* By DynamicComponent 使う
* → 50%の改善になった

### Automatic Code Generation for SPA by @tanakaworld
* メルペイのコード生成について語る
* 使ってる技術
* gRPC
* write schema by Protocol Buffers
* proto to Typescript
* 個人で作ってるproffってやつで技術刷新した
* fast_jsonapiっていうGem使ってみたら速かったらしい
* swaggerいいよって話
* vuejsとturbolinksを組み合わせて使ったよ
* vuexとTypescriptは相性悪い
* vuex + fsaってやつを使った

### Building frontend development environment and web performance monitoring by @nekobato
* フロントエンド開発環境の構築とパフォーマンス監視
* MercariJP Web DevOpsチームがある → ３人チーム
* Mercari Re-architecture ProjectのDevOpsするひと
* Re-architectureすることで、テクニカルスタックが増えた..WebのSRE的な人
* フロントエンドエンジニアだけじゃお世話できない環境になっている
* ViewDev(Frontend) + backend + devOps
* SSR Frontend <=> [SSR Backend/GraphQL Server/Session Server/Web Gateway]
* ビルドまわりとか
* Push Commit → Build StoryBook → Upload Assets → AWS S3
* webpack-bundle-analyzer
* Check Vulnerability
* 脆弱性検知系
* モニタリング
* Calibreapp
* 既存のメルカリWEBより20%遅くなったらアラート飛ばしている
* Sentry
* フロントエンド・サーバーのエラートラッキング
* Sentry <=> JIRA Issue Link
*

### A half year at Merpay by @sugarshin
* Merpayでの半年間
* フロントエンドチームは7人いた
* やってたこと
* CS Tool
* 加盟店用の管理画面
* 加盟店用の登録フォーム
* キャンペーンLP ★
* クーポンWebview ★
* ★のやつを担当してた
* ↑すべてSSR(NuxtJS)、Typescript
* キャンペーン・クーポン周り、デザイナーがオペレーションできる環境を構築した
* 気をつけたこと
* UIのコンポーネント化
* カプセル化
* 破棄するコードが多いので、無駄に共通化とかはしない
* テンプレート化
* NPMコマンドでテンプレートが生成される
* 簡単さ
* あまり共通化とかはしすぎない
* 残った問題
* まだエンジニアの手から離れていない箇所が多い
* テストの環境が複数ない、メインブランチにマージしないと複数キャンペーン確認できない