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

Jetpack Composeで
UI Catalog Libraryを
作っている話 #android_meetup

Jetpack Composeで
UI Catalog Libraryを
作っている話 #android_meetup

A45681c58220b58ca83a926b1be52e65?s=128

Mori Atsushi

August 05, 2021
Tweet

Transcript

  1. Jetpack Composeで UI Catalog Libraryを 作っている話 Mori Atsushi - -

    #android_meetup
  2. 森 篤史 2019年度 新卒⼊社 Androidアプリエンジニア CyberZ CTO室 メンバー 次世代マネジメント室 メンバー

    2019年度 未踏スーパークリエータ @at_sushi_at Mori-Atsushi
  3. 最近の活動 https://note.com/cyberz_cto/n/n f d c https://zenn.dev/at_sushi_at/books/edf adfc

  4. 🚀 今⽇お届けしたい話 UI Catalogはいいぞ Jetpack Composeはいいぞ

  5. .UI Catalog導⼊の背景 .UI Catalog Libraryの紹介 .Jetpack Composeの採⽤結果 .今後の展望とまとめ

  6. UI Catalog導⼊の背景

  7. 🤯 UIの複雑化がもう⼤変!

  8. OPENREC.tvの例 ライブ配信 動画アップロード

  9. OPENREC.tvの例 ライブ配信 動画アップロード ライブ中 配信予定 アーカイブ

  10. OPENREC.tvの例 ライブ中 配信予定 アーカイブ 通常配信 限定配信 サブスク PPV スペシャル番組 限定公開

    お試し公開
  11. Dark/Lightの対応

  12. 多様なデバイス/OS

  13. 💣 安全かつスピーディーに UI変更を⾏いたい

  14. • Instrumented Test • Visual Regression Test テスタブルな構成 実⾏環境 差分検知

    結果の通知 運⽤コスト、メンテナンスコスト ⾃動テストでUIデグレに⽴ち向かう ⾃動化まではいくつかのハードルがある
  15. UI Catalogという選択肢 • コンポーネントやページを登録するアプリケーション • ⼿動テストをしやすい形を実現する • Catalogに登録されたコンポーネントに⾃動テストを⾏う事もできる

  16. 周辺の環境 Android(View)版は無い状態 → 作成を決断 iOS Web https://github.com/playbook-ui/playbook-ios https://github.com/storybookjs/storybook Android(Compose) https://github.com/airbnb/Showkase

    Showkase
  17. UI Catalog Libraryの紹介

  18. Katalog A UI Catalog Library made with Jetpack Compose 🚧

    開発中 | まもなく公開予定
  19. Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /

    ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
  20. Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /

    ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
  21. Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /

    ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
  22. 利⽤例 • 早期に実装を開始する APIの開発待ち 仕様が決まりきってない場合 デザインの決まっているところから実装を開始することが可能 • UIのリファクタや機能追加 ① UI

    Catalogに既存のUIを追加する ② 変更や修正 ③ UI Catalogで確認 ⽐較的安全に変更を加えられる
  23. Jetpack Composeの 採⽤結果

  24. なぜJetpack Compose? • プロダクションへの導⼊はまだ抵抗があった ⼀⽅で早く試していきたい デバッグツールなら試しやすい • 将来Jetpack Composeで作成したUIもスムーズに追加していきたい 最初からJetpack

    Composeベースで作成
  25. メリット - 複雑なUIの書きやすさ • 画⾯上にアイテムを 2個ちょっと表⽰する カルーセル • LazyRow RecyclerView的なやつ

    • BoxWithConstraints 親の成約を把握し、レイアウトすることができる ここではmaxWidthを取得するために利⽤
  26. メリット - アニメーションの容易さ • 画⾯遷移のリッチな アニメーションも Kotlinで書ける • AnimatedContent 複数のコンテンツを

    アニメーションあり で切り替える
  27. 既存Viewとの共存 • AndroidView AndroidViewを表⽰するComposable • 表⽰するだけであれば問題なさそう • Fragmentを表⽰するComposableは ⽤意されなかったため、⾃作した

  28. アーキテクチャについては検討が必要そう • Jetpack ViewModelとの結合 scope管理がちょっとめんどくさい for Webやfor Desktopと共通では使えない そもそも画⾯回転時等にViewを破棄する必要はないのでは? 今回はentry

    pointでのみ利⽤ • 画⾯遷移の実装 現在のnavigationはstringベースのため、型安全でない for Webやfor DesktopではViewModelと同様に使えない 今回は完全⾃作
  29. 今後の展望とまとめ

  30. 今後の展望 • 検索機能 • さらなる機能の拡充 背景⾊の指定、変更 再起動時にページ位置を復元する • Visual Regression

    Testとの連携 • For Desktop, For Webの提供 Katalog A UI Catalog Library made with Jetpack Compose まもなく公開予定