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

by Mori Atsushi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

森篤史 2019年度新卒⼊社 Androidアプリエンジニア CyberZ CTO室メンバー次世代マネジメント室メンバー 2019年度未踏スーパークリエータ @at_sushi_at Mori-Atsushi

Slide 3

Slide 3 text

最近の活動 https://note.com/cyberz_cto/n/n f d c https://zenn.dev/at_sushi_at/books/edf adfc

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

UI Catalog導⼊の背景

Slide 7

Slide 7 text

🤯 UIの複雑化がもう⼤変！

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Dark/Lightの対応

Slide 12

Slide 12 text

多様なデバイス/OS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

• Instrumented Test • Visual Regression Test テスタブルな構成実⾏環境差分検知結果の通知運⽤コスト、メンテナンスコスト⾃動テストでUIデグレに⽴ち向かう⾃動化まではいくつかのハードルがある

Slide 15

Slide 15 text

UI Catalogという選択肢 • コンポーネントやページを登録するアプリケーション • ⼿動テストをしやすい形を実現する • Catalogに登録されたコンポーネントに⾃動テストを⾏う事もできる

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

UI Catalog Libraryの紹介

Slide 18

Slide 18 text

Katalog A UI Catalog Library made with Jetpack Compose 🚧 開発中 | まもなく公開予定

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

利⽤例 • 早期に実装を開始する APIの開発待ち仕様が決まりきってない場合デザインの決まっているところから実装を開始することが可能 • UIのリファクタや機能追加 ① UI Catalogに既存のUIを追加する ② 変更や修正 ③ UI Catalogで確認⽐較的安全に変更を加えられる

Slide 23

Slide 23 text

Jetpack Composeの採⽤結果

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

メリット - 複雑なUIの書きやすさ • 画⾯上にアイテムを 2個ちょっと表⽰するカルーセル • LazyRow RecyclerView的なやつ • BoxWithConstraints 親の成約を把握し、レイアウトすることができるここではmaxWidthを取得するために利⽤

Slide 26

Slide 26 text

メリット - アニメーションの容易さ • 画⾯遷移のリッチなアニメーションも Kotlinで書ける • AnimatedContent 複数のコンテンツをアニメーションありで切り替える

Slide 27

Slide 27 text

既存Viewとの共存 • AndroidView AndroidViewを表⽰するComposable • 表⽰するだけであれば問題なさそう • Fragmentを表⽰するComposableは⽤意されなかったため、⾃作した

Slide 28

Slide 28 text

アーキテクチャについては検討が必要そう • Jetpack ViewModelとの結合 scope管理がちょっとめんどくさい for Webやfor Desktopと共通では使えないそもそも画⾯回転時等にViewを破棄する必要はないのでは？今回はentry pointでのみ利⽤ • 画⾯遷移の実装現在のnavigationはstringベースのため、型安全でない for Webやfor DesktopではViewModelと同様に使えない今回は完全⾃作

Slide 29

Slide 29 text

今後の展望とまとめ

Slide 30

Slide 30 text

今後の展望 • 検索機能 • さらなる機能の拡充背景⾊の指定、変更再起動時にページ位置を復元する • Visual Regression Testとの連携 • For Desktop, For Webの提供 Katalog A UI Catalog Library made with Jetpack Compose まもなく公開予定