MAD Skills: The UI layer
URL:https://www.youtube.com/watch?v=p9VR8KbmzEE&list=PLWz5rJ2EKKc8GZWCbUm3tBXKeqIi3rcVX&index=3
一言で表すと
UDFを意識してUI層も作ろうね
概要
UIレイヤーの役割はデータを画面に表示することとユーザー操作の受け口
App data -> UI dataへの変換
UI data -> UI element UI要素への反映
User events -> UI changes ユーザー操作によるUIの変化
👆の3つを繰り返す
下記の通り進める
UI Stateの定義
UnidirectionalなUI Stateの提供
UI Stateの公開方法
UI Stateの購読方法
UI Stateの定義
UIとは?
https://developer.android.com/topic/libraries/architecture/images/mad-arch-ui-elements-state.png?hl=ja
UI StateはImmutableにしよう
UIからUI Stateは更新しないようにしよう
データのソースまたはオーナーのみが、公開するデータの更新責務を負うべき
1 つのストリームか複数のストリームか問題
UI 状態を 1 つのストリームで公開するか複数のストリームで公開するかを選択する際は、出力されるアイテム間の関係
1 つのストリームで公開する最大の利点
利便性とデータの整合性です。状態のコンシューマは、最新の情報をいつでも利用できます。ただし、次のように、ViewModel からの個別の状態ストリームを使用することが適切な場合もあります。
関連のないデータ型
UI のレンダリングに必要な状態は、互いに完全に独立している場合がある。完全に異なる複数の状態を一緒にまとめるとコストがメリットを上回る可能性がある
RyuNen344.iconここ具体的にどれくらいの独立度合いなのかもやついている
ある状態が他の状態より頻繁に更新される場合は特にそう
UiState の差分抽出: UIには差文検知がないのでUI Stateのfield数が増えるとそれだけUI側の更新頻度が増える可能性が増えてしまう、適宜distinctUntilChanged等を使って抑制したほうがいい
UI Stateの提供
ViewModelはStateHolder
UIに購読させるUI StateをViewModelに持たせる
UIはユーザー操作をViewModelに伝える
データ更新の場合はデータレイヤーでデータを更新し、それをViewModelが購読し(以下ループ
ViewModelでUI Stateに変換する
UI Stateの公開方法
自動でデータ更新が通知されるStateFlowかLiveDataで公開する
最新のデータを保持する形はconfiguration chagneからの復帰に便利
Jetpack composeだとstate APIかsnapshot flowを使える
UI Stateの購読方法
UIで購読する際に重要なのはUIのライフサイクル
ViewModel(StateHolder)はUIより長生きなのでobserveするときはUIのライフサイクルに合わせて購読する
coroutine flowならrepeatOnLifecycle(Lifecycle.State.STARTED) 用いる、など
気になるポイント
ViewModelはStateHolderと言い切っているところ
RyuNen344.iconクラス名とか今後どうするんだろ:thinking_face:
mayamito.icon まあUI StateのModelのHolerということはViewのModelでViewModelってことでいいのかも(?)
chigichan24.icon まあStateのHolderでしかないというのは、それはそう
メモ
コメント