Reactive View Models

Quick look into how Reactive View Models can make managing view state in Android easier.

Example Project: https://github.com/bgogetap/ReactiveViewModels

Transcript

1. Reactive View Models Brandon Gogetap
2. View State - Where to persist? • SavedState subclass • Override onSaveInstanceState / onRestoreInstanceState • Must serialize all fields required to restore state • Presenter (scoped Singleton instance) • Easy, but can lead to Presenter performing duties beyond its original purpose • Database or other long-term storage • Great for some cases (messaging app?), but may be overly complex for transient data that doesn’t need to be persisted beyond the session.
3. Presenter <—> View relationship • Having to use a new Presenter class for each view isn’t an issue—but dealing with the interaction between them can be bothersome • Null check on view every time Presenter wants to call a view method • Remembering to detach Presenter* • Separating “first attach” logic from subsequent attaches* *If using “scoped Singleton” Presenters
4. Traditional Presenter <—> View relationship
5. Traditional Presenter <—> View relationship
6. Traditional Presenter <—> View relationship
7. Traditional Presenter <—> View relationship
8. Traditional Presenter <—> View relationship
9. Traditional Presenter <—> View relationship
10. Traditional Presenter <—> View relationship
11. Traditional Presenter <—> View relationship
12. Traditional Presenter <—> View relationship
13. Traditional Presenter <—> View relationship • Bottom line is, for efficiency, several methods are exposed on the view to allow Presenter to update independently. • Each call to one of these methods involves a null check* • Presenter cluttered • View cluttered
14. Traditional Presenter <—> View relationship • Testing the Presenter’s view-updating logic isn’t perfect (must assume view receives call) • Above point not as important if view attached logic is sound, but… • Where do we store the state of each independent piece of the view? • Multiple fields in presenter? • Disassembled from some other larger object?
15. Ideal View Lifecycle • View should subscribe to something that tells it what to display • View actions should be delegated to a class (Presenter still fits) • Methods to update view should not have to be defined or exposed
16. Using an Observable based View Model
17. Using an Observable based View Model • View subscribes to relevant Observables and unsubscribes when necessary • View Model can be updated at any time, even if view isn’t ready! • Presenter doesn’t have to know about the view • View doesn’t have to expose any methods to allow other classes to update it • View Model can be unit tested • Any manipulation of data into what the view needs is encapsulated in the View Model
18. Using an Observable based View Model • The idea doesn’t have a strict implementation—can go a few different routes • View Model could talk directly with Repository in some cases • This could mean the Presenter never has to know about the view or View Model • Depending on view complexity—expose Observables for each widget/ property (title, message, background color, etc.) • Very simple cases could even have the Presenter act as the View Model
19. View Model Structure • Scoped Singleton provided by dependency injection framework • Exposes Subjects/Relays as Observables • Exposed Observables may be behind Interface to obfuscate other methods required to update the View Model from the view
20. View Model Structure final class HomeViewModel implements HomeViewProvider {
 
 private final BehaviorRelay<List<ListItem>> listItemRelay;
 
 HomeViewModel(ListRepository repository) {
 listItemRelay = BehaviorRelay.create();
 repository.getItems().subscribe(listItemRelay);
 }
 
 @Override public Observable<List<ListItem>> listItems() {
 return listItemRelay;
 }
 }
21. View Model Structure final class HomeViewModel implements HomeViewProvider {
 
 private final BehaviorRelay<List<ListItem>> listItemRelay;
 
 HomeViewModel(ListRepository repository) {
 listItemRelay = BehaviorRelay.create();
 repository.getItems().subscribe(listItemRelay);
 }
 
 @Override public Observable<List<ListItem>> listItems() {
 return listItemRelay;
 }
 }
22. View Model Structure final class HomeViewModel implements HomeViewProvider {
 
 private final BehaviorRelay<List<ListItem>> listItemRelay;
 
 HomeViewModel(ListRepository repository) {
 listItemRelay = BehaviorRelay.create();
 repository.getItems().subscribe(listItemRelay);
 }
 
 @Override public Observable<List<ListItem>> listItems() {
 return listItemRelay;
 }
 }
23. View Model Structure final class HomeViewModel implements HomeViewProvider {
 
 private final BehaviorRelay<List<ListItem>> listItemRelay;
 
 HomeViewModel(ListRepository repository) {
 listItemRelay = BehaviorRelay.create();
 repository.getItems().subscribe(listItemRelay);
 }
 
 BehaviorRelay<List<ListItem>> listItemRelay() {
 return listItemRelay;
 }
 
 @Override public Observable<List<ListItem>> listItems() {
 return listItemRelay;
 }
 }
24. View Model Structure final class HomeViewModel implements HomeViewProvider {
 
 private final BehaviorRelay<List<ListItem>> listItemRelay;
 
 HomeViewModel(ListRepository repository) {
 listItemRelay = BehaviorRelay.create();
 repository.getItems().subscribe(listItemRelay);
 }
 
 void updateListItems(List<ListItem> listItems) {
 listItemRelay.accept(listItems);
 }
 
 @Override public Observable<List<ListItem>> listItems() {
 return listItemRelay;
 }
 }
25. View Structure @Override protected void onViewBound(View view) {
 component.inject(this);
 recyclerView.setLayoutManager(new LinearLayoutManager(view.getContext()));
 disposables.add(viewModel.listItems().subscribe(this::setData));
 }
 
 private void setData(List<ListItem> items) {
 adapter = new HomeAdapter(items);
 recyclerView.setAdapter(adapter);
 } @Override protected void onDestroyView(@NonNull View view) {
 super.onDestroyView(view);
 disposables.clear();
 }
26. final class DetailViewModel implements DetailViewProvider {
 
 /** Field declarations **/
 
 DetailViewModel(DetailRepository repository) {
 titleRelay = BehaviorRelay.create();
 messageRelay = BehaviorRelay.create();
 colorRelay = BehaviorRelay.create();
 idRelay = BehaviorRelay.create();
 repository.getItem().subscribe(listItem -> {
 titleRelay.accept(listItem.title);
 messageRelay.accept(listItem.message);
 colorRelay.accept(listItem.color);
 idRelay.accept(listItem.id);
 });
 }
 
 @Override public Observable<String> title() {
 return titleRelay;
 }
 
 @Override public Observable<String> message() {
 return messageRelay;
 }
 
 @Override public Observable<Integer> id() {
 return idRelay;
 }
 
 @Override public Observable<Integer> color() {
 return colorRelay;
 }
 }
27. final class DetailViewModel implements DetailViewProvider {
 
 /** Field declarations **/
 
 DetailViewModel(DetailRepository repository) {
 titleRelay = BehaviorRelay.create();
 messageRelay = BehaviorRelay.create();
 colorRelay = BehaviorRelay.create();
 idRelay = BehaviorRelay.create();
 repository.getItem().subscribe(listItem -> {
 titleRelay.accept(listItem.title);
 messageRelay.accept(listItem.message);
 colorRelay.accept(listItem.color);
 idRelay.accept(listItem.id);
 });
 }
 
 @Override public Observable<String> title() {
 return titleRelay;
 }
 
 @Override public Observable<String> message() {
 return messageRelay;
 }
 
 @Override public Observable<Integer> id() {
 return idRelay;
 }
 
 @Override public Observable<Integer> color() {
 return colorRelay;
 }
 }
28. final class DetailViewModel implements DetailViewProvider {
 
 /** Field declarations **/
 
 DetailViewModel(DetailRepository repository) {
 titleRelay = BehaviorRelay.create();
 messageRelay = BehaviorRelay.create();
 colorRelay = BehaviorRelay.create();
 idRelay = BehaviorRelay.create();
 repository.getItem().subscribe(listItem -> {
 titleRelay.accept(listItem.title);
 messageRelay.accept(listItem.message);
 colorRelay.accept(listItem.color);
 idRelay.accept(listItem.id);
 });
 }
 
 @Override public Observable<String> title() {
 return titleRelay;
 }
 
 @Override public Observable<String> message() {
 return messageRelay;
 }
 
 @Override public Observable<Integer> id() {
 return idRelay;
 }
 
 @Override public Observable<Integer> color() {
 return colorRelay;
 }
 }
29. final class DetailViewModel implements DetailViewProvider {
 
 /** Field declarations **/
 
 DetailViewModel(DetailRepository repository) {
 titleRelay = BehaviorRelay.create();
 messageRelay = BehaviorRelay.create();
 colorRelay = BehaviorRelay.create();
 idRelay = BehaviorRelay.create();
 repository.getItem().subscribe(listItem -> {
 titleRelay.accept(listItem.title);
 messageRelay.accept(listItem.message);
 colorRelay.accept(listItem.color);
 idRelay.accept(listItem.id);
 });
 }
 
 @Override public Observable<String> title() {
 return titleRelay;
 }
 
 @Override public Observable<String> message() {
 return messageRelay;
 }
 
 @Override public Observable<Integer> id() {
 return idRelay;
 }
 
 @Override public Observable<Integer> color() {
 return colorRelay;
 }
 }
30. @Override protected void onViewBound(View view) {
 component.inject(this);
 disposables.add(viewModel.title().subscribe(titleTextView::setText));
 disposables.add(viewModel.message().subscribe(messageTextView::setText));
 disposables.add(viewModel.id().subscribe(id -> idTextView.setText("ID: " + id)));
 disposables.add(viewModel.color().subscribe(view::setBackgroundColor));
 } @Override protected void onDestroyView(@NonNull View view) {
 super.onDestroyView(view);
 disposables.clear();
 }
31. View Model Structure • There are many ways to structure — do what makes sense for you • Main takeaways of an ideal implementation • All view state is kept in BehaviorSubjects/Relays • All interactions are one-way—no other class cares about the view
32. View Model Testing @Test public void listItems() {
 TestObserver<List<ListItem>> testObserver = new TestObserver<>();
 viewModel.listItems().subscribe(testObserver);
 itemRelay.accept(getListWithCount(2));
 itemRelay.accept(getListWithCount(4));
 testObserver.assertValues(getListWithCount(2), getListWithCount(4));
 }
33. View Model Testing @Test public void listItems() {
 TestObserver<List<ListItem>> testObserver = new TestObserver<>();
 viewModel.listItems().subscribe(testObserver);
 itemRelay.accept(getListWithCount(2));
 itemRelay.accept(getListWithCount(4));
 testObserver.assertValues(getListWithCount(2), getListWithCount(4));
 }
34. View Model Testing @Test public void listItems() {
 TestObserver<List<ListItem>> testObserver = new TestObserver<>();
 viewModel.listItems().subscribe(testObserver);
 itemRelay.accept(getListWithCount(2));
 itemRelay.accept(getListWithCount(4));
 testObserver.assertValues(getListWithCount(2), getListWithCount(4));
 }
35. View Model Testing @Test public void listItems() {
 TestObserver<List<ListItem>> testObserver = new TestObserver<>();
 viewModel.listItems().subscribe(testObserver);
 itemRelay.accept(getListWithCount(2));
 itemRelay.accept(getListWithCount(4));
 testObserver.assertValues(getListWithCount(2), getListWithCount(4));
 }
36. View Model Testing @Test public void listItem() {
 TestObserver<String> titleTestObserver = new TestObserver<>();
 TestObserver<Integer> idTestObserver = new TestObserver<>();
 TestObserver<String> messageTestObserver = new TestObserver<>();
 TestObserver<Integer> colorTestObserver = new TestObserver<>();
 viewModel.title().subscribe(titleTestObserver);
 viewModel.message().subscribe(messageTestObserver);
 viewModel.id().subscribe(idTestObserver);
 viewModel.color().subscribe(colorTestObserver);
 
 itemRelay.accept(FIRST);
 itemRelay.accept(SECOND);
 
 titleTestObserver.assertValues(FIRST.title(), SECOND.title());
 messageTestObserver.assertValues(FIRST.message(), SECOND.message());
 idTestObserver.assertValues(FIRST.id(), SECOND.id());
 colorTestObserver.assertValues(FIRST.color(), SECOND.color());
 }
37. View Model Testing @Test public void listItem() {
 TestObserver<String> titleTestObserver = new TestObserver<>();
 TestObserver<Integer> idTestObserver = new TestObserver<>();
 TestObserver<String> messageTestObserver = new TestObserver<>();
 TestObserver<Integer> colorTestObserver = new TestObserver<>();
 viewModel.title().subscribe(titleTestObserver);
 viewModel.message().subscribe(messageTestObserver);
 viewModel.id().subscribe(idTestObserver);
 viewModel.color().subscribe(colorTestObserver);
 
 itemRelay.accept(FIRST);
 itemRelay.accept(SECOND);
 
 titleTestObserver.assertValues(FIRST.title(), SECOND.title());
 messageTestObserver.assertValues(FIRST.message(), SECOND.message());
 idTestObserver.assertValues(FIRST.id(), SECOND.id());
 colorTestObserver.assertValues(FIRST.color(), SECOND.color());
 }
38. View Model Testing @Test public void listItem() {
 TestObserver<String> titleTestObserver = new TestObserver<>();
 TestObserver<Integer> idTestObserver = new TestObserver<>();
 TestObserver<String> messageTestObserver = new TestObserver<>();
 TestObserver<Integer> colorTestObserver = new TestObserver<>();
 viewModel.title().subscribe(titleTestObserver);
 viewModel.message().subscribe(messageTestObserver);
 viewModel.id().subscribe(idTestObserver);
 viewModel.color().subscribe(colorTestObserver);
 
 itemRelay.accept(FIRST);
 itemRelay.accept(SECOND);
 
 titleTestObserver.assertValues(FIRST.title(), SECOND.title());
 messageTestObserver.assertValues(FIRST.message(), SECOND.message());
 idTestObserver.assertValues(FIRST.id(), SECOND.id());
 colorTestObserver.assertValues(FIRST.color(), SECOND.color());
 }
39. View Model Testing @Test public void listItem() {
 TestObserver<String> titleTestObserver = new TestObserver<>();
 TestObserver<Integer> idTestObserver = new TestObserver<>();
 TestObserver<String> messageTestObserver = new TestObserver<>();
 TestObserver<Integer> colorTestObserver = new TestObserver<>();
 viewModel.title().subscribe(titleTestObserver);
 viewModel.message().subscribe(messageTestObserver);
 viewModel.id().subscribe(idTestObserver);
 viewModel.color().subscribe(colorTestObserver);
 
 itemRelay.accept(FIRST);
 itemRelay.accept(SECOND);
 
 titleTestObserver.assertValues(FIRST.title(), SECOND.title());
 messageTestObserver.assertValues(FIRST.message(), SECOND.message());
 idTestObserver.assertValues(FIRST.id(), SECOND.id());
 colorTestObserver.assertValues(FIRST.color(), SECOND.color());
 }
40. Sample Project on GitHub github.com/bgogetap/ReactiveViewModels