Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 まもなく公開予定