MVI (Model-View-Intention)

Presented on 29 February 2020 at Swift India.
https://www.meetup.com/Swift-Delhi/events/268573479/

Transcript

1. Kapil Rathore iOS @ Tokopedia MVI (Model-View-Intention) Reactive Unidirectional Architecture for your Apps @krkapilrathore @krkapilrathore @kapilrathore
2. What are you doing this weekend ? ‍♂
3. ‍♂ I’m attending Swift Delhi Meetup
4. ‍♂ Should I also join ?
5. ‍♂ Sure, it’ll be fun !!
6. ‍♂
7. ‍♂ ⌨ INPUT OUTPUT OUTPUT INPUT
8. ‍♂ ⌨ View ( ) User ( ) Model ( ) Intention ( )
9. user ( )
10. intention ( user ( ) )
11. model ( intention ( user ( ) ) )
12. view ( model ( intention ( user ( ) ) ) )
13. view ( model ( intention ( ) ) )
14. Pure Functions
15. Pure Functions ✅ ❌
16. Intention • Take the inputs from the user • Map the user inputs to Model friendly events • Eg - button click events, text input events etc.
17. Model • Take the inputs from Intention • Processes a particular business Usecase based on the input • Produces a New State as an output • Only piece of code that is allowed to change the State
18. • Immutable data structure • Holds all the important information required to change the dynamic data on the UI layer • Acts as the single source of truth State
19. • Takes the output State produced by the Model as input • Contains the rendering logic for the emitted state View
20. Rx Operators that we are going to use
21. Observable Sequence
25. Talk is cheap. Show me the code. - Linus Torvalds
26. Example App Counter MVI
27. Planning Intentions • Increment • Decrement • Reset Counter • Interval Change
28. Code Intentions
29. Planning State • Count Value • Interval
30. Code State
31. Planning Model Usecases • Increment Usecase • Decrement Usecase • Reset Counter Usecase • Interval Change Usecase
32. Code Increment Usecase
33. Code State
34. Code Decrement Usecase
35. Code Reset Counter Usecase
36. Code Interval Change Usecase
37. Intention View Different Model Usecases
38. BIND function - Model
39. Code View
40. Glue Code Outlets
41. Glue Code Initialize MVI Components
42. Glue Code Binding the MVI Components
43. Glue Code Implement the View Layer
44. Live Preview in Simulator
45. Summary Pros • Unidirectional & Cyclic Flow of Data • Decoupled Code • Predictable (Pure functions + Immutable States) • Highly Testable & Debuggable (Encourages TDD) • User Centric (User drives the architecture) • Reactive (Handles the async code) • Platform Agnostic (Cross platform collaboration)
46. Summary Cons • Lots of Boilerplate • Where to place navigation logic • Complexity (Learning Curve)
47. What’s Next + Combine Cook MVI using SwiftUI and Combine
48. References • What if the user was a function? by Andre Staltz at JSConf Budapest 2015 • Managing State with RxJava by Jake Wharton • Mobius by Spotify • MVI Series: A Pragmatic Reactive Architecture for Android
49. Kapil Rathore iOS @ Tokopedia Questions @krkapilrathore @krkapilrathore @kapilrathore
50. Kapil Rathore iOS @ Tokopedia Thank You @krkapilrathore @krkapilrathore @kapilrathore