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
タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れている話 / Introduce Jetpack Compose gradually
Search
gyamoto
April 07, 2022
Programming
0
700
タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れている話 / Introduce Jetpack Compose gradually
gyamoto
April 07, 2022
Tweet
Share
More Decks by gyamoto
See All by gyamoto
脱Accompanistを考える / Bye Accompanist
gya
0
150
実践 脱Modifier.composed / Let's Modifier.Node
gya
2
550
タクシーアプリ『GO』Androidのリリースフロー / Release GO App
gya
0
1.1k
私の好きなModifier関数 / My Favorite Modifier
gya
0
680
2022年ヘルスケアアプリのつくり方 / 2022 A Healthcare App Odyssey
gya
0
1.2k
Gradle BOM importでライブラリバージョン管理 / DroidKaigi2019
gya
3
1.8k
Firebaseで解決するAndroidの機種依存 / Firebase solve android device difference
gya
2
1.2k
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
620
Bottom-Up Architecture – Bridging the Achitecture Code Gap
olivergierke
3
130
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
620
dockerの豆知識を沢山話す
mal0961
1
210
[KR] 2024 DroidKnights: Compose 성능 최적화를 위한 Stability 마스터하기
skydoves
0
780
Android アプリのプロジェクトをモダンにし続ける工夫
numeroanddev
1
380
イベント駆動アーキテクチャ導入の手引きと共通の落とし穴 / Guide to Implementing Event-Driven Architecture and Common Pitfalls
nrslib
11
3.8k
ChecksでアプリコンプライアンスとAIの安全性をシンプルに - セッション紹介
takakitojo
0
140
dbt v1.8で追加された単体テストを触ってみた
k_data_analyst
2
220
ぎゃるえんじにあがハッカソンの虜になった!
rino7_tech
1
240
JJUG CCC 2024 Spring自動アップグレードを夢見て、Amazon Q Developer使ってみた
toricky6
2
170
ドラ🔵もんでDIを学ぶ
tomo1227
0
3.9k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
22
1.8k
The Invisible Side of Design
smashingmag
294
50k
Speed Design
sergeychernyshev
2
130
A better future with KSS
kneath
231
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Into the Great Unknown - MozCon
thekraken
16
1.2k
Robots, Beer and Maslow
schacon
PRO
155
8k
Navigating Team Friction
lara
180
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
280
Fantastic passwords and where to find them - at NoRuKo
philnash
40
2.6k
Transcript
Mobility Technologies Co., Ltd. タクシーアプリ「GO」Androidにできるところから Jetpack Composeを入れている話 Kohei Yamamoto
Mobility Technologies Co., Ltd. ▪ Kohei Yamamoto ▪ 株式会社 Mobility
Technologies ▪ GO ユーザアプリ Android 自己紹介 2
Mobility Technologies Co., Ltd. 「GO」のどこにJetpack Composeを入れているのか 3 01
Mobility Technologies Co., Ltd. 背景 ▪ 既存実装と共存できるようにJetpackComposeを導入 ▪ Navigation, ViewModel,
Dependency Injectionの使い方は大きく変更しない ▪ プロダクト成長のため機能開発のスピードが落ちないよう気をつける ▪ JetpackComposeのプレビュー機能を活用したい ▪ アプリの規模が大きくなりビルド時間が長い ▪ レイアウトの実装をスムーズに進めたい 「GO」のどこにJetpackComposeを入れているのか 4
Mobility Technologies Co., Ltd. ▪ デバッグメニューのActivity ▪ JetpackComposeの導入テストとして、本番ビルドに影響のない画面を実装 ▪ 既存画面の一部レイアウト
▪ 機能追加に関連するレイアウトをJetpackComposeで実装 ▪ 既存のレイアウトXMLにComposeViewとして追加 ▪ 新規画面のレイアウト ▪ 既存実装にあわせてFragmentを追加して、全てのレイアウトを JetpackComposeで実装 ▪ Navigation, ViewModel, DIの使い方はそのまま ▪ ViewModelの状態をもとにUI Stateを生成して画面表示 「GO」のどこにJetpackComposeを入れているのか 5
Mobility Technologies Co., Ltd. 実装アプローチと ライブラリの変更点 02 6
Mobility Technologies Co., Ltd. ▪ LazyList ▪ Before : ListView,
RecyclerView, Groupie ▪ After : LazyColumn, LazyRow ▪ ImageLoader ▪ Before : Picasso (Square, Inc.) ▪ After : Coil ▪ PlaceHolder ▪ Before : Shimmer (Meta Platforms, Inc.) ▪ After : Placeholder (Accompanist) 実装アプローチとライブラリの変更点 7
Mobility Technologies Co., Ltd. Before : ListView, RecyclerView, Groupie After
: LazyColumn, LazyRow ▪ LazyColumn/RowはAdapterが不要なのでシンプルな実装になる場合が多い ▪ RecyclerViewからLazyColumn/Rowへの移行が難しい場合もある ▪ アイテムアニメーションが提供されていない ▪ ヘッダーやグリッド表示もまだ試験運用中 ▪ LazyColumn/Rowのパフォーマンスについて不安点はあるが、表示件数の少ない シンプルなリストが多く、影響は小さい ▪ できる範囲で新しいリストはLazyColumn/Rowで実装している 実装アプローチとライブラリの変更点 LazyList 8
Mobility Technologies Co., Ltd. Before : Picasso (Square, Inc.) After
: Coil ▪ 画像読み込みのある画面もJetpackComposeのプレビュー機能を活用したい ▪ 新しい画面はCoilで画像読み込み ▪ PicassoからCoilへの移行 ▪ 画像ライブラリを入れ替える良いきっかけになった ▪ 画像読み込みのある画面が少ないので移行できそう ▪ ライブラリの移行が難しい場合はJetpackCompose向けのWrapper実装で プレビュー機能を活用できる 実装アプローチとライブラリの変更点 ImageLoader 9
Mobility Technologies Co., Ltd. Before : Shimmer (Meta Platforms, Inc.)
After : Placeholder (Accompanist) ▪ ローディング表示する画面もJetpackComposeのプレビュー機能を活用したい ▪ 新しい画面はPlaceholderでローディング表示 ▪ ShimmerからPlaceholderへの移行 ▪ Shimmerを使っている画面を改修するタイミングで少しずつ 実装アプローチとライブラリの変更点 Placeholder 10
Mobility Technologies Co., Ltd. 今後のJetpack Composeで やりたいこと 03 11
Mobility Technologies Co., Ltd. 背景 JetpackComposeレイアウトにAndroidViewが混ざるとプレビュー機能が使えない。 よく使われる共通レイアウトがAndroidViewだと開発効率が下がってしまう。 やりたいこと AndroidViewでよく使われる共通レイアウトのJetpackCompose化 例:共通ボタン、通信ローディング表示
進め方 1. 既存レイアウトをJetpackComposeで再実装する 2. 既存のAndroidView向けレイアウトをJetpackComposeに置き換える 3. レイアウトの意図しない変更が起きてないかスクショテスト 参考:Composeの既存のUIとの統合 | AndroidDevelopers https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui 今後のJetpackComposeでやりたいこと 12
Mobility Technologies Co., Ltd. ▪ プレビュー機能の活用を優先し、2つの実装の共存を許容する ▪ それぞれの画面によってレイアウトを使い分ける 今後のJetpackComposeでやりたいこと 1.
既存レイアウトをJetpackComposeで再実装 13 AndroidView ConposeView
Mobility Technologies Co., Ltd. ▪ AndroidViewの内部でComposeViewを参照して実装を1つに揃える ▪ 参照している全画面に影響があるため動作確認が大変 今後のJetpackComposeでやりたいこと 2.
既存AndroidViewをJetpackComposeに置き換え 14 AndroidView ConposeView
Mobility Technologies Co., Ltd. ▪ AndroidViewの内部変更によって、意図しない変更が起きてないか確認する ▪ スクショテストによって安心してJetpackCompose化を進められる 今後のJetpackComposeでやりたいこと 3.
レイアウト変更をスクショテストで確認 15
文章·画像等の内容の無断転載及び複製等の行為はご遠慮ください。 Mobility Technologies Co., Ltd. 16