Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

How To Improve UI Quality And Performance

CyberAgent
November 21, 2023
99

How To Improve UI Quality And Performance

UIの安全性、パフォーマンスをVRTやflutter_integrationTestなどを使い、テストの観点から改善。またアクセシビリティの観点からも深掘りします。

CyberAgent

November 21, 2023
Tweet

More Decks by CyberAgent

Transcript

  1. 第一章: Visual Regression Test 導入へ VRT(Visual Regression Test)とは UIの変更を自動的に検出するテスト手法の一つです。 これにより、新

    しいコードの導入や変更がグラフィカルユーザーインターフェースに与 える影響を迅速にキャッチすることができます。 つまりUIの見た目やUIの差分変更を可視化することができる🔥
  2. 第一章: Visual Regression Test 導入へ 使用技術 flutter Package: playbook-ui Test

    Tool: reg-suit CI: GitHub Actions(linux) Storage: Google Cloud Storage(AWS等でも可)
  3. 3. 端末の文字サイズによってUIが崩れないか Flutter Accessibility Large Fonts Render text widgets with

    user-specified font sizes (引用: flutter.dev) FlutterのAccessibility的にも推奨されている👀
  4. 3. 端末の文字サイズによってUIが崩れないか Flutter Accessibility Large Fonts Render text widgets with

    user-specified font sizes (引用: flutter.dev) FlutterのAccessibility的にも推奨されている👀 どう対応するのか?
  5. 3. 端末の文字サイズによってUIが崩れないか 端末の文字サイズを検知する The number of font pixels for each

    logical pixel. For example, if the text scale factor is 1.5, text will be 50% larger than the specified font size. (引用: flutter.dev)
  6. 第三章: integration testで計測 生成されたJson - 平均フレームビルド時間 - 最長フレームビルド時間 - 平均フレーム描画時間

    - 最長フレーム描画時間 - 平均CPU使用率 - 平均メモリ使用率 これ以外のメトリクスを取得可能
  7. 第三章: integration testで計測 - 平均フレームビルド時間: 16ms未満だと60fpsで描画される - 平均CPU使用率: アプリ全体に対して、特定のアクションが異常値の場合、改善の余地あり -

    平均メモリ使用率: アプリ全体に対して、特定のアクションが異常値の場合、改善の余地あり (特に対応している最低のスペック端末での検証だと効果が見えやすい)