Bonfire Frontend #2
画像回帰テスト
- Snapshotテスト
- 前回成功したDOMをexpectedにする
- UIコンポーネントのキャプチャ画像の比較
- Storybookでコンポーネントのテストツール
- キャプチャを取得するツールも色々ある
- 画像回帰テストのためのCLIがある
reg-viz/reg-suit
- 実際のテストの流れ
- git push
- CI で Storybook キャプチャ
- CLI ツールで差分検証
- 通知が飛ぶ
- 問題点
- キャプチャの比較が不安定
- 読み込みやレンダリングの問題
- viewportの変更タイミングの問題
- 読み込みやレンダリングの問題
- CI が長い
- 全体で20分くらい
- 500枚ぐらいで10分のキャプチャ時間
- 一枚一枚 webpack して撮ってる
- キャプチャの比較が不安定
- 自分でStorybookのキャプチャ取るOSSを作った
- その名も
zisui
- 定常状態になるまでキャプチャ遅延
- CSSアニメの自動OFF
- 複数起動の Puppeteer
- その名も
- 結論
- Storybookでの画像回帰テスト
- DOMベースと比べるとコスト高いが価値はある
PWA対応戦略と現実策
- Secure, High Performance, Installable
- HTTPS
- Service Worker なども前提になっている
- パフォーマンス改善
- まずはロードパフォーマンス
- Web App Manifest の導入
- manifest.json
- offline対応
- cache
- 静的アセット
- cache
- Web Push
- あくまで付加的な機能としてとらえる
Chrome Developer Tools であそんでみる
- 計測する
- lighthouse
- View Trace
- Performanceタブ(強力)
- モバイル環境を想定してスロットルする
- キャプチャ画像を見る
- アセットの適用順番がわかる
- link rel preload すればいいのでは?
- Consoleタブ
- performance.getEntries("resources")
- リソースのもろもろの情報が得られる
- performance.getEntries("resources")
- Sourcesタブ
- Overrideでソースを直接書き換えることができる
- 強力
- カバレッジタブを使うとJSが何に実行されているかわかる
- Commandシフトキーでカバレッジタブなどを検索できる
- 不要なJSを消し去る
- ネットワークタブへいく
- 右クリック→ブロックリクエストドメイン
- 場合によってはブリックリクエストURL
- 手元で読み込ませたくない場合はブロックすればいい
- 画像パフォーマンス
- Networkタブ
- Command+M でHTTPのヘッダが検索できる
- LazyLoadのシミュレーションができる
- 画像の色
- Elementsタブ
- カラーが変えられる
- Network Conditions にいくと UserAgent を好きなものに変えられる
- Consoleタブ Custom levels ドロップダウンメニュー
- eager evaliation
- cf. getElementById().textContent
- command + shift + P 便利
- chrome devtols @ youtube
- lighthouse
React/Redux で秩序のあるコードを書く
- re-ducks
- ducks の inspire
- Operations and Selectors
- データを主体としてstateを管理する
- Component と Container をしっかり使う
- Component はロジックを過剰に「知らなくて」よい(知りすぎないようにする)