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を入れ...
Search
gyamoto
April 07, 2022
Programming
0
840
タクシーアプリ「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
490
実践 脱Modifier.composed / Let's Modifier.Node
gya
2
780
タクシーアプリ『GO』Androidのリリースフロー / Release GO App
gya
1
1.4k
私の好きなModifier関数 / My Favorite Modifier
gya
0
1k
2022年ヘルスケアアプリのつくり方 / 2022 A Healthcare App Odyssey
gya
0
1.5k
Gradle BOM importでライブラリバージョン管理 / DroidKaigi2019
gya
3
2.1k
Firebaseで解決するAndroidの機種依存 / Firebase solve android device difference
gya
2
1.3k
Other Decks in Programming
See All in Programming
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
XP, Testing and ninja testing
m_seki
3
220
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
230
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
410
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Practical Orchestrator
shlominoach
188
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
140
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Music & Morning Musume
bryan
46
6.6k
Speed Design
sergeychernyshev
32
1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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