Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Model View Intent: Embracing Reactive Architecture

Yousuf Haque
September 25, 2017

Model View Intent: Embracing Reactive Architecture

Juggling several Rx streams at the same time is incredibly difficult. Model, View, Intent (MVI) is an iteration on the MVP model that fills in some gaps around how to handle multiple streams within one's presenter. It also solidifies the concept of a "State reducer" within the context of android applications. MVI is a spin on various reactive architectures from the web space adapted to solve some of the challenges when building android applications.

Yousuf Haque

September 25, 2017
Tweet

More Decks by Yousuf Haque

Other Decks in Programming

Transcript

  1. Model View Intent Embracing Reactive architecture Yousuf Haque

  2. I’d like to convince you of some things first...

  3. Proposition 1: You (probably) need a ViewState

  4. None
  5. None
  6. Different streams that ultimately update your view need to be

    reconciled with each other
  7. None
  8. None
  9. ViewState is a function of Application State + Data

  10. This is great and all, but how do we handle

    user input?
  11. ViewState is a function of Application State + Data +

    User Input
  12. None
  13. Proposition 2: (Almost) Anything you can model as a callback/listener

    you can instead model as an Rx Stream
  14. Rx is really good at modeling events occurring over time.

    User inputs are events occurring over time
  15. RxBindings is a library by Jake Wharton that lets us

    observe Widgets and Views through observable streams
  16. None
  17. None
  18. None
  19. Congrats, you know Model View Intent!

  20. The gist of Model View Intent 1. User Inputs exposed

    as Observable<Intent> 2. Model takes in the Observable<Intent>, Observable<Data>, Observable<AppState>, and combines into Observable<ViewState> 3. View subscribes to Observable<ViewState> and updates on each emission
  21. https://staltz.com/unidirectional-user-interface-architectures.html Andre Staltz

  22. https://staltz.com/unidirectional-user-interface-architectures.html Andre Staltz

  23. None
  24. StateReducer: (State) -> State

  25. Intents are mapped to Observable<StateReducer>

  26. Observable<StateReducer> for each source of events are merged to a

    singular stream
  27. We start with an initial state, and simply apply the

    Observable<StateReducer> emissions to reflect new state
  28. None
  29. What about config changes?

  30. We can represent lifecycle events as Rx Streams We can

    use .takeUntil(Observable) to complete view related portions of the stream to avoid leaks
  31. What does this buy you? 1. Many pure functions a.

    Easy to test b. Easy to compose member functions 2. Explicit state, and explicit flow of data a. Time travel debugging b. Easy to trace source of changes 3. Nested dialogs a. Build complex features out of smaller, simpler features
  32. https://staltz.com/unidirectional-user-interface-architectures.html Andre Staltz

  33. What does it cost you? 1. Heavily dependent on Rx,

    steep learning curve a. Non beginner level knowledge of Rx required 2. Lots of small objects being generated and thrown around a. Intents, states, view states, etc 3. Changes/modifications might take more time than if done imperatively a. Need to code more deliberately b. Takes more time, but prevents bugs
  34. Let’s see some code!

  35. Resources 1. Managing State with RxJava by Jake Wharton a.

    https://www.youtube.com/watch?v=0IKHxjkgop4 2. Borrowing the Best of the Web to Make Native Better by Christina Lee a. https://www.youtube.com/watch?v=GOVMkQp3LZ4 3. Unidirectional data flow architectures by Andre Staltz a. https://www.youtube.com/watch?v=1c6XiQsnh_U b. https://staltz.com/unidirectional-user-interface-architectures.html 4. Reactive Apps with Model View Intent by Hannes Dorfmann a. http://hannesdorfmann.com/android/mosby3-mvi-1 5. My Take on Model View Intent by Zak Taccardi a. https://hackernoon.com/model-view-intent-mvi-part-1-state-renderer-187e270db15c 6. TODO MVI by Yousuf Haque a. https://github.com/yousuf-haque/TodoMvi