Upgrade to Pro — share decks privately, control downloads, hide ads and more …

タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れている話 / Introduce Jetpack Compose gradually

gyamoto
April 07, 2022

タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れている話 / Introduce Jetpack Compose gradually

gyamoto

April 07, 2022
Tweet

More Decks by gyamoto

Other Decks in Programming

Transcript

  1. Mobility Technologies Co., Ltd.
    タクシーアプリ「GO」Androidにできるところから
    Jetpack Composeを入れている話
    Kohei Yamamoto

    View Slide

  2. Mobility Technologies Co., Ltd.
    ■ Kohei Yamamoto
    ■ 株式会社 Mobility Technologies
    ■ GO ユーザアプリ Android
    自己紹介
    2

    View Slide

  3. Mobility Technologies Co., Ltd.
    「GO」のどこにJetpack
    Composeを入れているのか
    3
    01

    View Slide

  4. Mobility Technologies Co., Ltd.
    背景
    ■ 既存実装と共存できるようにJetpackComposeを導入
    ■ Navigation, ViewModel, Dependency Injectionの使い方は大きく変更しない
    ■ プロダクト成長のため機能開発のスピードが落ちないよう気をつける
    ■ JetpackComposeのプレビュー機能を活用したい
    ■ アプリの規模が大きくなりビルド時間が長い
    ■ レイアウトの実装をスムーズに進めたい
    「GO」のどこにJetpackComposeを入れているのか
    4

    View Slide

  5. Mobility Technologies Co., Ltd.
    ■ デバッグメニューのActivity
    ■ JetpackComposeの導入テストとして、本番ビルドに影響のない画面を実装
    ■ 既存画面の一部レイアウト
    ■ 機能追加に関連するレイアウトをJetpackComposeで実装
    ■ 既存のレイアウトXMLにComposeViewとして追加
    ■ 新規画面のレイアウト
    ■ 既存実装にあわせてFragmentを追加して、全てのレイアウトを
    JetpackComposeで実装
    ■ Navigation, ViewModel, DIの使い方はそのまま
    ■ ViewModelの状態をもとにUI Stateを生成して画面表示
    「GO」のどこにJetpackComposeを入れているのか
    5

    View Slide

  6. Mobility Technologies Co., Ltd.
    実装アプローチと
    ライブラリの変更点
    02
    6

    View Slide

  7. 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

    View Slide

  8. Mobility Technologies Co., Ltd.
    Before : ListView, RecyclerView, Groupie
    After : LazyColumn, LazyRow
    ■ LazyColumn/RowはAdapterが不要なのでシンプルな実装になる場合が多い
    ■ RecyclerViewからLazyColumn/Rowへの移行が難しい場合もある
    ■ アイテムアニメーションが提供されていない
    ■ ヘッダーやグリッド表示もまだ試験運用中
    ■ LazyColumn/Rowのパフォーマンスについて不安点はあるが、表示件数の少ない
    シンプルなリストが多く、影響は小さい
    ■ できる範囲で新しいリストはLazyColumn/Rowで実装している
    実装アプローチとライブラリの変更点
    LazyList
    8

    View Slide

  9. Mobility Technologies Co., Ltd.
    Before : Picasso (Square, Inc.)
    After : Coil
    ■ 画像読み込みのある画面もJetpackComposeのプレビュー機能を活用したい
    ■ 新しい画面はCoilで画像読み込み
    ■ PicassoからCoilへの移行
    ■ 画像ライブラリを入れ替える良いきっかけになった
    ■ 画像読み込みのある画面が少ないので移行できそう
    ■ ライブラリの移行が難しい場合はJetpackCompose向けのWrapper実装で
    プレビュー機能を活用できる
    実装アプローチとライブラリの変更点
    ImageLoader
    9

    View Slide

  10. Mobility Technologies Co., Ltd.
    Before : Shimmer (Meta Platforms, Inc.)
    After : Placeholder (Accompanist)
    ■ ローディング表示する画面もJetpackComposeのプレビュー機能を活用したい
    ■ 新しい画面はPlaceholderでローディング表示
    ■ ShimmerからPlaceholderへの移行
    ■ Shimmerを使っている画面を改修するタイミングで少しずつ
    実装アプローチとライブラリの変更点
    Placeholder
    10

    View Slide

  11. Mobility Technologies Co., Ltd.
    今後のJetpack Composeで
    やりたいこと
    03
    11

    View Slide

  12. 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

    View Slide

  13. Mobility Technologies Co., Ltd.
    ■ プレビュー機能の活用を優先し、2つの実装の共存を許容する
    ■ それぞれの画面によってレイアウトを使い分ける
    今後のJetpackComposeでやりたいこと
    1. 既存レイアウトをJetpackComposeで再実装
    13
    AndroidView ConposeView

    View Slide

  14. Mobility Technologies Co., Ltd.
    ■ AndroidViewの内部でComposeViewを参照して実装を1つに揃える
    ■ 参照している全画面に影響があるため動作確認が大変
    今後のJetpackComposeでやりたいこと
    2. 既存AndroidViewをJetpackComposeに置き換え
    14
    AndroidView ConposeView

    View Slide

  15. Mobility Technologies Co., Ltd.
    ■ AndroidViewの内部変更によって、意図しない変更が起きてないか確認する
    ■ スクショテストによって安心してJetpackCompose化を進められる
    今後のJetpackComposeでやりたいこと
    3. レイアウト変更をスクショテストで確認
    15

    View Slide

  16. 文章·画像等の内容の無断転載及び複製等の行為はご遠慮ください。
    Mobility Technologies Co., Ltd.
    16

    View Slide