既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose

by Ryosuke Horie

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© ZOZO, Inc. 8 ● Fashion Advisors are Neighbors略  ● 「ショップスタッフの  効率的な販売をサポートする  ショップスタッフ専用ツール」  ● Web, iOS, Androidで提供  FAANSとは  プレスリリース: ZOZOTOWNとブランド実店舗をつなぐOMOプラットフォーム「ZOZOMO」始動 - 株式会社ZOZO, https://corp.zozo.com/news/20211028-16352/

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© ZOZO, Inc. 24 ● ZOZOでの導入状況  ○ ZOZOTOWNでは導入済み  ○ WEARは近日中  Jetpack Compose使ってますか？  ZOZOTOWN AndroidへのJetpack Compose導入の取り組み - ZOZO TECH BLOG, https://techblog.zozo.com/entry/zozotown-android-jetpack-compose

Slide 25

Slide 25 text

© ZOZO, Inc. 25 ● 開発効率が向上  ○ 直感的な宣言型API  ○ シンプルなコードでのUIの記述が可能  例: UIの出し分け、リスト表示  ○ 既存のViewベースなUIとの相互運用が容易  ○ ドキュメントやサンプルコードが豊富  ● 一部の既存ViewベースUIと相性が悪い  ○ 例: BottomSheetDialogFragment  Jetpack Composeを導入してどうだったか？ 

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© ZOZO, Inc. 27 ● 画面全体を一度に書き換えるのは難しい  ○ リソース、タスク優先度、開発期間 etc…  ● 相互運用APIの存在  ○ 既存ViewベースUIとComposeを組み合わせて実装可能  ○ 既存画面のUI要素を1つずつComposeへ移行可能  ○ https://developer.android.com/jetpack/compose/interop  ● 既存画面を段階的にComposeに書き換えていく  既存画面のJetpack Composeでの書き換え 

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

© ZOZO, Inc. 30 ● UI Stateに画面の描画に必要な情報をまとめる  ● UIの状態公開は1箇所に制限  例. 複数のLiveDataの公開は避ける  ● 単方向データフロー(UDF)に沿わせる  1.データの流れの整理    Android Developers アプリアーキテクチャガイド UIレイヤ, https://developer.android.com/jetpack/guide/ui-layer

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© ZOZO, Inc. 34 ● 複数のLiveDataが公開  ○ 状態の公開は1つに制限  ○ データは1つのデータクラスにまとめる    コーディネート詳細: データの流れの整理    @HiltViewModel class CoordinateDetailDelegateImpl @Inject constructor( private val faansApiRepository: FaansApiRepository ) : ViewModel(), CoordinateDetailDelegate { private val _coordinate = MutableLiveData() override val coordinate: LiveData get() = _coordinate private val _navigateToEditCoordinate = MutableLiveData>() override val navigateToEditCoordinate : LiveData> get() = _navigateToEditCoordinate private val _isLoading = MutableLiveData() override val isLoading: LiveData get() = _isLoading private val _hasError = MutableLiveData() override val hasError: LiveData get() = _hasError

Slide 35

Slide 35 text

© ZOZO, Inc. 35 ● 複数のLiveDataが公開  ○ 状態の公開は1つに制限  ○ データは1つのデータクラスにまとめる  ○ Eventクラスでラップした値(1度だけ処理したい)  ■ 状態とは別に公開    コーディネート詳細: データの流れの整理    private val _navigateToEditCoordinate = MutableLiveData>() override val navigateToEditCoordinate: LiveData> get() = _navigateToEditCoordinate

Slide 36

Slide 36 text

© ZOZO, Inc. 36 private val _state = MutableStateFlow(State.Initial) val state: StateFlow = _state private val _event = MutableSharedFlow() val event: SharedFlow = _event data class State( val isLoading: Boolean = false, val coordinate: CoordinateDetail? = null, val coordinateReviewComment: String? = null, val totalViewCount: Long = 0, val totalSalesAmount: Long = 0, val coordinateItems: List = listOf(), ) { companion object { val Initial = State(isLoading = true) } } sealed interface Event { data class OnTransitionToEditPage(...) : Event }

Slide 37

Slide 37 text

© ZOZO, Inc. 37 private val _state = MutableStateFlow(State.Initial) val state: StateFlow = _state private val _event = MutableSharedFlow() val event: SharedFlow = _event data class State( val isLoading: Boolean = false, val coordinate: CoordinateDetail? = null, val coordinateReviewComment: String? = null, val totalViewCount: Long = 0, val totalSalesAmount: Long = 0, val coordinateItems: List = listOf(), ) { companion object { val Initial = State(isLoading = true) } } sealed interface Event { data class OnTransitionToEditPage(...) : Event }

Slide 38

Slide 38 text

© ZOZO, Inc. 38 private val _state = MutableStateFlow(State.Initial) val state: StateFlow = _state private val _event = MutableSharedFlow() val event: SharedFlow = _event data class State( val isLoading: Boolean = false, val coordinate: CoordinateDetail? = null, val coordinateReviewComment: String? = null, val totalViewCount: Long = 0, val totalSalesAmount: Long = 0, val coordinateItems: List = listOf(), ) { companion object { val Initial = State(isLoading = true) } } sealed interface Event { data class OnTransitionToEditPage(...) : Event }

Slide 39

Slide 39 text

© ZOZO, Inc. 39 ● UIへのユーザーインプット  ○ Actionとしてまとめる  ○ ActionによってStateの更新、Eventの発行を実行    コーディネート詳細: データの流れの整理    fun onClickEditCoordinate(coordinate: CoordinateDetail) { _navigateToEditCoordinate.value = Event(coordinate) }

Slide 40

Slide 40 text

© ZOZO, Inc. 40 sealed interface Action { data class EditCoordinateDetail(...) : Action } fun dispatchAction(action: Action) { when (action) { is Action.EditCoordinateDetail -> _event.emit( Event.OnTransitionToEditPage(...) ) } }

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

© ZOZO, Inc. 44 ● AbstractComposeViewを継承してCustomViewを作成  ● Content関数でComposeを実装  class CoordinateImageView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { @Composable override fun Content() { FaansTheme { CoordinateImage(...) } } } @Composable fun CoordinateImage(...) {} コーディネート詳細: UI要素のComposeへの書き換え   

Slide 45

Slide 45 text

© ZOZO, Inc. 45 class CoordinateImageView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { var coordinate by mutableStateOf(null) var coordinateItems = mutableStateListOf() @Composable override fun Content() { FaansTheme { CoordinateImage(coordinate, coordinateItems) } } } @Composable fun CoordinateImage( coordinate: CoordinateDetail?, coordinateItems: List, ) {...}

Slide 46

Slide 46 text

© ZOZO, Inc. 46 class CoordinateImageView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { var coordinate by mutableStateOf(null) var coordinateItems = mutableStateListOf() @Composable override fun Content() { FaansTheme { CoordinateImage(coordinate, coordinateItems) } } } @Composable fun CoordinateImage( coordinate: CoordinateDetail?, coordinateItems: List, ) {...}

Slide 47

Slide 47 text

© ZOZO, Inc. 47 ● 通常のCustomViewと同様にlayout.xmlに記述  ● データを渡したい場合も同様に可能  ● CustomViewの利用側はComposeで実装されているかを  意識する必要が無い  binding.coordinateImageView.run { this.coordinate = coordinate coordinateItems.addAll(state.coordinateItems) } コーディネート詳細: UI要素のComposeへの書き換え    . . .

Slide 48

Slide 48 text

© ZOZO, Inc. 48 ● Callbackを処理したい場合は？  ● 関数型でStateを宣言し結果をラムダで受け取る  コーディネート詳細: UI要素のComposeへの書き換え    class MyButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { var onClick by mutableStateOf<() -> Unit>({}) @Composable override fun Content() { FaansTheme { MyButton(onClick) } } } binding.myButtonView.onClick = {}

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

© ZOZO, Inc. 51 ● 画面のほとんどの要素がComposeに移行  ● 残るTopAppBarをComposeへ移行  ● 画面全体をComposeで書き換える  コーディネート詳細: 画面全体をComposeへ書き換え    @Composable fun CoordinateDetailScreen( state: State = State.Initial, actionDispatcher: (Action) -> Unit = { _ -> }, ) { Scaffold( topBar = { TopAppBar(state, actionDispatcher) } ) {...} }

Slide 52

Slide 52 text

© ZOZO, Inc. 52 Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()), ) { CoordinateImage(...) if (!state.coordinateReviewComment.isNullOrEmpty()) { ReviewComment(...) } else { CoordinateCounts(...) } TextAboutCoordinate(...) PublishDate(...) CoordinateItemAndTag(...) }

Slide 53

Slide 53 text

Slide 54

Slide 54 text

© ZOZO, Inc. 54 class CoordinateImageView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { var coordinate by mutableStateOf(null) var coordinateItems = mutableStateListOf() @Composable override fun Content() { FaansTheme { CoordinateImage(coordinate, coordinateItems) } } } @Composable fun CoordinateImage( coordinate: CoordinateDetail?, coordinateItems: List, ) {...}

Slide 55

Slide 55 text

Slide 56

Slide 56 text

© ZOZO, Inc. 56 ● ComposeのNavigation Componentへ移行することで削除可能  ● 全てのFragmentをComposeのラッパーとした後移行、削除  ● 現状FAANSではFragmentベースのNavigation Componentを使用    参考: https://developer.android.com/jetpack/compose/navigation#navigate-fro m-Compose    Fragment自体の削除   