MVI made for Android

State management is one of the challenging task while developing softwares and recently MVI is one of the architecture pattern which promises to help us with it.
There have been multiple talks about "why" and "what" MVI is and there are several libraries and framework providing their own MVI implementation for Android.

In this talk, we will combine the power of MVI with MVVM [ViewModel and LiveData] to have peace with the platform rather than fight it.

Agenda
- What is MVI?
- Leverage the power of ViewModel and LiveData
- How Roxie to can help you do it?
- Testing with Roxie [MVI]
- Efficient workflow with MVI

You’ll walk away with solid idea of how to do “build MVI for Android” combined with power of Kotlin and MVVM [ViewModel and LiveData]

Transcript

1. @AkshayChordiya MVI made for Android
2. Backstory
3. MVVM ❤ MVI
4. MVVM MVI
5. MVVM + MVI
6. The aim Help with state management Productive workflow Ability to parallelise within the team Focus on business logic Promotes Testing
7. Let’s first look at real world interaction
8. Real world interaction Want Beer? Yes
9. HCI {Human Computer Interaction} Output Output Input Input
10. view() intent() user() model() Unidirectional
11. user()
12. intent(user())
13. model(intent(user()))
14. view(model(intent(user())))
15. user(view(model(intent(user()))))
16. intent(user(view(model(intent(user())))))
17. view(model(intent(user())))
18. view(model(intent())) Pure Function
19. Wait….what about database and networking
20. view() intent() user() model() side effects
21. Let’s call intent as action*
22. Unidirectional pipeline Action Change Reducer State 1..n Intent Previous State? +
23. There are lot of things to solve for Android with MVI architecture Lots of Rx Configuration change Make it play well with Activities and Fragments
24. Architecture Components
25. MVVM ⛏ Android
26. MVVM ❤ Android
27. MVVM ❤ Android
28. Let’s follow MVVM with a twist of MVI
29. View [UI Controller] ViewModel [Presentation Logic] Model [Business logic]
30. View [UI Controller] Repository Local Data Source Remote Data Source Local DB Remote ViewModel
31. View [UI Controller] Repository Remote Data Source ViewModel LiveData LiveData LiveData Local DB Remote Local Data Source
32. View [UI Controller] Repository Local Data Source Remote Data Source ViewModel LiveData LiveData LiveData Local DB Remote
33. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Reducer ViewModel View
34. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Action Reducer ViewModel View
35. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Action Reducer ViewModel View
36. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Action Reducer ViewModel View
37. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Action Reducer ViewModel View
38. User interacts with UI Action / Initial action Action to changes State Changes + Previous State Local DB Remote State Action Reducer ViewModel View
39. View [UI Controller] Repository Remote Data Source ViewModel LiveData LiveData LiveData Reducer Action State LiveData Local Data Source Local DB Remote
40. View [UI Controller] Repository Remote Data Source ViewModel LiveData LiveData LiveData Reducer Action State Rx Local Data Source Local DB Remote
41. View [UI Controller] Repository Remote Data Source ViewModel LiveData LiveData LiveData Reducer Action State Coroutines Local Data Source Local DB Remote
42. View [UI Controller] Repository Remote Data Source ViewModel LiveData LiveData LiveData Reducer Action State Flow Local Data Source Local DB Remote
43. View [UI Controller] Repository Local Data Source Remote Data Source ViewModel LiveData LiveData LiveData Reducer Action State LiveData Async Local DB Remote
44. Roxie
46. It’s a super light-weight library 50 lines Foundation for MVI 60 method count
47. private val newsViewModel by lazy { getViewModel<NewsViewModel>() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) … // Observe for state changes newsViewModel.observableState.observe(this) { state -> renderState(state) } // Dispatch initial action to load news newsViewModel.dispatch(Action.LoadNews) }
48. private val newsViewModel by lazy { getViewModel<NewsViewModel>() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) … // Observe for state changes newsViewModel.observableState.observe(this) { state -> renderState(state) } // Dispatch initial action to load news newsViewModel.dispatch(Action.LoadNews) }
49. class NewsViewModel @Inject constructor( private val newsRepository: NewsRepository ) : BaseViewModel<Action, State>() { /* Initial state */ override val initialState = State.Loading init { bindActions() } private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error }
50. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
51. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
52. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
53. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
54. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
55. private fun bindActions() { // Action -> 1..n Change val loadNews = actions.ofType<Action.LoadNews>() .switchMap { newsRepository.getTopHeadlines("technology") .subscribeOn(Schedulers.io()) .map<Change> { Change.News(it.articles) } .onErrorReturn { Change.Error } .startWith(Change.Loading) } // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) }
56. // Use Observable.merge to merge changes into a single stream: // val allChanges = Observable.merge(loadNews, ...) // Change -> Reducer disposables += loadNews .scan(initialState, reducer) .distinctUntilChanged() .subscribe(state::postValue, Timber::e) } /* Reducer => <Previous State, Change> -> New State */ private val reducer: Reducer<State, Change> = { , change -> when (change) { is Change.News -> State.News(change.news) is Change.Loading -> State.Loading is Change.Error -> State.Error } } }
57. private val newsViewModel by lazy { getViewModel<NewsViewModel>() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) … // Observe for state changes newsViewModel.observableState.observe(this) { state -> renderState(state) } // Dispatch initial action to load news newsViewModel.dispatch(Action.LoadNews) }
58. private val newsViewModel by lazy { getViewModel<NewsViewModel>() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) … // Observe for state changes newsViewModel.observableState.observe(this) { state -> renderState(state) } // Dispatch initial action to load news newsViewModel.dispatch(Action.LoadNews) }
59. Each feature owns its own namespace [actions, reducer] 
 keeping it isolated for teams to work
60. Testing Tests are like brakes they help you go faster - someone
61. @Test fun `Given news successfully loaded, when action load news, then state contains news articles`() { // GIVEN val newsList = listOf(..) val newsResponse = NewsResponse("ok", 1, newsList) val successState = State.News(newsList) // MOCK whenever(newsRepository.getTopHeadlines("technology")) .thenReturn(Observable.just(newsResponse)) // WHEN viewModel.dispatch(Action.LoadNews) testSchedulerRule.triggerActions()
62. val successState = State.News(newsList) // MOCK whenever(newsRepository.getTopHeadlines("technology")) .thenReturn(Observable.just(newsResponse)) // WHEN viewModel.dispatch(Action.LoadNews) testSchedulerRule.triggerActions() // THEN inOrder(observer) { verify(observer).onChanged(loadingState) verify(observer).onChanged(successState) } verifyNoMoreInteractions(observer) }
63. Conclusion
64. No architecture fits all
65. - suites your use-case - applies to your team - the cons are not cons for you - makes you happy Pick the one which

66. Show case project https://github.com/AkshayChordiya/NewsAppMVI
67. Thank you! @AkshayChordiya