At upday, we’ve been successfully using the Model-View-ViewModel pattern together with RxJava for more than a year and 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 in 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. I will show how we decided to implement the navigation between Views and how we test it. 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. Mobile
Architecture
From The Patterns
To The Deployment

2. MVVM
It’s All In The
Implementation
Details

3. Model
View
ViewModel

4. DataModelView ViewModel
1 … *

5. Android Classes?
Static Methods?

6. Android Classes?
Static Methods?
Providers

7. context.getString(id);

8. public class ResourceProvider {
Context context;
ResourceProvider(Context context){
this.context = context;
}
}

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

10. FirebaseRemoteConfig.getInstance() .getString(key);

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

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

13. DataModel

14. View DataModelViewModel
Network
Database
SharedPreferences

15. Articles

16. Articles
Articles
DataModel

18. Category

19. Category
Categories
DataModel

21. Articles
DataModel

22. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}

23. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}

24. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()

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

26. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.compose(new ArticleAgeFilterTransformer(
filter))

27. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.compose(new ArticleAgeFilterTransformer(
filter))
localDataSource
.getTopNews()

28. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.compose(new ArticleAgeFilterTransformer(
filter))
localDataSource
.getTopNews()
Observable<List<Article>>

29. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.compose(new ArticleAgeFilterTransformer(
filter))
.getTopNews()

30. class ArticlesDataModel {
RemoteDataSource remoteDataSource;
LocalDataSource localDataSource;
}
Observable<List<Article>> getOrfetchTopNewsArticles() {
}
return localDataSource
.getTopNews()
.flatMap(articles -> articles.isEmpty()
? remoteDataSource.getTopNews()
: Observable.just(articles));
.compose(new ArticleAgeFilterTransformer(
filter))
getOrfetchTopNewsArticles
.getTopNews()

31. HomeView

32. Article Teaser
View

33. Article Teaser
View
ArticleTeaser
ViewModel

34. Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel

35. Database
Articles
DataModel
Article Teaser
View
ArticleTeaser
ViewModel

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

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

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

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

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

41. View
ViewModel

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

43. class ArticleTeaserView extends View{
ArticleTeaserView(Context context){
...
onInject();
}
}

44. class ArticleTeaserView extends View{
}
new ArticleTeaserViewModel()
ArticleTeaserView(Context context){
...
onInject();
}

45. class ArticleTeaserView extends View{
}
void onAttachedToWindow(){
bind();
}

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

47. class ArticleTeaserView extends View{
}
void onDettachedFromWindow(){
subscription.clear();
}

48. class ArticleTeaserView extends View{
}
void onDettachedFromWindow(){
subscription.clear();
}
viewModel.dispose();

49. Lifecycle of the ViewModel depends on the lifecycle of the View
Only the View has a reference to the corresponding ViewModel
View is declared in the XML
Only other native android classes know about the View

50. Model-View-ViewModel
Lists

51. TopNewsStream
View
class TopNewsStreamViewModel {
}

52. class TopNewsStreamViewModel {
}
Observable<TopNewsPages>
getTopNewsPages(){
…
}
TopNewsStream
View

53. class TopNewsStreamViewModel {
}
@AutoValue
abstract class TopNewsPages {
List<Displayable> displayables();
int position();
}
Observable<TopNewsPages>
getTopNewsPages(){
…
}
TopNewsStream
View

54. class TopNewsStreamView extends Fragment {
}
@Inject
TopNewsStreamViewModel viewModel;

55. void onResume(){
bind();
}
void onPause(){
unbind();
}
class TopNewsStreamView extends Fragment{
}

56. class TopNewsStreamView extends Fragment{
}
void bind(){
subscription.add(
viewModel.getTopNewsPages()
.subscribe(pages -> setupPages(pages))
}

57. class TopNewsStreamView extends Fragment{
}
void bind(){
subscription.add(
viewModel.getTopNewsPages()
.subscribe(pages -> setupPages(pages))
}
void setupPages(TopNewsPages pages){
// based on pages.displayables()
// update RecyclerView.Adapter
// using DiffUtil.calculateDiff
}

58. void bind(){
subscription.add(
viewModel.getTopNewsPages()
.subscribe(pages -> setupPages(pages))
}
void setupPages(TopNewsPages pages){
// based on pages.displayables()
// update RecyclerView.Adapter
// using DiffUtil.calculateDiff
}
// based on pages.position()
// update position
class TopNewsStreamView extends Fragment{
}

59. class DisplayablesRecyclerViewAdapter
extends RecyclerView.Adapter<BoundViewHolder> {
}

60. class DisplayablesRecyclerViewAdapter
extends RecyclerView.Adapter<BoundViewHolder> {
}
onCreateItemView(ViewGroup parent,
int viewType){
// create View
// create the ViewModel for the View
}

61. Open Article

62. Open Article
Share Article

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

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

65. ViewModel creates and emits the Model of the View
View subscribes to the emissions of the Model
View updates the RecyclerView.Adapter
In Adapter.onCreateItemView the RecylerView’s item and
the corresponding ViewModel are created.

66. Open Article

67. no ViewModel
Open Article

68. class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}
}

69. class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}
@AutoValue
abstract class Displayable (){
Article article();
}
}

70. @AutoValue
abstract class Displayable (){
Article article();
}
Action0 onClickAction();
}
class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}

71. Displayable create(Article article, Action0 action){
…
}
@AutoValue
abstract class Displayable (){
Article article();
}
Action0 onClickAction();
}
class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}

72. class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}
return dataModel.getTopNewsArticles()
.flatMap(article ->
createDisplayable(article))
...
}

73. class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}
return dataModel.getTopNewsArticles()
.flatMap(article ->
createDisplayable(article))
...
}
Displayable createDisplayable(Article article){
return Displayable.create(article,
new Action0() {
@Override
public void call() {
// handle item click
}
}

74. class TopNewsStreamViewModel {
Observable<List<Displayable>> getDisplayables(){
}
return dataModel.getTopNewsArticles()
.flatMap(article ->
createDisplayable(article))
...
}
Displayable createDisplayable(Article article){
return Displayable.create(article,
new Action0() {
@Override
public void call() {
// handle item click
}
}

75. class TopNewsViewHolder implements
RecyclerView.ViewHolder {
}

76. class TopNewsViewHolder implements
RecyclerView.ViewHolder {
}
TextView title;
…

77. class TopNewsViewHolder implements
RecyclerView.ViewHolder {
}
TextView title;
…
void bindItem(Displayable displayable){
title.setText(displayable.article().getTitle())
}

78. class TopNewsViewHolder implements
RecyclerView.ViewHolder {
}
TextView title;
…
void bindItem(Displayable displayable){
title.setText(displayable.article().getTitle())
}
view.setOnClickListener(
v -> displayable.onClickAction().call())

79. 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

80. MVVM
It’s All In The
Implementation
Details