クックパッドマートの JetpackCompose 事情 & Preview を使い倒したい話

Transcript

1. クックパッドマートの Jetpack Compose 事情 & Previewを使い倒 したい話
2. Yuto Koguchi - 小口 雄斗 - Twitter: @10llip0p - 2020年新卒入社（3年目） - Androidエンジニア - 買物プロダクト開発部 - クックパッドマートアプリ開発 - 趣味 - 車、GeoGuessr
4. JetpackCompose の魅力 - 宣言的で直感的に UI を構築できる - コード量を削減できる - Preview が充実している
5. JetpackCompose の魅力 - 宣言的で直感的に UI を構築できる - コード量を削減できる - Preview が充実している✨🚀 - クックパッドマートアプリの一番の導入モチベ - 元々 Groupie で UI を構築していたがプレビューが弱点だった - Live Preview がサポートされたのでますます魅力
6. - EC サービスは1つの画面で分岐する表示制御が多くて確認が大変 - 例：商品種別ごとに記載を変更する表示 - 例：時系列で変化する商品の配送状況の表示 Preview へのクックパッドマートのモチベ 通常 割引あり アルコール商品 例：商品詳細画面
7. Groupie に対して感じていた課題 - 画面全体のプレビューができない - どの画面にどのUIが実装されているのかわかりづらい 実行時の表示例 Layout Editor での表示例
8. Groupie に対して感じていた課題 - RecyclerViewがネストされた構成になり実装が複雑化 →ますます Preview が難しい
9. クックパッドマートのJetpack Compose事情 Jetpack Compose 導入戦略 - Preview を使いやすいアーキテクチャに整備 - 実装時の判断コストを下げる決め事、コンポーネントの整備 Groupie と Jetpack Compose の併用に向けた環境整備
10. Activity / Fragment Composable ViewModel DataSource Groupie (RecyclerView) Groupie Item UiState API LiveData / StateFlow datasouce app ui ①アクション has ⑤状態を通知 ④データを整形・状態を更新 ⑥表示を更新 ③データ取得 ②レスポンス Preview 活用のためのアーキテクチャ構成 UI Event Interface implement ComposeView (state holder Layer) ⑥composition 画面表示に関するリソース を集約したモジュール。 Preview build のスコープを 小さくする役割 実際は更に ui:feature:<画 面> module に細分 依存関係・データフローを片 方向に整備
11. ⑤状態を更新 Activity / Fragment ViewModel DataSource Groupie (RecyclerView) Groupie Item API LiveData datasouce app ①アクション ⑥状態を通知 ⑦表示を更新 ④データ整形・ viewの更新をcall ②レスポンス 余談：旧アーキテクチャ構成 Presenter ③データ取得 Contract Presenter Interface View Interface Data Models (Entity) has implement
12. Jetpack Compose 実装についての決め事 - 画面構成の分割単位・呼称・命名方針を統一 - Screen - 画面全体 - 単一の UiState に基づいて描画 - Section - 画面一行のまとまり - 過去実装での GroupieItem の構成単位に相当 - Component - Sectionを構成するパーツ - 各要素の UI Event は Interface に定義してActivity/Fragment に実装 - composition 時に引数に渡す - 基本的に Screen の実装時に Preview を用意する
13. DEMO
14. - 共通 Scaffold composable を用意 - ローディング・エラー表示のボイラープ レートコードを共通化 - PaddingValues 対応漏れ対策 - 基底 UiState interface を用意 - ローディング・エラーの状態管理のコー ドベースを統一 ➔ 画面実装時は表示コンテンツの考慮だ けで良くなった その他工夫：共通ページレイアウト
15. その他工夫：共通ページレイアウト ローディング エラー - 共通 Scaffold composable を用意 - ローディング・エラー表示のボイラープ レートコードを共通化 - PaddingValues 対応漏れ対策 - 基底 UiState interface を用意 - ローディング・エラーの状態管理のコー ドベースを統一 ➔ 画面実装時は表示コンテンツの考慮だ けで良くなった
16. - [方針] 既存アーキテクチャと共存させながら段階的に移行する - GroupieItem の UI 実装を個別に Jetpack Compose 実装に切り出す - GroupieItem には ComposeView だけを置いて Jetpack Compose の 実行環境として使用する Activity / Fragment Groupie (RecyclerView) Item Compose Activity / Fragment Groupie (RecyclerView) Groupie → Jetpack Compose の移行戦略 bind setContent bind Compose Item Item Item Item Item Item Item Item Item Compose Compose Compose Compose Compose Compose UI UI GroupieItem ComposeView 詳細はブログへ
17. - [方針] 既存アーキテクチャと共存させながら段階的に移行する - 描画パフォーマンスの問題 - AndroidView in Jetpack Compose 構成のコンポーネントを大量に 描画した際に OOM が発生 - UX の問題 - AndroidView in Jetpack Compose のコンポーネントでスクロール中 のフォーカスが AndroidView に奪われる（スクロールが引っかかる） - RecyclerView で再描画する際に高さが保持されずに表示位置がずれる 挙動 Groupie → Jetpack Compose の移行戦略 失敗
18. - Groupie (RecyclerView)実装でも Column, Row のように書きたい - ①汎用 GroupieItem（ViewBindingItem） を実装 - 実装時は ViewBinding の処理だけに集中できるようになった Groupie を Jetpack Compose に近づける 利用例
19. - ② GroupAdapter の利用を簡略化する DSL を定義 Groupie を Jetpack Compose に近づける
20. - 【結果】Groupie, GroupieItem を Jetpack Compose に近い書き味で実装可能になった Groupie を Jetpack Compose に近づける Groupie 実装 JetpackCompose（AndroidViewBinding）実装 この中が Column/Row の ように書ける
21. 詳細はブログへ
22. まとめ - 単方向の依存関係・データフローな構成で Jetpack Compose の Preview を効率良く実行するアーキテクチャを 整備している - Jetpack Compose 実装時の決め事や共通コンポーネント を整備して実装時の判断コストやミス、レビューコストを削減 している - Groupie と Jetpack Compose を併用しやすくする仕組みを 構築している
23. 今後の展望（妄想） - Preview するテストデータを自動生成したい - 複数の表示パターンを手書きで定義するのが大変 - 案 - API レスポンスの Mock（う〜ん... 🤔） - Preview Parameter （結局手書き... 🤔） - API 実装のテストデータを流用（完全に妄想）
24. 今後の展望（妄想） - PR description に Preview のスクショを自動で貼りたい - 先行事例： Add automatic preview screenshot testing with Paparazzi and Showkase https://github.com/android/nowinandroid/pull/101 - やりたいことに対して大げさかも... 🤔
25. 最後に - クックパッドでは新しい技術を積極的に取り入れてプロダクト 開発を行っています - サービスや事業への興味はもちろん開発環境の整備や体 験改善に意欲のある方もぜひご応募お待ちしてます 🚀 https://info.cookpad.com/careers/jobs/