At upday, we’ve been successfully using the Model-View-ViewModel pattern together with RxJava for more than a year and a half. After sharing with the community a very high-level overview of what this pattern entails, we decided that it’s time to go deeper into the implementation details. I will present our way of handling Android classes and other 3rd party dependencies, and how we make sure that our code is as unit-testable as possible. I’ll speak about our decision process on how to split classes, may they be Views, ViewModels or DataModels, and the benefits and drawbacks of these separations. Any non-”Hello World” app will most likely have two things: multiple Activities/Fragments, of which at least one will contain a ListView/RecyclerView. Then I’ll show how we handle lists: how is the data added to the list, and how and who listens and reacts to list items taps.

1. It’s All In The
Implementation
Details
@FMuntenescu
upday
MVVM

2. M
V
V M
odel
iew
iew odel

3. M
V
V M
odel
iew
iew odel
(With RxJava)

4. DataModelView ViewModel

5. DataModelView ViewModel
Network
Database
SharedPreferences

6. DataModelView ViewModel
Network
Database
SharedPreferences
Observable<List<Article>>

7. DataModelView ViewModel
Network
Database
SharedPreferences
Observable<ArticlesUiModel>
Observable<List<Article>>

8. JUnit testable
DataModelView ViewModel
Network
Database
SharedPreferences

9. Android Classes?
Static Methods?

10. Providers
Android Classes?
Static Methods?

11. context.getString(id);

12. context.getString(id);
String getString(@StringRes int id) {
return
}

13. public class ResourceProvider {
Context context;
ResourceProvider(Context context) {
this.context = context;
}
context.getString(id);
String getString(@StringRes int id) {
return
}

14. FirebaseRemoteConfig.getInstance().getString(key)

15. FirebaseRemoteConfig.getInstance()
public class RemoteConfigProvider {
FirebaseRemoteConfig remoteConfig;
RemoteConfigProvider() {
remoteConfig =
;
}

16. FirebaseRemoteConfig.getInstance()
public class RemoteConfigProvider {
FirebaseRemoteConfig remoteConfig;
RemoteConfigProvider() {
remoteConfig =
;
}
String getString(String key) {
return remoteConfig.getString(key);
}

17. DataModel

18. DataModelView ViewModel
Network
Database
SharedPreferences

19. News
Articles

20. News
Articles

22. Network
Database
SharedPreferences

23. GET
.../articles
Database
SharedPreferences

24. GET
.../articles
TABLE
articles
SharedPreferences

25. GET
.../articles
TABLE
articles
SharedPreferences
Articles
DataModel

26. GET
.../articles
TABLE
articles
SharedPreferences
Articles
DataModel
ViewModelX
ViewModelY

27. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;

28. Observable<List<Article>> getOrFetchTopNewsArticles() {
}
public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;

29. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
return localDataSource
.getTopNews()
Observable<List<Article>> getOrFetchTopNewsArticles() {
}

30. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
return localDataSource
.getTopNews()
Observable<List<Article>> getOrFetchTopNewsArticles() {
}

31. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.flatMap(getValidArticles())
return localDataSource
.getTopNews()
Observable<List<Article>> getOrFetchTopNewsArticles() {
}

32. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
Observable<List<Article>> getOrFetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.flatMap(getValidArticles())

33. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.flatMap(getValidArticles())
Observable<List<Article>>
Observable<List<Article>> getOrFetchTopNewsArticles() {
}

34. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.flatMap(getValidArticles())
.getTopNews()
Observable<List<Article>> getOrFetchTopNewsArticles() {
}

35. public class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.flatMap(getValidArticles())
.getTopNews()
Observable<List<Article>> getOrFetchTopNewsArticles() {
}
getOrFetchTopNewsArticles()

36. HomeView

37. Article Teaser
View

38. Article Teaser
View
ArticleTeaser
ViewModel

39. Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel

40. Database
Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel

41. Database
Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel
New Article

42. Articles
DataModel
Database
Article Teaser
View
ArticleTeaser
ViewModel
New Article
getOrfetchTopNewsArticles

43. Database
Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel
New Article
getTopNewsArticle

44. Article Teaser
View
Database
Articles
DataModel
ArticleTeaser
ViewModel
New Article

45. DataModel uses the Repository pattern
One DataModel per business model
DataModel drives the data flow

46. View
ViewModel

47. Article Teaser
View
<LinearLayout>
<…ArticleTeaserView
…/>
</LinearLayout>

48. class ArticleTeaserView extends View {
@Inject
ArticleTeaserViewModel viewModel;

49. class ArticleTeaserView extends View {
public ArticleTeaserView(Context context) {
…
onInject();
}
@Inject
ArticleTeaserViewModel viewModel;

50. class ArticleTeaserView extends View {
public ArticleTeaserView(Context context) {
…
onInject();
}
@Inject
ArticleTeaserViewModel viewModel;
new ArticleTeaserViewModel()

51. class ArticleTeaserView extends View {
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
bind();
}

52. class ArticleTeaserView extends View {
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
bind();
}
private void bind() {
subscription.add(
viewModel.getTopNewsArticle()
.subscribeOn(…)
.observeOn(…)
.subscribe(this::showArticle,
error -> Timber.e(error, “Error …”);
}

53. class ArticleTeaserView extends View {
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
bind();
}
@Override
protected void onDetachedFromWindow() {
}

54. class ArticleTeaserView extends View {
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
bind();
}
@Override
protected void onDetachedFromWindow() {
}
unbind();

55. class ArticleTeaserView extends View {
@Override
protected void onDetachedFromWindow() {
}
unbind();
private void unbind() {
}

56. class ArticleTeaserView extends View {
@Override
protected void onDetachedFromWindow() {
}
unbind();
subscription.clear();
private void unbind() {
}

57. private void unbind() {
}
subscription.clear();
viewModel.dispose();
class ArticleTeaserView extends View {
@Override
protected void onDetachedFromWindow() {
}
unbind();

58. TopNewsStream
View
Fragment

59. public class TopNewsStreamView extends Fragment {
@Inject
TopNewsStreamViewModel viewModel;

60. public class TopNewsStreamView extends Fragment {
@Inject
TopNewsStreamViewModel viewModel;
@Override
public void onActivityCreated(Bundle savedInstanceState) {
…
onInject();
}

61. public class TopNewsStreamView extends Fragment {
@Inject
TopNewsStreamViewModel viewModel;
@Override
public void onResume() {
…
bind();
}
@Override
public void onPause() {
…
unbind();
}

62. Lifecycle of the ViewModel depends on the lifecycle of the View
Only the View has a reference to the corresponding ViewModel
Only other native android classes know about the View

63. Model-View-ViewModel
RecyclerView

64. Adapter
ViewHolder
DataSet

65. Adapter
ViewHolder
DataSet
onCreateViewHolder
onBindViewHolder

66. Adapter
ViewHolder
DataSet

67. Adapter
ViewHolder
UiModels
TopNewsStream
View

68. TopNewsAdapter UiModels
ViewHolder
TopNewsStream
View

69. TopNewsAdapter UiModels
TopNewsViewHolder
TopNewsStream
View

70. TopNewsStream
View
TopNewsStream
ViewModel

71. public class TopNewsStreamViewModel {
Observable<TopNewsUiModel> getTopNewsUiModel() {
}

72. public class TopNewsStreamViewModel {
Observable<TopNewsUiModel> getTopNewsUiModel() {
}
@AutoValue
abstract class TopNewsUiModel {
abstract List<UiModel> uiModels();
abstract int position();
}

73. public class TopNewsStreamView extends Fragment {
@Inject
TopNewsStreamViewModel viewModel;

74. @Override
public void onResume() {
…
bind();
}
public class TopNewsStreamView extends Fragment {
@Inject
TopNewsStreamViewModel viewModel;

75. private void bind() {
subscription.add(
viewModel.getTopNewsUiModel()
.subscribe(uiModel -> setupUiModel(uiModel));
}
public class TopNewsStreamView extends Fragment {

76. private void setupUiModel(TopNewsUiModel model) {
// update Adapter with the UiModel
}
private void bind() {
subscription.add(
viewModel.getTopNewsUiModel()
.subscribe(uiModel -> setupUiModel(uiModel));
}
public class TopNewsStreamView extends Fragment {

77. public class TopNewsAdapter extends
RecyclerView.Adapter<TopNewsViewHolder> {

78. public class TopNewsAdapter extends
RecyclerView.Adapter<TopNewsViewHolder> {
@Override
public TopNewsViewHolder onCreateViewHolder(
ViewGroup parent, int viewType) {
// create a view holder with a new view
// that represents items of the given type
}

79. Open Article

80. Open Article
Share Article

81. Open Article
Share Article
Label should
disappear after 5sec

82. class TopNewsArticleViewModel {
void openArticle(){
…
}
void share(){
…
}
Observable<Boolean> isNewLabelVisible(){
…
}
}

83. public class TopNewsAdapter extends
RecyclerView.Adapter<TopNewsViewHolder> {
@Override
public TopNewsViewHolder onCreateViewHolder(
ViewGroup parent, int viewType) {
// create a view holder with a new view
// that represents items of the given type
// create the view model
}

84. ViewModel creates and emits the Model for the View
View subscribes to the emissions of the Model
View updates the RecyclerView.Adapter
The View and the corresponding ViewModel are created in
Adapter.onCreateViewHolder

85. Open Article

86. Open Article
No ViewModel

87. class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}

88. @AutoValue
abstract class UiModel {
abstract Article article();
class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}

89. @AutoValue
abstract class UiModel {
abstract Article article();
abstract Action0 onClickAction();
class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}

90. @AutoValue
abstract class UiModel {
abstract Article article();
abstract Action0 onClickAction();
static UiModel create(Article article,
Action0 onClickAction){
…
}
class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}

91. class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}

92. class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}
return dataModel.getTopNewsArticles()
.flatMap(article -> createUiModel(article))

93. class TopNewsStreamViewModel {
Observable<List<UiModel>> getUiModels() {
}
return dataModel.getTopNewsArticles()
.flatMap(article -> createUiModel(article))
private UiModel createUiModel(Article article) {
return UiModel.create(article,
new Action0() {
@Override
public void call() {
// handle item click
}});
}

94. class TopNewsViewHolder extends RecyclerView.ViewHolder{

95. class TopNewsViewHolder extends RecyclerView.ViewHolder{
TextView title;
…

96. class TopNewsViewHolder extends RecyclerView.ViewHolder{
TextView title;
…
void bindItem(UiModel uiModel) {
title.setText(uiModel.getTitle());
}

97. void bindItem(UiModel uiModel) {
title.setText(uiModel.getTitle());
}
view.setOnClickListener(
v -> uiModel.onClickAction().call());
class TopNewsViewHolder extends RecyclerView.ViewHolder{
TextView title;
…

98. TopNewsAdapter UiModels
TopNewsViewHolder
bindItem(UiModel)

99. TopNewsAdapter UiModels
TopNewsViewHolder
bindItem(UiModel)
getUiModels()
TopNewsStream
ViewModel

100. Define an Action in the View’s Model
Bind the Model to the View via the RecyclerView.ViewHolder
Trigger the Action
Action is handled by the ViewModel

101. It’s All In The
Implementation
Details
@FMuntenescu
upday
MVVM
https://goo.gl/bIwdmc