Reactive Apps with MVI

Functional reactive programming is about to become the dominant paradigm in Android development. User interactions can be easier processed; the UI is updated straightforward and less code is required.

In the meanwhile, tons of additional libraries were created to complement RxJava and RxAndroid for common Android operations, e.g. RxBinding, RxPreferences, RxPermissions etc.

Being overwhelmed by this bunch of tools, the question is: How can I apply a reactive workflow in a structured way? How does functional reactive programming fit in my MVP or MVVM pattern? Is there a silver bullet how to implement an app in a full reactive manner?

This practical insight presents the MVI pattern known from Hannes Dorfmann’s blog series. The MVI pattern defines clear guidelines how a reactive architecture can look like. Apps become more readable, easier to extend, concerns are strictly separated and bug finding is simplified by design.

Transcript

1. Reactive Apps with MVI Stefan Nägele Stefan Nägele / / NovaTec Consulting GmbH
2. Stefan Nägele • Consultant @novatecgmbh • Twitter: @Ethanoljesus • Blog: blog.novatec-gmbh.de • Xing: Stefan_Naegele7 I am here to tell you how to make reactive (Android) apps with MVI 2 Stefan Nägele / / NovaTec Consulting GmbH
3. Way to reactiveness • The development of Android architectures • RxJava • How to master reactiveness with MVI 3 Stefan Nägele / / NovaTec Consulting GmbH
4. Android Architectures The early days 4 Stefan Nägele / / NovaTec Consulting GmbH
5. Android Architectures Nowadays Activity View Fragment View Presenter Presenter Interactor Interactor Preferences Helper REST Helper Database Helper Presentation Logic Business Logic 5 Stefan Nägele / / NovaTec Consulting GmbH
6. Android Architectures Nowadays • Separation of concerns • Expandable • Maintanable • Testable • Passive views • All actions through the presenter / view model 6 Stefan Nägele / / NovaTec Consulting GmbH
7. RxJava 7 Stefan Nägele / / NovaTec Consulting GmbH
8. RxJava Observable .just("Hello world") .doOnNext { println(it) } .debounce(1, TimeUnit.SECONDS) .subscribe { println(it) } 8 Stefan Nägele / / NovaTec Consulting GmbH
9. RxAndroid 9 Stefan Nägele / / NovaTec Consulting GmbH
10. RxAndroid Observable .from(listOf("one", "two", "three", "four", "five")) .subscribeOn(Schedulers.computation()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(/* an Observer */); 10 Stefan Nägele / / NovaTec Consulting GmbH
12. The Data Flow Pitfall RxView .clicks(submitView) .doOnNext { submitView.setEnabled(false); progressView.setVisibility(VISIBLE); } .flatMap { interactor.setName(nameView.text.toString()) } .observeOn(AndroidSchedulers.mainThread()) .subscribe(/* an Observer */) 12 Stefan Nägele / / NovaTec Consulting GmbH
13. The Data Flow Pitfall RxView .clicks(submitView) .doOnNext { submitView.setEnabled(false); progressView.setVisibility(VISIBLE); } .flatMap { interactor.setName(nameView.text.toString()) } .observeOn(AndroidSchedulers.mainThread()) .subscribe(/* an Observer */) 13 Stefan Nägele / / NovaTec Consulting GmbH
14. The Data Flow Pitfall RxView .clicks(submitView) .doOnNext { submitView.setEnabled(false); progressView.setVisibility(VISIBLE); } .flatMap { interactor.setName(nameView.text.toString()) } .observeOn(AndroidSchedulers.mainThread()) .subscribe(/* an Observer */) 14 Stefan Nägele / / NovaTec Consulting GmbH
15. The Data Flow Pitfall RxView .clicks(submitView) .doOnNext { submitView.setEnabled(false); progressView.setVisibility(VISIBLE); } .flatMap { interactor.setName(nameView.text.toString()) } .observeOn(AndroidSchedulers.mainThread()) .subscribe(/* an Observer */) 15 Stefan Nägele / / NovaTec Consulting GmbH
16. The Data Flow Pitfall Activity View Presenter Interactor REST Helper Presentation Logic Business Logic 16 Stefan Nägele / / NovaTec Consulting GmbH
17. The Data Flow Pitfall Activity View Presenter Interactor REST Helper Presentation Logic Business Logic 17 Stefan Nägele / / NovaTec Consulting GmbH
18. The Data Flow Pitfall Activity View Presenter Interactor REST Helper Presentation Logic Business Logic 18 Stefan Nägele / / NovaTec Consulting GmbH
19. The Data Flow Pitfall Activity View Presenter Interactor REST Helper Presentation Logic Business Logic 19 Stefan Nägele / / NovaTec Consulting GmbH
20. The State Problem 20 Stefan Nägele / / NovaTec Consulting GmbH
21. Model View Intent • Originally defined by André Staltz for cycle.js • Transferred from cycle.js to Android by Hannes Dorfmann 21 Stefan Nägele / / NovaTec Consulting GmbH
22. Model • Single source of truth for... • ...the business Logic • ...and view • Model reflects a view's state 22 Stefan Nägele / / NovaTec Consulting GmbH
23. Scrum Poker App Showing Training Sessions • Load training appointments • Show training appointments • Show loading error message 23 Stefan Nägele / / NovaTec Consulting GmbH
24. Defining a State sealed class TrainingViewState { data class Loading() : TrainingViewState() data class Data(val trainings: List<Training>) : TrainingViewState() data class Error(val error: Throwable) : TrainingViewState() } 24 Stefan Nägele / / NovaTec Consulting GmbH
25. Unidirectional Flow
26. How do I get a state into my view? 26 Stefan Nägele / / NovaTec Consulting GmbH
27. Connecting the pieces 27 Stefan Nägele / / NovaTec Consulting GmbH
28. User & Intent 28 Stefan Nägele / / NovaTec Consulting GmbH
29. User & Intent - View Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 29 Stefan Nägele / / NovaTec Consulting GmbH
30. User & Intent - Intents interface TrainingView { fun loadIntent(): Observable<Unit> fun pullToRefreshIntent(): Observable<Unit> } 30 Stefan Nägele / / NovaTec Consulting GmbH
31. User & Intent - View class TrainingFragment : Fragment(), TrainingView { private var loading = PublishSubject.create<Unit>() override fun onResume() { super.onResume() loading.onNext(Unit) } override fun loadIntent(): Observable<Unit> = loading override fun pullToRefreshIntent(): Observable<Unit> = RxSwipeRefreshLayout.refreshes(swipeRefreshLayout).map { Unit } } 31 Stefan Nägele / / NovaTec Consulting GmbH
32. User & Intent - Presentation Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 32 Stefan Nägele / / NovaTec Consulting GmbH
33. Listening to intents class TrainingPresenter() : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent() val pullRefresh = view.pullToRefreshIntent() val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .observeOn(AndroidSchedulers.mainThread()) .subscribe { // We are listening for intents } } } 33 Stefan Nägele / / NovaTec Consulting GmbH
34. Initial State class TrainingPresenter() : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent() val pullRefresh = view.pullToRefreshIntent() val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .observeOn(AndroidSchedulers.mainThread()) .subscribe { // We are listening for intents } } } 34 Stefan Nägele / / NovaTec Consulting GmbH
35. Expect the unexpected class TrainingPresenter() : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent() val pullRefresh = view.pullToRefreshIntent() val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .observeOn(AndroidSchedulers.mainThread()) .subscribe { // We are listening for intents } } } 35 Stefan Nägele / / NovaTec Consulting GmbH
36. Intent & Model 36 Stefan Nägele / / NovaTec Consulting GmbH
37. Intent & Model - Presentation Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 37 Stefan Nägele / / NovaTec Consulting GmbH
38. Manipulating the Model class TrainingPresenter(private val interactor: TrainingInteractor) : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent().flatMap { interactor.getTrainings() } val pullRefresh = view.pullToRefreshIntent().flatMap { interactor.getTrainings() } val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .observeOn(AndroidSchedulers.mainThread()) .subscribe { // We are listening for intents } } } 38 Stefan Nägele / / NovaTec Consulting GmbH
39. Intent & Model - Interactor Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 39 Stefan Nägele / / NovaTec Consulting GmbH
40. Business Logic class TrainingInteractor { fun getTrainings(): Observable<TrainingViewState> = Client .trainings() .toObservable() .map<TrainingViewState> { TrainingViewState.Data(it.trainings) } } object Client : RssFeedApi by Retrofit.Builder() .addCallAdapterFactory(RxJava2CallAdapterFactory.createWithScheduler(Schedulers.io())) .create(RssFeedApi::class.java) 40 Stefan Nägele / / NovaTec Consulting GmbH
41. Model & View 41 Stefan Nägele / / NovaTec Consulting GmbH
42. Updating the View - View Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 42 Stefan Nägele / / NovaTec Consulting GmbH
43. Updating the View - View interface TrainingView { fun loadIntent(): Observable<Unit> fun pullToRefreshIntent(): Observable<Unit> fun render(state: TrainingViewState) } 43 Stefan Nägele / / NovaTec Consulting GmbH
44. Updating the View - Presenter Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 44 Stefan Nägele / / NovaTec Consulting GmbH
45. Updating the View - Presenter class TrainingPresenter(private val interactor: TrainingInteractor) : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent().flatMap { interactor.getTrainings() } val pullRefresh = view.pullToRefreshIntent().flatMap { interactor.getTrainings() } val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn { TrainingViewState::Error } .observeOn(AndroidSchedulers.mainThread()) .subscribe(view::render) } } 45 Stefan Nägele / / NovaTec Consulting GmbH
46. Updating the View - View Fragment View Presenter Interactor REST Helper Presentation Logic Business Logic 46 Stefan Nägele / / NovaTec Consulting GmbH
47. Updating the View - View class TrainingFragment : Fragment(), TrainingView { override fun render(state: TrainingViewState) { when (state) { is Loading -> renderLoading() is Data -> { renderData(state.trainings) } is Error -> renderError() } } private fun renderLoading() { progressBar.visibility = View.VISIBLE trainingsList.visibility = View.GONE errorView.visibility = View.GONE } } 47 Stefan Nägele / / NovaTec Consulting GmbH
48. Life isn't always easy, but it's simple — Demi Moore 48 Stefan Nägele / / NovaTec Consulting GmbH
49. State Reducers It's freaking easy! — John Petrucci 49 Stefan Nägele / / NovaTec Consulting GmbH
50. State Reducers - Presenter class TrainingPresenter(private val interactor: TrainingInteractor, private val reducer: TrainingReducer) : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent().flatMap { interactor.getTrainings() } val pullRefresh = view.pullToRefreshIntent().flatMap { interactor.getTrainings() } val allIntents = Observable.merge(loading, pullRefresh) disposable = allIntents .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .scan(TrainingViewState.Loading()) { state, result -> reducer.reduce(state, result) } .observeOn(AndroidSchedulers.mainThread()) .subscribe(view::render) } } 50 Stefan Nägele / / NovaTec Consulting GmbH
51. Partial State - TrainingResult sealed class TrainingResult { object Loading: TrainingResult() data class LoadingError(val error: Throwable): TrainingResult() data class LoadingComplete(val trainings: List<Training>): TrainingResult() } 51 Stefan Nägele / / NovaTec Consulting GmbH
52. State Reducer class TrainingReducer { fun reduce(state: TrainingViewState, result: TrainingResult): TrainingViewState = when (result) { is TrainingResult.Loading -> TrainingViewState.Loading() is TrainingResult.LoadingError -> TrainingViewState.Error(result.error) is TrainingResult.LoadingComplete -> TrainingViewState.Data(trainings = aggregate(state.trainings, result.trainings)) } } private fun aggregate(previousTrainings: List<Training>, trainings: List<Training>): TrainingViewState { // I now pronounce you husband and wife ! " # } } 52 Stefan Nägele / / NovaTec Consulting GmbH
53. Do I actually need MVI? 53 Stefan Nägele / / NovaTec Consulting GmbH
54. Resolving the state problem • Traceability is increased by the unidirectional flow • State triggers which view components are shown • Immutable state objects class TrainingFragment : Fragment(), TrainingView { override fun render(state: TrainingViewState) { when (state) { is Loading -> renderLoading() is Data -> { renderData(state.trainings) } is Error -> renderError() } } 54 Stefan Nägele / / NovaTec Consulting GmbH
55. Debuggable Workflow class TrainingPresenter(...) : MviPresenter<TrainingView>() { override fun attachView(view: TrainingView) { val loading = view.loadingIntent() .doOnNext { Logger.intent("Intent: load trainings")} .flatMap { interactor.getTrainings() } disposable = Observable.merge(loading, pullRefresh) .startWith(TrainingViewState.Loading()) .onErrorReturn(TrainingViewState::Error) .scan(TrainingViewState.Loading()) { state, result -> reducer.reduce(state, result) } .doOnNext { Logger.state("State: ", it)} .observeOn(AndroidSchedulers.mainThread()) .subscribe(view::render) } } 55 Stefan Nägele / / NovaTec Consulting GmbH
56. Debuggable Workflow D/Intent: load trainings D/State: { "trainings":[ { "description" : " 14.05. - 15.05.2018, SCRUMevents,, München ", "link" : "https://www.scrum-schulungen-stuttgart.de/professional-scrum-product-owner-paulaner-braeuhaus-muenchen", "title" : "Professional Scrum Product Owner" } ] } 56 Stefan Nägele / / NovaTec Consulting GmbH
57. Testability ! @RunWith(RxJavaUnitRunner::class) // Custom MockitoRunner class TrainingPresenterTest { val captor = argumentCaptor<TrainingViewState>() val subject = PublishSubject.create<Unit>() val view: TrainingFragment = mock { on { loadingIntent() } doReturn subject } val cut: TrainingPresenter = TrainingPresenter() } 57 Stefan Nägele / / NovaTec Consulting GmbH
58. Testability ! @RunWith(RxJavaUnitRunner::class) class TrainingPresenterTest { @Test fun renderData() { Server.dispatcher = { MockResponse().setResponseCode(HTTP_OK).setBody(...) } cut.attachView(view) subject.onNext(Unit) verify<TrainingFragment>(view, times(2)).render(captor.capture()) expect(captor.firstValue).toBeInstanceOf<TrainingViewState.Loading>() expect((captor.secondValue as Data).trainings).toContain(Training("title1"...) } } 58 Stefan Nägele / / NovaTec Consulting GmbH
59. Testability ! @RunWith(RxJavaUnitRunner::class) class TrainingPresenterTest { @Test fun renderError() { Server.dispatcher = { MockResponse().setResponseCode(HTTP_INTERNAL_ERROR) } cut.attachView(view) subject.onNext(Unit) verify<TrainingFragment>(view, times(2)).render(captor.capture()) expect(captor.firstValue).toBeInstanceOf<TrainingViewState.Loading>() expect(captor.secondValue).toBeInstanceOf<TrainingViewState.Error>() } } 59 Stefan Nägele / / NovaTec Consulting GmbH
60. Testability ! 60 Stefan Nägele / / NovaTec Consulting GmbH
61. Orientation change / Interruption Persisting state with ease class TrainingFragment : Fragment(), TrainingView { override fun render(state: TrainingViewState) { this.state = state } override fun onSaveInstanceState(out: Bundle) { super.onSaveInstanceState(outState) out.putParcelable("MyStateKey", state) } override fun onCreate(saved: Bundle) { super.onCreate(saved) val initState = state?.getParcelable("MyStateKey") presenter = TrainingPresenter(TrainingInteractor(), TrainingReducer(initState)) } } 61 Stefan Nägele / / NovaTec Consulting GmbH
62. Independent UI Components • Whenever an Event X happens, presentation logic sends information to the business logic • Presenters observing the same business logic for the same state Activity View Fragment Presenter Presenter Interactor REST Helper Database Helper Presentation Logic Business Logic 62 Stefan Nägele / / NovaTec Consulting GmbH
63. Drawbacks 63 Stefan Nägele / / NovaTec Consulting GmbH
64. Drawbacks ! • Requires a lot of boilerplate code • Intents, States, Results • Reducers are getting big • Casting in Java is a pain in the ass • Readability with Switch Cases in Java as well 64 Stefan Nägele / / NovaTec Consulting GmbH
65. Drawbacks - Reducers private val reducer = BiFunction { previousState: TasksViewState, result: TasksResult -> when (result) { is LoadTasksResult -> when (result) { is LoadTasksResult.Success -> { val filterType = result.filterType ?: previousState.tasksFilterType val tasks = filteredTasks(result.tasks, filterType) previousState.copy(isLoading = false, tasks = tasks, tasksFilterType = filterType) } is LoadTasksResult.Failure -> previousState.copy(isLoading = false, error = result.error) is LoadTasksResult.InFlight -> previousState.copy(isLoading = true) } is CompleteTaskResult -> when (result) { is CompleteTaskResult.Success -> previousState.copy(taskComplete = true, tasks = filteredTasks(result.tasks, previousState.tasksFilterType) ) is CompleteTaskResult.Failure -> previousState.copy(error = result.error) is CompleteTaskResult.InFlight -> previousState is CompleteTaskResult.HideUiNotification -> previousState.copy(taskComplete = false) } } 65 Stefan Nägele / / NovaTec Consulting GmbH
66. Drawbacks ! • Requires a lot of boilerplate code • Intents, States, Results • Reducers are getting big • Casting in Java is a pain in the ass • Readability with Switch Cases in Java as well • Requires RxJava 66 Stefan Nägele / / NovaTec Consulting GmbH
67. Benefits • Immutability and unidirectional data flow • Solving the state problem • State easy to control, trace and debug • Persisting the state (orientation change, process death) • Controlling different UI components • Increased testability 67 Stefan Nägele / / NovaTec Consulting GmbH
68. References ! Hannes Dorfmann - Reactive Apps with Model-View-Intent Jake Wharton - Managing State with RxJava Benoît Quenaudon @droidconNYC - Model-View-Intent for Android Garima Jain @droidconbos - The Curious Case Of Yet Another Pattern André Staltz - Unidirectional User Interface Architectures 68 Stefan Nägele / / NovaTec Consulting GmbH
69. Questions? • Consultant @novatecgmbh • Twitter: @Ethanoljesus • Blog: blog.novatec-gmbh.de • Xing: Stefan_Naegele7 69 Stefan Nägele / / NovaTec Consulting GmbH
70. Bibliography • Buckingham Fountain - videvo.net • Stairway to heaven - thiswallpaper.com • Swiss Knife - schweizer-taschenmesser.de • Error and loading - youtube.com • RxAndroid - koenig-media.raywenderlich.com • Atom - atom.io • Complex problems - tintri.com • Darth Vader - playnation.de • Dream Theater - A dramatic turns of events - rosenrotsaya.blogspot.com • Melk Abbey Library - en.wikipedia.org • Questions - structuretech1.com 70 Stefan Nägele / / NovaTec Consulting GmbH