Modern Ways to Architecture your Android app: MVP and MVVM

Talk given at the AndroidListener meetup in Chicago, August 2015.

1. Modern Ways to Architect your Android app: MVP and MVVM
2. Hello! I am Jorge Coca Mobile Engineer @ SPR Consulting. You can find me at: @jcocaramos
3. What does MVP stand for? Model View Presenter
4. What does MVVM stand for? Model View-View Model
5. Why do I need to learn both?
6. “ During the last years, the community seemed to be inclined to incorporate MVP patterns in their Android apps
7. “ … but then, during the last Google IO
8. DATA BINDING Connects data and UI elements -> Automates listener creation, message sending, setters...
9. What’s the goal of these two approaches?
10. We want to make our code... ▪ Independent of frameworks ▪ Testable ▪ Independent of UI ▪ Independent of storage mechanisms ▪ Independent of external dependencies
12. Model View Presenter
13. Model View Presenter (MVP) ▪ Derivation of MVC pattern ▪ Mostly used for UI interfaces ▪ Main problem that solves is testing Model Presenter View
14. View Presenter Model 1 User does something 2 Gets data 3 Prepares and returns data 4 Updates view
16. M for Model ▪ Domain object ▪ Holds data, but not behaviors ▪ It may contain validation, but never formatting ▪ POJO objects
17. V for View ▪ Displays the data ▪ Routes commands to the presenter ▪ It’s going to be abstracted using an interface implemented by Android components ▪ It’s passive ◦ Activities and Fragments
18. P for Presenter ▪ Acts upon the model and the view ▪ Receives commands from the view and responds accordingly ▪ Responsible for formatting data ▪ Responsible for presentation logic ▪ Doesn’t have Android dependencies ◦ GOOD: unit tests ◦ BAD: attached to View lifecycle
19. GOOD Test all our UI code without framework code
20. BAD Attached to View lifecycle
21. Model View-View Model
22. Model View-View Model (MVVM) ▪ Commonly used by Microsoft ▪ Binding engine will avoid boilerplate code View Model State and operations View Model Data binding and commands Sends notification ViewModel updates the model Sends notification
23. VM for View-Model ▪ ViewModel implementations will contain state logic of the view ▪ Activities and Fragments lifecycle tied to VM (that’s why DataBinding is good!)
24. VM for View-Model ▪ ViewModel won’t contain a view instance; will use events mechanisms ▪ Decouple our Views from the Model by introducing a ViewModel layer ▪ Don’t tie directly to Domain models; create a POJO for the binding
25. V for View ▪ Views will keep an instance of the ViewModel and will register different listeners to know when the ViewModel has changed
26. … but what is really Data Binding?
27. “ Data Binding is the process that establishes a connection between the application UI and the Business logic. If the settings and notifications are correctly set, the data reflects changes when made. It can also mean then when the UI is changed, the underlying data will reflect that change.
28. “ Data Binding is the process that establishes a connection between the application UI and the Business logic. If the settings and notifications are correctly set, the data reflects changes when made. It can also mean then when the UI is changed, the underlying data will reflect that change.
29. MVVM with Data Binding - Layouts <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <variable name="contact" type="net.opgenorth.hayha.droid.views.settings.firearm.ContactViewModel" /> </data> <!-- layout is here, but omitted for clarity --> </layout>
30. MVVM with Data Binding - Layouts <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <variable name="contact" type="net.opgenorth.hayha.droid.views.settings.firearm.ContactViewModel" /> </data> <!-- layout is here, but omitted for clarity --> </layout>
31. MVVM with Data Binding - Layouts <EditText android:id="@+id/new_contact_name_text_view" android:text="@{contact.name}" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="firearm_name" android:hint="@string/firearm_name_hint" android:textSize="@dimen/default_font_size" />
32. MVVM with Data Binding - Layouts <EditText android:id="@+id/new_contact_name_text_view" android:text="@{contact.name}" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="firearm_name" android:hint="@string/firearm_name_hint" android:textSize="@dimen/default_font_size" />
33. MVVM with Data Binding - ViewModel public class ContactViewModel extends BaseObservable { private String mContactName; // Constructors and other things omitted for clarity. @Bindable public String getName() { return mContactName; } public void setName(String name) { mContactName = name; notifyPropertyChanged(BR.name); } }
34. BaseObservable ▪ Provides the infrastructure for setting up the data binding process ▪ BR class is generated: ◦ Each POJO field adorned with @Bindable will have a constant declared in BR corresponding to the name
35. MVVMwith DataBiding - Establish the binding public class AddNewContactActivity extends Activity{ private ContactViewModel mViewModel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mViewModel = createViewModel(); initializeViewModel(); } private void ContactViewModel createViewModel() { ... } private void initializeViewModel() { ActivityAddNewContactBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_add_new_contact); binding.setContact(mViewModel); } // Rest of the code omitted. }
36. MVVMwith DataBiding - Establish the binding public class AddNewContactActivity extends Activity{ private ContactViewModel mViewModel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mViewModel = createViewModel(); initializeViewModel(); } private void ContactViewModel createViewModel() { ... } private void initializeViewModel() { ActivityAddNewContactBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_add_new_contact); binding.setContact(mViewModel); } // Rest of the code omitted. }
37. What’s the current status of Data Binding?
39. Data Binding - Current Status https://developer.android.com/tools/data-binding/guide.html ▪ Lots of bugs ▪ Not even all the examples work ▪ It can cause errors even in snippets where you don’t use data binding
40. Don’t use data binding in production!
41. Example
42. Rock Hall Of Fame MVP RecyclerView with a list of rock bands implemented using MVP
43. Band details Mix of MVP with data binding Example of how data binding works and its current status Place your screenshot here
44. Links ▪ Github repo with the example ◦ https://github.com/jorgecoca/RockHallOfFameMVP ▪ Slides ◦ https://speakerdeck.com/jorgecoca/modern-ways-to- architecture-your-android-app-mvp-and-mvvm
45. Thank you!