Handling View State and Events with RainbowCake (Conference for Kotliners 2020)

Handling View State and Events
with RainbowCake
Márton Braun
zsmb.co zsmb13

View Slide

RainbowCake
rainbowcake/rainbowcake

View Slide

RainbowCake
An Android architecture framework
library
test

View Slide

RainbowCake
An Android architecture library
concept
framework

View Slide

RainbowCake
An Android architecture concept
thingie
library

View Slide

RainbowCake
An Android architecture thingie
framework
concept

View Slide

RainbowCake
test
thingie

View Slide

RainbowCake
libraries

View Slide

RainbowCake
libraries
guidance

View Slide

RainbowCake
Threading
Dependency injection
Layers
View state handling
Navigation
Models

View Slide

MvRx
airbnb/MvRx
Orbit MVI
babylonhealth/orbit-mvi
Roxie
ww-tech/roxie
Mosby
sockeqwe/mosby
Eiffel
etiennelenhart/Eiffel
Uniflow
uniflow-kt/uniflow-kt
MVICore
badoo/MVICore
RainbowCake
Mobius
spotify/mobius

View Slide

2020
2019
Start of
development
Moved into
a library
Workshop
Modules
Koin support Testing module
Repackage, website launch
GitHub, MavenCentral AndroidX
1.0
MVICore
MvRx
Orbit MVI
Uniflow
Roxie
[0]

View Slide

ItemApi
ItemDao
NetworkDataSource
DiskDataSource
ShopInteractor
UserInteractor
ProfilePresenter CartPresenter
HomePresenter
ProfileViewModel CartViewModel
HomeViewModel
CartViewState
ProfileViewState
HomeViewState
CartFragment
ProfileFragment
HomeFragment

View Slide

Dao
Data source
Interactor
Presenter
ViewModel
ViewState
Fragment

View Slide

ViewState
ViewModel
Presenter
Interactor
Data source
Dao
Fragment

View Slide

ViewModel
Presenter
Interactor
Data source
Fragment

View Slide

RainbowCake

View Slide

Data source
Interactor
Presenter
ViewModel
Fragment

View Slide

MVVM
View access through an
interface
Separation of View and
business logic
Component between
View and Model
MVP

View Slide

MVVM
interface
business logic
Component between
View and Model
MVP
business logic

View Slide

MVVM
interface
business logic
Component between
View and Model
MVP
business logic
Component between
View and Model

View Slide

MVVM
interface
business logic
Component between
View and Model
MVP
interface
business logic
Component between
View and Model

View Slide

Observable state
exposed to the View
MVVM
interface
business logic
Component between
View and Model
MVP
interface
business logic
Component between
View and Model

View Slide

interface
MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
MVP
interface
business logic
Component between
View and Model

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVP
interface
business logic
Component between
View and Model

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI
Single View state object

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI
Reactive data streams

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI
Input events as objects

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI
Reducer

View Slide

MVVM
business logic
Component between
View and Model
Observable state
exposed to the View
Data binding*
MVI
Reducer
[1]

View Slide

State handling

View Slide

View Slide

app
RainbowCake

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel ViewModel()
class ProfileViewModel : RainbowCakeViewModel()
:

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel ViewModel() {
protected val _state: MutableLiveData> = MutableLiveData()
val state: LiveData> = _state
}
:

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel ViewModel() {
protected val _state: MutableLiveData = MutableLiveData()
val state: LiveData = _state
}
:

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel : ViewModel() {
}

View Slide

app
RainbowCake
}
sealed class ProfileViewState
object Loading : ProfileViewState()
data class ProfileLoaded(val name: String) : ProfileViewState()
[2]

View Slide

app
RainbowCake
}

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel
val state: LiveData = _state.distinct()
}
: ViewModel() {
[3]

View Slide

app
RainbowCake
abstract class RainbowCakeViewModel(
initialState: VS
)
}
: ViewModel() {

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
init {
_state.value = initialState
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
init {
}
}
class ProfileViewModel : RainbowCakeViewModel(Loading) {
fun loadProfile() {
viewModelScope.launch {
_state.value = Loading

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
init {
}
}
fun loadProfile() {
_state.value = Loading
_state.value = ProfileLoaded(loadUserName())
}
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
init {
}
}
fun loadProfile() {
_state.value =
_state.value =
}
}
}
_state.value!!.copy(isLoading = true)
_state.value!!.copy(name = )
loadUserName()

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
init {
}
}

View Slide

RainbowCake
protected var viewState: VS
get() = _state.value!!
set(value) {
_state.postValue(value)
}
initialState: VS
) : ViewModel() {
}
init {
}
val _state: MutableLiveData = MutableLiveData()
private

View Slide

app
RainbowCake
fun loadProfile() {
_state.value = _state.value!!.copy(isLoading = true)
_state.value = _state.value!!.copy(name = loadUserName())
}
}
}
initialState: VS
) : ViewModel() {
set(value) {
}
}

View Slide

app
RainbowCake
=
=
viewState
viewState
viewState
viewState
.copy(isLoading = true)
.copy(name = loadUserName())
fun loadProfile() {
}
}
}
initialState: VS
) : ViewModel() {
set(value) {
}
}

View Slide

app
RainbowCake
loadUserName()
( )
Loading
ProfileLoaded
initialState: VS
) : ViewModel() {
set(value) {
}
}
fun loadProfile() {
viewState =
viewState =
}
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
set(value) {
}
}
fun loadProfile() {
viewState = Loading
viewState = ProfileLoaded(loadUserName())
}
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
set(value) {
_state.setValue(value)
}
}
fun loadProfile() {
viewState = Loading
}
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
set(value) {
}
}
fun loadProfile() {
viewState = Loading
}
}
}

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
set(value) {
}
}
println(viewState is Loading)
fun loadProfile() {
viewState = Loading
}
}
}
[4]

View Slide

app
RainbowCake
) : ViewModel() {
set(value) {
}
}
fun loadProfile() {

View Slide

app
RainbowCake
abstract class RainbowCakeFragment : Fragment()
class ProfileFragment : RainbowCakeFragment()

View Slide

RainbowCake
{
protected lateinit var viewModel: ?
}
app
abstract class RainbowCakeFragment : Fragment()

View Slide

app
RainbowCake
abstract class RainbowCakeFragment Fragment() {
protected lateinit var viewModel VM
}
:
:

View Slide

app
RainbowCake
abstract class RainbowCakeFragment : Fragment() {
protected lateinit var viewModel: VM
}

View Slide

app
RainbowCake
abstract class RainbowCakeFragment> : Fragment() {
}
:

View Slide

RainbowCake
?
app
abstract class RainbowCakeFragment>
}
: : Fragment(

View Slide

app
RainbowCake
}
: Fragment() {

View Slide

app
RainbowCake
: Fragment() {
}

View Slide

RainbowCake
: Fragment() {
protected lateinit var viewModel
abstract fun provideViewModel(): VM
@CallSuper
override fun onAttach(context: Context) {
super.onAttach(context)
viewModel = provideViewModel()
}
app
:
: VM
}

View Slide

RainbowCake
app
class ProfileFragment : RainbowCakeFragment() {
}
@CallSuper
}
override fun provideViewModel() = getViewModelFromFactory()
: Fragment() {
}
[5]

View Slide

RainbowCake
app
}
@CallSuper
}
: Fragment() {
}

View Slide

RainbowCake
@CallSuper
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
viewModel.state.observe(viewLifecycleOwner, Observer { viewState ->
})
}
app
}
: Fragment() {
}

View Slide

RainbowCake
@CallSuper
})
}
app
}
: Fragment() {
}
[6]

View Slide

app
RainbowCake
:
: Fragment() {
abstract fun render(viewState VS)
}
viewState?.let { render(it) }
})
}
@CallSuper
}
override fun render(viewState: ProfileViewState) {
when (viewState) {
Loading -> { ... }

View Slide

app
RainbowCake
when (viewState) {
Loading -> { ... }
is ProfileLoaded -> { ... }
}
}
:
abstract fun render(viewState VS)
}
: Fragment() {
})
}
}

View Slide

app
RainbowCake
: Fragment() {
})
}
abstract fun render(viewState: VS)
}
when (viewState) {
Loading -> { ... }
}
}
}
.exhaustive
[2]

View Slide

app
when (viewState) {
Loading -> { ... }
}
}
}
.exhaustive
viewModel.loadProfile()
}

View Slide

Event handling

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
}
class ProfileViewModel : RainbowCakeViewModel(Loading)

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
}
SingleShotLiveData>()
events: MutableLiveData> =
val

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
}
events: MutableLiveData> =
val
[7]

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
protected _
val events: LiveData> = _events
}
val events: MutableLiveData> =

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
protected val _events: MutableLiveData =
SingleShotLiveData()
val events: LiveData = _events
}

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
}
abstract class RainbowCakeFragment<
VS : Any, VE : Any, VM : RainbowCakeViewModel
> : Fragment

View Slide

RainbowCake
app
class ProfileViewModel : RainbowCakeViewModelabstract class RainbowCakeViewModel(
initialState: VS
) : ViewModel() {
}
abstract class RainbowCakeFragment<
VS : Any, VE : Any, VM : RainbowCakeViewModel
> : Fragment

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
protected val _events: MutableLiveData> =
}

View Slide

RainbowCake
app
initialState: VS
) : ViewModel() {
protected val _events: MutableLiveData> =
}
interface OneShotEvent

View Slide

RainbowCake
app
class ProfileViewModel RainbowCakeViewModel(Loading)
initialState: VS
) : ViewModel() {
}
:
{
object SaveFailedEvent : OneShotEvent

View Slide

RainbowCake
private
app
class ProfileViewModel RainbowCakeViewModel(Loading) {
fun saveProfile() {
_events.value = SaveFailedEvent
}
}
:
}
initialState: VS
) : ViewModel() {
val _events: MutableLiveData =
protected

View Slide

app
RainbowCake
protected fun postEvent(event: OneShotEvent) {
_events.postValue(event)
}
}
initialState: VS
) : ViewModel() {
val _events: MutableLiveData =
private
class ProfileViewModel RainbowCakeViewModel(Loading) {
fun saveProfile() {
_events.value = SaveFailedEvent
}
}
:

View Slide

app
RainbowCake
initialState: VS
) : ViewModel() {
private val _events: MutableLiveData =
}
}
fun saveProfile() {
postEvent(SaveFailedEvent)
}
}

View Slide

app
RainbowCake

View Slide

app
RainbowCake
@CallSuper
})
}
abstract fun render(viewState: VS)
when (viewState) {
Loading -> { ... }
}.exhaustive
}
viewModel.loadProfile()
}
}
}
@CallSuper
}
abstract class RainbowCakeFragment> : Fragment() {

View Slide

app
RainbowCake
}
}
@CallSuper
}
: Fragment() {

View Slide

app
RainbowCake
@CallSuper
viewModel.events.observe(this, Observer { event ->
event?.let { onEvent(it) }
})
}
protected open fun onEvent(event: OneShotEvent) {}
}
: Fragment() {
}
override fun onEvent(event: OneShotEvent) {
when (event) {
is SaveFailedEvent -> showErrorMessage()

View Slide

app
RainbowCake
@CallSuper
})
}
}
: Fragment() {
}
override fun onEvent(event: OneShotEvent) {
when (event) {
is SaveFailedEvent -> showErrorMessage()
}
}

View Slide

ViewModel
Fragment

View Slide

ViewModel
Fragment 1

View Slide

ViewModel
Fragment

View Slide

ViewModel
Fragment 2

View Slide

ViewModel
Fragment 3

View Slide

ViewModel
Fragment

View Slide

app
RainbowCake
fun saveProfile() {
}
}
initialState: VS
) : ViewModel() {
}
}

View Slide

app
RainbowCake
fun saveProfile() {
}
}
initialState: VS
) : ViewModel() {
QueuedSingleShotLiveData()
}
}
[8]

View Slide

ViewModel
Fragment

View Slide

ViewModel
Fragment 1

View Slide

ViewModel
Fragment 1 2

View Slide

ViewModel
Fragment 2

View Slide

ViewModel
Fragment

View Slide

ViewModel
Fragment
Fragment
Fragment

View Slide

Fragment
Fragment
Fragment
ViewModel

View Slide

RainbowCake
interface LiveDataCollection {
fun observe(owner: LifecycleOwner, observer: Observer)
}
interface MutableLiveDataCollection : LiveDataCollection {
fun setValue(value: T?)
fun postValue(value: T?)
}

View Slide

RainbowCake
class MutableLiveDataCollectionImpl(
private val factory: () -> MutableLiveData
) : MutableLiveDataCollection {
}
}
}

View Slide

RainbowCake
private val activeLiveData: MutableSet> = mutableSetOf()
}
}
}

View Slide

RainbowCake
/* ... */
}
}
}
override fun observe(owner: LifecycleOwner, observer: Observer) {
}
val liveData = factory()
activeLiveData += liveData
// ...

View Slide

RainbowCake
val liveData = factory()
activeLiveData += liveData
// ...
}
}
}
override fun setValue(value: T?) {
activeLiveData.forEach { it.setValue(value) }
}
override fun postValue(value: T?) {
activeLiveData.forEach { it.postValue(value) }
}
override fun observe(owner: LifecycleOwner, observer: Observer) { }
/* ... */

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
QueuedSingleShotLiveData()
}
}
: Fragment() {
// ...
})
}
}

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
private val _events: MutableLiveDataCollection =
MutableLiveDataCollectionImpl(::QueuedSingleShotLiveData)
}
}
: Fragment() {
// ...
})
}
}

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
private val _events: MutableLiveDataCollection =
val events: LiveDataCollection = _events
}
}
: Fragment() {
// ...
})
}
}

View Slide

ViewModel
Fragment

View Slide

ViewModel
Fragment 1

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
private val viewEvents: MutableLiveDataCollection =
MutableLiveDataCollectionImpl(::ActiveOnlySingleShotLiveData)
val events: LiveDataCollection = viewEvents
viewEvents.postValue(event)
}
}
private val queuedViewEvents: MutableLiveDataCollection =
val queuedEvents: LiveDataCollection = queuedViewEvents
protected fun postQueuedEvent(event: QueuedOneShotEvent) {
queuedViewEvents.postValue(event)
}

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
}
}
}
[9]

View Slide

RainbowCake
initialState: VS
) : ViewModel() {
}
}
}

View Slide

RainbowCake
interface QueuedOneShotEvent : OneShotEvent
: Fragment() {
// ...
}
})

View Slide

RainbowCake
: Fragment() {
// ...
}
}
})

View Slide

RainbowCake
: Fragment() {
// ...
viewModel.queuedEvents.observe(this, Observer { event ->
})
}
}
})

View Slide

ViewModel
Fragment
Fragment
Fragment

View Slide

ViewModel
Fragment

View Slide

But… these are all hacks!

View Slide

RainbowCake

View Slide

RainbowCake
rainbowcake.dev

View Slide

RainbowCake

View Slide

zsmb13
zsmb.co/talks

View Slide

Handling View State and
Events with RainbowCake
zsmb.co/talks
zsmb13
Márton Braun › Built on Jetpack
› Single view state
› Two event streams
› Many LiveData hacks

View Slide

Handling View State and Events with RainbowCake (Conference for Kotliners 2020)

Handling View State and Events with RainbowCake (Conference for Kotliners 2020)

Marton Braun

More Decks by Marton Braun

Other Decks in Programming

Featured

Transcript