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
740
タクシーアプリ「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
230
実践 脱Modifier.composed / Let's Modifier.Node
gya
2
630
タクシーアプリ『GO』Androidのリリースフロー / Release GO App
gya
0
1.2k
私の好きなModifier関数 / My Favorite Modifier
gya
0
780
2022年ヘルスケアアプリのつくり方 / 2022 A Healthcare App Odyssey
gya
0
1.3k
Gradle BOM importでライブラリバージョン管理 / DroidKaigi2019
gya
3
1.9k
Firebaseで解決するAndroidの機種依存 / Firebase solve android device difference
gya
2
1.2k
Other Decks in Programming
See All in Programming
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
3
580
GoのIteratorに詳しくなってしまう
inatonix
1
170
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
LangChainの現在とv0.3にむけて
os1ma
3
650
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
170
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
450
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
330
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
4
2.5k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
28
2.7k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Making Projects Easy
brettharned
113
5.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Designing Experiences People Love
moore
138
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.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