Bonfire Frontend #2 速記メモ

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
      • 静的アセット
  • Web Push
    • あくまで付加的な機能としてとらえる

Chrome Developer Tools であそんでみる

  • 計測する
    • lighthouse
      • View Trace
    • Performanceタブ(強力)
      • モバイル環境を想定してスロットルする
      • キャプチャ画像を見る
      • アセットの適用順番がわかる
        • link rel preload すればいいのでは?
    • Consoleタブ
      • 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

React/Redux で秩序のあるコードを書く

  • re-ducks
    • ducks の inspire
    • Operations and Selectors
  • データを主体としてstateを管理する
  • Component と Container をしっかり使う
    • Component はロジックを過剰に「知らなくて」よい(知りすぎないようにする)
Powered by はてなブログ