Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webフロントエンドの秩序を維持する体制を作る

mizdra
December 23, 2020

 Webフロントエンドの秩序を維持する体制を作る

Hatena Engineer Seminar #15 (2020/12/23) での発表資料です。
https://hatena.connpass.com/event/198892/

動画もあります:
https://youtu.be/Xb5bPaTO7fs?t=376

mizdra

December 23, 2020
Tweet

More Decks by mizdra

Other Decks in Programming

Transcript

  1. 会の運営方針
 • それぞれが知識を学び、自走できるように
 • そのために...
 ◦ 識者が積極的に知識を配っていく
 ▪ やり方をレクチャーしたり、ドキュメントを書いたり 


    ◦ 簡単に進められるよう道を整備する
 ▪ 便利なツールやサービスを導入する 
 ◦ 自走できるようになるまでフォローする
 ▪ ペアプロやモブプロを積極的に活用 
 • => 属人化も解消され、より高速に進められるようになるはず

  2. npmパッケージのアップデートにおける工夫
 • Renovateを活用
 ◦ パッケージをアップデートするPRを自動で作ってくれる
 ◦ PRにCHANGELOGへのリンクなどがあり、効率的に作業できる
 • モブオペを活用
 ◦

    アップデート作業には知識が必要
 ▪ ライブラリの機能や用途 
 ▪ CHANGELOGの眺め方 
 ▪ Breaking Changeがプロダクションに影響があるかを判断する方法 
 ◦ 識者と一緒に作業し、知識を共有する

  3. 結果
 • 1ヶ月後には自走し始めるように
 • npm パッケージをアップデートしていく習慣ができた
 • 半年後には major が

    30 => 8 に
 • あとは gulp とかアップデートするより脱出したいもの
 ◦ ひとまず安心できる状態に

  4. めちゃめちゃ難しい
 • メモリリークが発生している理由(ページめくり)に見当は付いていた
 ◦ 一方どう修正すれば良いかは不明
 • GCの仕組み / メモリリークが発生する仕組み /

    メモリリークを引き起こす コードパターン に関する知識
 • そもそもビューワはGigaViewerで特に難しいとされる部分
 ◦ 複雑なコードを読み解き、的確な修正をしなければならない
 

  5. 良かったこと
 • メモリリーク識者が居た
 ◦ 取っ掛かりができた
 • ビューワのアーキテクチャの識者が居た
 ◦ 修正箇所の特定や修正方法がすんなり決まった 


    • 学習資料で知識が底上げされた結果、メンバー全員で実装イメージが共有 できるように
 ◦ 実装もレビューも全員自信を持ってできるように
 
 => 複数人で協力して安定して進めることができた

  6. その後、最近の取り組み
 • 保守や相談窓口の活動 (いわゆる守りの活動) が会で回せるように
 ◦ 秩序を維持する体制が整った
 • しかし守りだけでは出せる価値に限界がある
 ◦

    秩序を維持する以上のことができない
 • 守りだけでなく攻めもできるようになろう
 ◦ 最新技術の導入 / パフォーマンス改善

  7. 現在の課題
 • 具体的な実装イメージを会で共有できていない
 • dev-toolsを使い、当たりを付けていく...ことまではできている
 ◦ コードのどこをどういじれば良いか、が共有できていない
 • 原因: Frontend-Ops

    の深い知識が要求されるため
 ◦ Frontend-Ops: アプリケーションコード以外のこと
 ◦ 実はパフォーマンス改善テクの殆どは Frontend-Ops に関連
 ▪ Web Speed Hackathon Online 出題のねらいと解説 
 ◦ アプリケーションコードよりは基盤をいじるのが主
 ◦ Frontend-Ops に詳しい人が id:mizdra 以外にいない

  8. 検討中の案
 1. id:mizdra が会に割く時間を増やす
 ◦ 属人化時代に逆戻りになってしまいそう
 2. 会の皆でFrontend-Opsを学ぶ
 ◦ id:mizdra

    がレクチャー
 ◦ パフォーマンスチューニングの力を付ける
 => パッと見た感じでは2が良さそう