The MVI Architecture: A Reactive Approach to Android Development

Transcript

1. The MVI Architecture: A Reactive Approach to Android Development Developing Android Developers 3.0 Saturday 27th July, 2019
2. Hi, I’m Adora! Software Engineer Creator, adorahack.com Co-organizer GDG Ajah, Android Ngr, Unstack Twitter: @theadoranwodo 2
3. 1. INTRODUCTION
4. OTHER ANDROID ARCHITECTURE PATTERNS • Model View Controller • Model View Presenter • Model View ViewModel 4
5. 5 HOW MVVM WORKS Image from resocoder.com
6. LET’S TALK ABOUT A DIFFERENT ARCHITECTURE PATTERN Model View Intent Inspired by the unidirectional & cyclic nature of Cycle.js 6
7. MODEL = IMMUTABLE STATE VIEWS = ACTIVITIES OR FRAGMENTS INTENTS = THE NEED DO PERFORM AN ACTION 7
8. MODEL = IMMUTABLE STATE VIEWS = ACTIVITIES OR FRAGMENTS INTENTS = THE NEED DO PERFORM AN ACTION 8
9. MODEL = IMMUTABLE STATE VIEWS = ACTIVITIES OR FRAGMENTS INTENTS = THE NEED DO PERFORM AN ACTION 9
10. REACTIVE PROGRAMMING IS A PROGRAMMING PARADIGM CONCERNED WITH DATA FLOWS & THE PROPAGATION OF CHANGE 10
11. 11 User Intent View State Interacts Changes Updates Seen by
12. 2. LET’S LOOK AT MVI WITH COROUTINES & LIVEDATA
13. GOOGLE ❤ COROUTINES & LIVEDATA
14. 14 A TYPICAL USER MODEL data class User( var id: Int?? = null, var firstName: String? = null, var lastName: String? = null, var birthday: String? = null, var bvn: String? = null, var email: String? = null )
15. 15 USER PRESENTER IN MVP PATTERN class UserPresenter(private var view: UserView?) { override fun onViewCreated () { view.showLoadScreen() val user = loadUser() this.onFetchSuccess(user) } override fun onFetchSuccess (user: User) { view.hideLoadScreen() view.displayUser( user) } }
16. 16 data class UserViewState { val loading: Boolean = false val user: User? = null val error: String? = null } WHAT IF WE COULD ALSO REPRESENT STATE?
17. 17 sealed class UserResult { object Loading: UserResult() data class Success(val user: User) : UserResult() data class Error(val errorMsg: String) : UserResult() } OUR RESULTS
18. 18 class UserViewModel @Inject constructor (dispatcher: UserDispatcher ): ViewModel() { private val state = UserViewState () val userState: LiveData<UserViewState> = Transformation. map(dispatcher.dispatchGetUser()){ when(it){ is UserResult.Loading -> state.copy(loading = true) is UserResult.Success -> state.copy(loading = false, user = it.data) is UserResult.Error -> state.copy(loading = false, error = “Could not fetch user”) } } } OUR VIEWMODEL
19. 19 class UserDispatcher @Inject constructor (private val repository: UserRepository ){ fun dispatchgetUser () = liveData{ emit(UserResult.Loading ) emit(getUser()) } private suspend fun getUser(): UserResult { try { val response = repository.getUser().await() if (response.isSuccessful) { response.body()?. let { responseBody -> responseBody.results?. run { return UserResult.Success (this)} } } } catch(t: Throwable){ return UserResult.Error (t.localizedMessage ) } return UserResult.Error (“Could not fetch user” ) } } DISPATCH OUR ACTION
20. 20 override fun onViewCreated(view: View, savedInstanceBundle: Bundle?) = liveData{ super.onViewCreated(view,savedInstanceBundle) initViews() viewModel.userState.observe(this) { render(it) } } private fun render(state: UserViewState){ when(state) { is UserViewState.loading -> renderLoadingView() is UserViewState.user -> renderUserView(state) is UserViewState.error -> renderErrorView(state) } } private fun renderLoadingView(){ // Code here } private fun renderUserView(userState: UserViewState.user){ // Code here } private fun renderErrorView(errorState: UserViewState.error){ // Code here } WHAT OUR VIEW LOOKS LIKE
21. 3. MORE ON MVI
22. WHY USE MVI? • A unidirectional & cyclical flow • Immutable models that provide consistent behavior & thread safety on big apps • Independent UI components • No callbacks 22
23. COMPARING MVI TO MVVM • MVI uses reactive programming while MVVM uses imperative programming • Models in MVI represent state and MVVM represents data 23
24. SUMMARY • The MVI Architecture • Reactive programming • How components interact • MVI with Coroutines & LiveData • Why used MVI? • Comparing MVI to MVVM 24
25. THANKS! www.adoranwodo.com www.adorahack.com @theadoranwodo on Twitter 25