Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Ways to Architecture your Android app: MVP and MVVM

C887ad592770a197f114d0a1d3e3a5a7?s=47 Jorge Coca
August 19, 2015

Modern Ways to Architecture your Android app: MVP and MVVM

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

C887ad592770a197f114d0a1d3e3a5a7?s=128

Jorge Coca

August 19, 2015
Tweet

Transcript

  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
  11. None
  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
  15. None
  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?

  38. None
  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!