MVVM on Android - DevFest Pisa

MVVM is an architecture pattern for architecting applications that has become popular on Android.

In this workshop we will look at what is MVVM and how to use Architecture Components with them, and share my experience on how I build robust, maintainable and testable apps using them.

- What is MVVM
- How it differs from other design patterns
- Leveraging Architecture Components
- Brief look at testing
- Hands on to building a solid and testable app which you can take home ;)

Transcript

1. @AkshayChordiya MVVM on Android
2. Quick Recap Introducing Architecture Components Diving into MVVM Hands-on time Testing Conclusion Agenda
3. 3 MV* Model represents state, structure, and behaviour of the user’s mental model View presents information that it retrieves from one or more model objects Model View
4. 4 MVVM Model represents state, structure, and behaviour of the user’s mental model View presents information that it observes from one or more ViewModel objects Model View ViewModel Interacts with model and on change notifies the view to update
5. Introducing Architecture Components
6. 6 Lifecycle LiveData ViewModel Room WorkManager Navigation Paging
7. 7 Lifecycle LiveData ViewModel Room
8. Helps you build lifecycle-aware components Lifecycle
9. Lifecycle LifecycleObserver [e.g. LiveData] LifecycleOwner [Activity / Fragment] LifecycleOwners are ViewController with their own lifecycle LifecycleObserver observe LifecycleOwners and are notified about lifecycle changes
10. Why is this useful?
11. 11 class LifecycleAwareLogging : LifecycleObserver { }
12. 12 class LifecycleAwareLogging : LifecycleObserver { @OnLifecycleEvent(Lifecycle.Event.ON_CREATE) fun listeningToCreate() { Timber.d("onCreate()") } @OnLifecycleEvent(Lifecycle.Event.ON_DESTROY) fun listeningToDestroy() { Timber.d("onDestroy()") } }
13. Useful for cases like analytics
14. Instantly notifies the changes in the data to the UI LiveData
15. 15 LiveData value updates Observe for updates Is STARTED or RESUMED Notify the observer Update the value
16. They decouple the data from the View to survive configuration change ViewModel
18. Let’s try with ViewModel
19. 19 class CounterViewModel : ViewModel() { }
20. 20 class CounterViewModel : ViewModel() { var counter: MutableLiveData<Int> = MutableLiveData() init { counter.value = 0 } } Emits data
21. 21 class CounterViewModel : ViewModel() { var counter: MutableLiveData<Int> = MutableLiveData() init { counter.value = 0 } fun increment() { counter.value = counter.value?.inc() } } Emits data Emits data
22. 22 // Get the ViewModel in [Activity, Fragment] val counterViewModel = ViewModelProviders.of(this) .get(CounterViewModel::class.java)
23. 23 // Get the ViewModel in [Activity, Fragment] val counterViewModel = ViewModelProviders.of(this) .get(CounterViewModel::class.java) // Observe the `LiveData` for changes counterViewModel.counter.observe(this, Observer { count.text = counterViewModel.counter.toString() })
24. 24 // Get the ViewModel in [Activity, Fragment] val counterViewModel = ViewModelProviders.of(this) .get(CounterViewModel::class.java) // Observe the `LiveData` for changes counterViewModel.counter.observe(this, Observer { count.text = counterViewModel.counter.toString() }) // Increment the count increment.setOnClickListener { counterViewModel.increment() }
25. Under the hood
26. Activity created onCreate onStart onResume ViewModel Scope
27. ViewModel Scope Activity created Activity rotated onCreate onStart onResume onPause onStop onCreate onDestroy onStart onResume
28. onCleared() ViewModel Scope Activity created Activity rotated finish() Finished onCreate onStart onResume onPause onStop onCreate onDestroy onStart onResume onPause onStop onDestroy
29. onCleared() Activity created Activity rotated finish() Finished onCreate onStart onStop onCreate onDestroy onStart onResume onPause onStop onDestroy 0 0 1 1 2 onPause onResume 3 3
30. “Never reference to context or views in the ViewModel”
31. Guide to MVVM
32. 32 UI Controller [Activity / Fragment] ViewModel Repository Model Remote Data Source SQLite webservice All things related to View like rendering Holds data required by UI
33. 33 UI Controller [Activity / Fragment] Repository Model Remote Data Source SQLite webservice ViewModel LiveData LiveData LiveData Room Retrofit
34. Hands on time https://github.com/AkshayChordiya/MVVMNewsAppTemplate
35. <insert perks here>
36. Testing
37. Testing Component Tests Mock UI Espresso ViewModel ViewModel JUnit Repository Repository JUnit DAO and WebService DAO Instrumented - WebService Instrumented MockWebServer
38. This is a architecture not the architecture
39. www.helloclue.com Grazie @AkshayChordiya