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
860
タクシーアプリ「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
530
実践 脱Modifier.composed / Let's Modifier.Node
gya
2
790
タクシーアプリ『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.2k
Firebaseで解決するAndroidの機種依存 / Firebase solve android device difference
gya
2
1.3k
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
240
CSC305 Lecture 01
javiergs
PRO
1
400
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
Le côté obscur des IA génératives
pascallemerrer
0
130
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
190
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.6k
CSC305 Lecture 03
javiergs
PRO
0
240
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
620
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
CSC305 Lecture 02
javiergs
PRO
1
260
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Six Lessons from altMBA
skipperchong
28
4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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