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
960
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
5
2.4k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
660
Kotlin MultiplatformでもKSPを使う
moriatsushi
1
520
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
2
5.7k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
moriatsushi
1
1.3k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
84
140k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
2.7k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
390
マルチモジュールでandroidアプリを救う | Scramble Tech #0
moriatsushi
1
960
Other Decks in Programming
See All in Programming
♾️ マルチプロダクトの組織でマイクロサービスアーキテクチャを支えるCICDプラットフォーム設計
hiroki_hasegawa
3
310
デプロイ・QA・Four keys を自動化×見える化する freee の統合デリバリー基盤
akito0922
1
330
2024年版 Kotlin サーバーサイドプログラミング実践開発
n_takehata
3
990
[Flutter] Unitテストの基礎を理解する
haruki_uiru
0
170
ビルドツールとはなにか?からはじめるGradle超入門 / JJUG CCC 2024 Spring
nhayato
1
170
奥が深いメールのシステム / The depth of Email system
linyows
3
210
Breaking the Ceiling: Scaling Your Impact at the Staff-Plus Level (InfoQ-DevSummit-Boston)
thiagoghisi
0
120
IaCにおけるテスト考察 / Tests in IaC
linyows
2
250
【暫定版】App Intentsの新機能から見るApple Intelligenceと近い未来
ikejun360
0
110
Get started with Compose Multiplatform!
ogi2ogi
0
1.1k
スクラムフェスを支える配信の仕組み
murabayashi
1
150
ドラ🔵もんでDIを学ぶ
tomo1227
0
4.8k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Documentation Writing (for coders)
carmenintech
62
4.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Web development in the modern age
philhawksworth
203
10k
Facilitating Awesome Meetings
lara
44
5.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Rails Girls Zürich Keynote
gr2m
91
13k
Designing Experiences People Love
moore
136
23k
Side Projects
sachag
451
41k
Docker and Python
trallard
36
2.8k
Designing on Purpose - Digital PM Summit 2013
jponch
112
6.6k
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 まもなく公開予定