Composite ViewModels

ViewModels are the brains behind our views. Growing in length as the view complexity increases, threatening to become monolithic madness with every added line. In this talk we'll explore the concept of Composite ViewModels, a strategy to break down those monsters into less scary bits.

Transcript

1. Composite ViewModels Nicole Terc
2. Some Basics
3. ViewModels View Model ViewModel
4. ViewModels View Model ViewModel Basic principles: • Handle all the business logic in the ViewModel • Keep the View as dumb as possible and handle only UI logic
5. ViewModels - Unidirectional Data Flow Pattern
6. ViewModels - Unidirectional Data Flow Pattern Two basic concepts:
7. ViewModels - Unidirectional Data Flow Pattern Two basic concepts: • View State • Events
8. ViewModels - Unidirectional Data Flow Pattern Two basic concepts: • View State ◦ Holds the data that will be used to show content in the View. ◦ Ej: LoadingState, DataLoadedState, etc. • Events
9. ViewModels - Unidirectional Data Flow Pattern Two basic concepts: • View State ◦ Holds the data that will be used to show content in the View. ◦ Ej: LoadingState, DataLoadedState, etc. • Events ◦ User & system triggered actions. ◦ Ej: button clicks, lifecycle events (onResume, onStop...), etc.
10. ViewModels - Unidirectional Data Flow Pattern View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State
11. UDF Implementation
12. UDF Implementation - View
13. UDF Implementation - ViewModel
14. The sad truth
15. Composite ViewModels to the rescue!
16. Composite ViewModels Article by the same name from Sergej Shafarenka. Link here: https://www.halfbit.de/posts/composite-viewmodel/
17. Composite ViewModels Main idea: Split the ViewModel in smaller pieces
18. Normal ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State
19. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State
20. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State Load Delegate Click Delegate
21. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State Load Delegate Load Event Click Delegate Click Event
22. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Handles Events & reacts to them Updates View State Events State Load Delegate Load Event Click Delegate Click Event
23. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Updates View State Events State Load Delegate Load Event Click Delegate Click Event
24. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Updates View State Events State Load Delegate State Load Event Click Delegate State Click Event
25. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Updates View State Events State Load Delegate State Load Event Click Delegate State Click Event
26. Composite ViewModel View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Dispatch state updates Events State Load Delegate State Load Event Click Delegate State Click Event
27. Why is this nice? • Smaller classes. • Each delegate only handles the events that has implemented. • Adding new functionality just adds more delegates, the VM remains the same.
28. Composite VMs Implementation
29. Small note: The Knot way Reactive State Container Library for Android https://github.com/beworker/knot/
30. On this talk: Channel Implementation
31. Channel Implementation View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Dispatch state updates Events State Load Delegate State Load Event Click Delegate State Click Event
32. Channel Implementation View Creates Event Streams Observes View State & reacts to its changes. ViewModel Dispatch the events Dispatch state updates Events State Load Delegate State Load Event Click Delegate State Click Event
33. The View
34. The Delegate
35. The ViewModel
36. Example time!
37. That’s it!
38. Wanna learn more? • Unidirectional Data Flow Pattern ◦ Android Unidirectional Data Flow with LiveData: https://medium.com/hackernoon/android-unidirectional-flow-with-livedata-bf24119 e747 • Composite ViewModel ◦ Talk Code Repository: https://github.com/nicole-terc/compositeVMChannel ◦ Sergej Shafarenka Article: https://www.halfbit.de/posts/composite-viewmodel/#composite-viewmodel-1 • Knot library https://github.com/beworker/knot/