Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
Search
Mori Atsushi
August 05, 2021
Programming
1
980
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
https://pepabo.connpass.com/event/219431/
Mori Atsushi
August 05, 2021
Tweet
Share
More Decks by Mori Atsushi
See All by Mori Atsushi
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
3k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
710
Kotlin MultiplatformでもKSPを使う
moriatsushi
1
570
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
2
5.9k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
moriatsushi
1
1.3k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
86
140k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
2.7k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
400
マルチモジュールでandroidアプリを救う | Scramble Tech #0
moriatsushi
1
980
Other Decks in Programming
See All in Programming
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
CSC307 Lecture 14
javiergs
PRO
0
220
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Temporalを取り巻く仕様を整理する
sajikix
0
110
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
CSC307 Lecture 06
javiergs
PRO
0
360
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Why Our Code Smells
bkeepers
PRO
332
56k
Unsuck your backbone
ammeep
666
57k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Designing for humans not robots
tammielis
247
25k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Optimizing for Happiness
mojombo
373
69k
How GitHub (no longer) Works
holman
305
140k
What's new in Ruby 2.0
geeforr
338
31k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Transcript
Jetpack Composeで UI Catalog Libraryを 作っている話 Mori Atsushi - -
#android_meetup
森 篤史 2019年度 新卒⼊社 Androidアプリエンジニア CyberZ CTO室 メンバー 次世代マネジメント室 メンバー
2019年度 未踏スーパークリエータ @at_sushi_at Mori-Atsushi
最近の活動 https://note.com/cyberz_cto/n/n f d c https://zenn.dev/at_sushi_at/books/edf adfc
🚀 今⽇お届けしたい話 UI Catalogはいいぞ Jetpack Composeはいいぞ
.UI Catalog導⼊の背景 .UI Catalog Libraryの紹介 .Jetpack Composeの採⽤結果 .今後の展望とまとめ
UI Catalog導⼊の背景
🤯 UIの複雑化がもう⼤変!
OPENREC.tvの例 ライブ配信 動画アップロード
OPENREC.tvの例 ライブ配信 動画アップロード ライブ中 配信予定 アーカイブ
OPENREC.tvの例 ライブ中 配信予定 アーカイブ 通常配信 限定配信 サブスク PPV スペシャル番組 限定公開
お試し公開
Dark/Lightの対応
多様なデバイス/OS
💣 安全かつスピーディーに UI変更を⾏いたい
• Instrumented Test • Visual Regression Test テスタブルな構成 実⾏環境 差分検知
結果の通知 運⽤コスト、メンテナンスコスト ⾃動テストでUIデグレに⽴ち向かう ⾃動化まではいくつかのハードルがある
UI Catalogという選択肢 • コンポーネントやページを登録するアプリケーション • ⼿動テストをしやすい形を実現する • Catalogに登録されたコンポーネントに⾃動テストを⾏う事もできる
周辺の環境 Android(View)版は無い状態 → 作成を決断 iOS Web https://github.com/playbook-ui/playbook-ios https://github.com/storybookjs/storybook Android(Compose) https://github.com/airbnb/Showkase
Showkase
UI Catalog Libraryの紹介
Katalog A UI Catalog Library made with Jetpack Compose 🚧
開発中 | まもなく公開予定
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
利⽤例 • 早期に実装を開始する APIの開発待ち 仕様が決まりきってない場合 デザインの決まっているところから実装を開始することが可能 • UIのリファクタや機能追加 ① UI
Catalogに既存のUIを追加する ② 変更や修正 ③ UI Catalogで確認 ⽐較的安全に変更を加えられる
Jetpack Composeの 採⽤結果
なぜJetpack Compose? • プロダクションへの導⼊はまだ抵抗があった ⼀⽅で早く試していきたい デバッグツールなら試しやすい • 将来Jetpack Composeで作成したUIもスムーズに追加していきたい 最初からJetpack
Composeベースで作成
メリット - 複雑なUIの書きやすさ • 画⾯上にアイテムを 2個ちょっと表⽰する カルーセル • LazyRow RecyclerView的なやつ
• BoxWithConstraints 親の成約を把握し、レイアウトすることができる ここではmaxWidthを取得するために利⽤
メリット - アニメーションの容易さ • 画⾯遷移のリッチな アニメーションも Kotlinで書ける • AnimatedContent 複数のコンテンツを
アニメーションあり で切り替える
既存Viewとの共存 • AndroidView AndroidViewを表⽰するComposable • 表⽰するだけであれば問題なさそう • Fragmentを表⽰するComposableは ⽤意されなかったため、⾃作した
アーキテクチャについては検討が必要そう • Jetpack ViewModelとの結合 scope管理がちょっとめんどくさい for Webやfor Desktopと共通では使えない そもそも画⾯回転時等にViewを破棄する必要はないのでは? 今回はentry
pointでのみ利⽤ • 画⾯遷移の実装 現在のnavigationはstringベースのため、型安全でない for Webやfor DesktopではViewModelと同様に使えない 今回は完全⾃作
今後の展望とまとめ
今後の展望 • 検索機能 • さらなる機能の拡充 背景⾊の指定、変更 再起動時にページ位置を復元する • Visual Regression
Testとの連携 • For Desktop, For Webの提供 Katalog A UI Catalog Library made with Jetpack Compose まもなく公開予定