Reactive StateManagement with Model-View-Intent

class PersonsPresenter : Presenter {
fun loadPersons() {
view?.showLoading(true)
backend.loadPersons({ persons : List ->
view?.showPersons(persons)
},
{ error: Throwable ->
view?.showError(error)
})
}
}

View Slide

fun loadPersons() {
},
})
}
}

View Slide

fun loadPersons(){
},
})
}
}

View Slide

fun loadPersons(){
},
})
}
}

View Slide

fun loadPersons(){
},
})
}
}

View Slide

fun loadPersons(){
view?.showLoading(true) // Displays a ProgressBar
view?.showPersons(persons) // Displays a ProgressBar
},
view?.showError(error) // Displays a error message
})
}
}

View Slide

#mobiconf2017
What is a Model?

View Slide

class PersonsViewModel : ViewModel {
val loadingLiveData : MutableLiveData
…
fun loadPersons(){
loadingLiveData.setValue((true)
loadingLiveData.setValue( false )
personsLiveData.setValue( persons )
},
errorLiveData.setValue( error ) })
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

…
fun loadPersons(){
},
}
}

View Slide

#mobiconf2017
What is a Model?

View Slide

data class PersonsModel (
val loading : boolean,
val persons : List?,
val error : Throwable?
)

View Slide

fun loadPersons(){
view?.render(PersonsModel ( true, null, null) )
view?.render(PersonsModel ( false, persons, null) )
},
view?.render(PersonsModel ( false, null, error) )
})
}
}

View Slide

#mobiconf2017
Model == State

View Slide

#mobiconf2017
How do we change State?

View Slide

#mobiconf2017
User

View Slide

#mobiconf2017
User

View Slide

#mobiconf2017
User
Business Logic
intent

View Slide

#mobiconf2017
User
Business Logic
intent
state

View Slide

#mobiconf2017
User
Business Logic
intent
state
render(state)

View Slide

#mobiconf2017
Model-View-Intent

View Slide

interface SearchView {
fun searchIntent() : Observable
fun render(viewState : SearchViewState)
}

View Slide

data class SearchViewState (
val error : Throwable?
val loading: boolean
val result : List?
)

View Slide

class SearchFragment : Fragment , SearchView {
...
override fun searchIntent() : Observable {
return RxSearchView.queryTextChanges(searchView)
// Thanks Jake Wharton
}
}

View Slide

...
override fun render( viewState : SearchViewState) {
if (viewState.loading)
renderLoading()
else if (viewState.result != null)
renderResult(viewState.result)
else if (viewState.error != null)
renderError()
else throw IllegalStateException("Unknown ViewState")
}
}

View Slide

class SearchPresenter : MviBasePresenter {
val SearchInteractor searchInteractor;
override fun bindIntents() {
val searchState : Observable =
intent(SearchView::searchIntent)
.ﬁlter { term -> term.size >= 3 }
.switchMap(searchInteractor::search)
subscribeViewState(searchState, SearchView::render)
}
}

View Slide

class SearchInteractor {
val searchEngine : SearchEngine // Makes http calls
fun search(searchString : String) : Observable{
return searchEngine.searchFor(searchString) // Observable>
.map(products -> SearchViewState(false, products, null))
.startWith(SearchViewState(true, null, null))
.onErrorReturn(error -> SearchViewState(false, null, error));
}
}

View Slide

.map(products -> new SearchViewState(false, products, null))
.startWith(new SearchViewState(true, null, null))
.onErrorReturn(error -> new SearchViewState(false, null, error));
}
}

}
}

}
}

}
}

Search …
searchIntent
view.render( model )

View Slide

C
searchIntent
filter()
C

View Slide

Ca
searchIntent
filter()
C Ca

View Slide

Cam
searchIntent
Cam
filter()
C Ca

View Slide

Cam
searchIntent
filter()
flatMap()
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
startWith( new Loading() )
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
view.render( SearchViewState.Loading)
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
map( new SR() )
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
map( new SR() )
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
map( new SR() )
SR
view.render( SearchViewState.SearchResult )
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
map( new SR() )
SR
Cam
C Ca
Cam
Cam

View Slide

Cam
searchIntent
filter()
flatMap()
L
map( new SR() )
SR
Cam
C Ca
Cam
Cam

View Slide

interface HomeView {
fun loadFirstPageIntent() : Observable
fun loadNextPageIntent() : Observable
fun pullToRefreshIntent() : Observable
fun loadAllProductsFromCategoryIntent() : Observable
fun render(viewState : HomeViewState)
}

View Slide

class HomePresenter : MviBasePresenter {
val HomeFeedLoader feedLoader;
val ﬁrstPage : Observable = ...
val pullToRefresh : Observable = ...
val nextPage : Observable = ...
val loadMoreFromCategory : Observable = ...
val allIntents : Observable =
Observable.merge(ﬁrstPage, pullToRefresh, nextPage, loadMoreFromCategory)
stateObservable : Observable =
allIntents.scan(this::reduceState)
subscribeViewState(stateObservable, HomeView::render)
}

}

}

}

fun reduceState (
previous : HomeViewState,
feedLoaderState : FeedLoaderState
) : HomeViewState {
val newState : HomeViewState = …
// compute the new State
// by taking previous state and foo into account
return newState;
}

View Slide

#mobiconf2017
State Driven by Business Logic

View Slide

#mobiconf2017
Microservices

View Slide

#mobiconf2017
state

View Slide

#mobiconf2017
state
state

View Slide

#mobiconf2017

View Slide

#mobiconf2017
Independent UI Components

View Slide

#mobiconf2017

View Slide

#mobiconf2017

View Slide

interface SelectedCountToolbar {
fun deleteSelectedIntent() : Observable
fun render(viewState : Int)
}

View Slide

#mobiconf2017
Reproducible States

View Slide

#mobiconf2017

View Slide

#mobiconf2017

View Slide

#mobiconf2017
Testing

View Slide

#mobiconf2017
assertEquals (expectedState, actualState)

View Slide

#mobiconf2017
More Integration Tests
Less Unit tests

View Slide

#mobiconf2017
More Integration Tests
Less Unit Tests

View Slide

#mobiconf2017
Why Unit Tests
- Test code in isolation
- Reliable (not ﬂaky)
- Run fast
- Testing UI as part of an Integration Test is senseless, since View is dump

View Slide

#mobiconf2017
2 Unit Tests, 0 Integration Test

View Slide

#mobiconf2017
2 Unit Tests, 0 Integration Test

View Slide

#mobiconf2017
What if we architect and write Test Code
the way we write production code?

View Slide

#mobiconf2017
Let’s write reactive and reusable
Integration Tests

View Slide

...
}
}

View Slide

...
renderLoading()
else if (viewState.result != null)
renderResult(viewState.result)
else if (viewState.error != null)
renderError()
else throw IllegalStateException("Unknown ViewState")
}
}

View Slide

@Inject var viewBinding : SearchViewBinding
return viewBinding.searchIntent()
}
viewBinding.render(viewState)
}
}

View Slide

class SearchViewBinding : SearchView {
val rootView : ViewGroup
}
…
}
}

View Slide

class TestSearchViewBinding : SearchViewBinding {
override fun render( viewState : SearchViewState ) {
super.render(viewState)
}
}

View Slide

var statesList : List
val renderedStates : BehaviorSubject>
statesList = statesList.copyAndAdd(viewState)
renderedStates.onNext(statesList)
}
}

View Slide

var statesList : List
val renderedStates : BehaviorSubject>
statesList = statesList.copyAndAdd(viewState)
renderedStates.onNext(statesList)
Screenshot.snap(rootView).record()
}
}
http://facebook.github.io/screenshot-tests-for-android

View Slide

class SearchFragmentTest {
@Rule val rule = ActivityTestRule() 
val viewBinding : TestSearchViewBinding
@Test fun onTyping3CharsShowLoadingThenResults() {
onView(withId(…).perform(typeText(“Camera“)
val states = viewBinding.renderedStates.blockingFirst()
val loading = SearchViewState(true, null, null)
val results = SearchViewState(false, someProducts, null)
val expectedStates = listOf(loading, results)
assertEquals(expectedStates, states)
}
}

}
}

}
}

}
}

}
}
INPUT
OUTPUT
ASSERT.

View Slide

class Inputs (val viewBinding : TestSearchViewBinding) {
fun writeIntoSearchBox( term : String) {
onView(withId(…).perform(typeText(term)
}
}

View Slide

class Output (val viewBinding : TestSearchViewBinding) {
fun renderedStates() : List =
viewBinding.renderedStates.blockingFirst()
}

View Slide

class Assertions (val inputs : Inputs, val output : Output) {
fun loadThenShowResults() = Completable.fromCallable {
inputs.writeIntoSearchBox(“Camera“)
val states = output.renderedStates()
}
}

View Slide

val assertions = Assertions (
Inputs(viewBinding) , Output(viewBinding)
)
assertions.loadThenShowResults().awaitBlocking()
}
}

View Slide

class FooAndBarTest {
@Test fun fooAndBar() {
val fooAssertions = FooAssertions (…)
val barAssertions = BarAssertions (…)
fooAssertions.something()
.concatWith(barAssertions)
.blockingAwait()
}
}

View Slide

Inputs(viewBinding) , Output(viewBinding)
)
}
}

View Slide

class JvmSearchViewTest {
JvmInputs(realPresenter) , JvmOutput(realPresenter)
)
}
}

View Slide

#mobiconf2017
Why Unit Tests
- Test code in isolation
- Reliable (not ﬂaky)
- Run fast
- Testing UI as part of an Integration Test is senseless, since View is dump

View Slide

#mobiconf2017
Model-View-Intent
- takes state management serious —> Solves & avoids a lot of problems
- Unidirectional dataﬂow
- State driven by business logic
- Composable
- Easy to test

View Slide

#mobiconf2017
Hannes Dorfmann
@sockeqwe
www.hannesdorfmann.com
[email protected]

Reactive StateManagement with Model-View-Intent

Reactive StateManagement with Model-View-Intent

Hannes Dorfmann

More Decks by Hannes Dorfmann

Other Decks in Programming

Featured

Transcript