Functional MVVM using RxJava and Data Binding

Talk at DroidCon India 2016:
https://droidconin.talkfunnel.com/2016/32-functional-mvvm-using-rxjava-and-android-data-bind

Video:
https://www.youtube.com/watch?v=JaB8SXCSbgg&t=1s

Transcript

1. Functional MVVM using RxJava and Data Binding Manas Chaudhari
2. User interfaces • Lot of changing states • Data from server • Change on user action
3. Login Example
4. Login Example Validations
5. Login Example Validations
6. Static World 
 String email = emailEditText.getText(); String phone = phoneEditText.getText();
 
 // Intermediate
 boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 // Outputs
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Real code isn’t so simple. Why?
7. Need Listeners String email = emailEditText.getText();
8. Need Listeners emailEditText.addTextChangedListener(new TextWatcher() {
 @Override
 public void beforeTextChanged(...) {}
 
 @Override
 public void onTextChanged(...) {}
 
 @Override
 public void afterTextChanged(Editable s) {
 checkEmail(s.toString());
 }
 }); void checkEmail(String email) {
 // Further calculations
 }
9. void checkEmail(String email) {
 boolean emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 }
10. void checkEmail(String email) {
 boolean emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 } phoneEditText.addTextChangedListener(...)
 
 void checkPhone(String phone) {
 boolean phoneValid = FormUtils.checkPhone(phone);
 String phoneError = phoneValid ? null : "Invalid phone";
 phoneEditText.setError(phoneError);
 }
11. 
 String email = emailEditText.getText(); String phone = phoneEditText.getText();
 
 // Intermediate
 boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 // Outputs
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;

12. private boolean emailValid;
 private boolean phoneValid;
 
 void checkEmail(String email) {
 emailValid = FormUtils.checkEmail(email);
 String emailError = emailValid ? null : "Invalid Email";
 emailEditText.setError(emailError);
 refreshLoginEnabled();
 }
 
 void checkPhone(CharSequence phone) {
 phoneValid = FormUtils.checkPhone(phone.toString());
 String phoneError = phoneValid ? null : "Invalid phone";
 phoneEditText.setError(phoneError);
 refreshLoginEnabled();
 }
 
 private void refreshLoginEnabled() {
 loginButton.setEnabled(phoneValid && emailValid);
 }
13. Problems • Mutation -> refresh chain • Boilerplate code for connecting data to view
14. public class LoginState {
 // Inputs
 public final ObservableField<String> email;
 public final ObservableField<String> phone;
 
 // Outputs
 public final ReadOnlyField<String> emailError;
 public final ReadOnlyField<String> phoneError;
 public final ReadOnlyField<Boolean> loginEnabled; public class LoginState {
 // Inputs
 public final ObservableField<String> email;
 public final ObservableField<String> phone;
 
 // Outputs
 public final ReadOnlyField<String> emailError;
 public final ReadOnlyField<String> phoneError;
 public final ReadOnlyField<Boolean> loginEnabled; Solution Preview
15. public class LoginState {
 // Inputs
 public final ObservableField<String> email;
 public final ObservableField<String> phone;
 
 // Outputs
 public final ReadOnlyField<String> emailError;
 public final ReadOnlyField<String> phoneError;
 public final ReadOnlyField<Boolean> loginEnabled; Solution Preview Input, Output Fields
16. LoginState() {
 
 Observable<String> emailObservable = toObservable(email);
 Observable<String> phoneObservable = toObservable(phone);
 
 Observable<Boolean> emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 } LoginState() {
 
 Observable<String> emailObservable = toObservable(email);
 Observable<String> phoneObservable = toObservable(phone);
 
 Observable<Boolean> emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 }
17. LoginState() {
 
 Observable<String> emailObservable = toObservable(email);
 Observable<String> phoneObservable = toObservable(phone);
 
 Observable<Boolean> emailValid, phoneValid; 
 emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 }
18. boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Static Code
19. boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 Static Code
20. boolean emailValid = FormUtils.checkEmail(email);
 boolean phoneValid = FormUtils.checkPhone(phone);
 
 String emailError = emailValid ? null : "Invalid Email";
 String phoneError = phoneValid ? null : "Invalid Phone";
 boolean loginEnabled = emailValid && phoneValid;
 inState() {
 Observable<String> emailObservable = toObservable(email);
 Observable<String> phoneObservable = toObservable(phone);
 Observable<Boolean> emailValid, phoneValid; emailValid = emailObservable.map(
 email -> FormUtils.checkEmail(email)
 );
 phoneValid = phoneObservable.map(
 phone -> FormUtils.checkPhone(phone)
 );
 
 emailError = toField(emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email";
 );
 phoneError = toField(phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
 loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
 Static Code
21. <layout xmlns:android="http://schemas.android.com/apk/res/android">
 
 <data>
 
 <variable
 name="state"
 type="com.manaschaudhari.functional_mvvm.ex1.LoginState" />
 </data>
 
 <LinearLayout ... <layout xmlns:android="http://schemas.android.com/apk/res/android">
 
 <data>
 
 <variable
 name="state"
 type="com.manaschaudhari.functional_mvvm.ex1.LoginState" />
 </data>
 
 <LinearLayout ...
22. <EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:error="@{state.phoneError}"
 android:text="@={state.phone}" />
 
 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:enabled="@{state.loginEnabled}"
 android:text="@string/login" /> <layout xmlns:android="http://schemas.android.com/apk/res/android">
 
 <data>
 
 <variable
 name="state"
 type="com.manaschaudhari.functional_mvvm.ex1.LoginState" />
 </data>
 
 <LinearLayout ...
23. public class LoginActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState); 
 ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login); 
 binding.setState(new LoginState());
 }
 
 }
24. public class LoginActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState); 
 ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login); 
 binding.setState(new LoginState());
 }
 
 } No “findViewById” No listeners
25. Mutation Imperative Code
26. Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 Imperative Code
27. Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 Imperative Code Reactive Code
28. Mutation a = 1 c = 10 * a —> 10 a = 3 print(c) —> 10 a = 1 c = 10 * a —> 10 a = 3 print(c) —> 30 Imperative Code Reactive Code
29. Reactive - How? • Java is not a reactive language • Reactive behavior using RxJava library
30. RxJava • Provides Observable class • Stream of values • Operators for manipulating streams
32. Map
33. Combine Latest
34. Login Example with RxJava // Inputs
 Observable<String> email;
 Observable<String> phone;
 // Outputs
 Observable<String> emailError;
 Observable<String> phoneError;
 Observable<Boolean> loginEnabled;
35. Observable<Boolean> emailValid = email.map(new Func1<String, Boolean>() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) Observable<Boolean> emailValid = email.map(new Func1<String, Boolean>() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 })
36. Observable<Boolean> emailValid = email.map(new Func1<String, Boolean>() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 })
37. Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable<Boolean> emailValid = email.map(new Func1<String, Boolean>() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 })
38. Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable<Boolean> emailValid = email.map(new Func1<String, Boolean>() {
 @Override
 public Boolean call(String email) {
 return FormUtils.checkEmail(email);
 }
 }) Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 );
39. // Transformations
 Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 );
40. // Transformations
 Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable<Boolean> phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 );
41. // Transformations
 Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable<Boolean> phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 ); emailError = emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email"
 ); 
 phoneError = phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 );
42. // Transformations
 Observable<Boolean> emailValid = email.map(
 email -> FormUtils.checkEmail(email);
 ); Observable<Boolean> phoneValid = phone.map(
 phone -> FormUtils.checkPhone(phone);
 ); emailError = emailValid.map(
 emailValid -> emailValid ? null : "Invalid Email"
 ); 
 phoneError = phoneValid.map(
 phoneValid -> phoneValid ? null : "Invalid Phone";
 ); loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 );
43. Binding to View // Inputs
 Observable<String> email; // <- emailEditText.text
 Observable<String> phone; // <- phoneEditText.text
 // Outputs
 Observable<String> emailError; // -> emailEditText.error
 Observable<String> phoneError; // —> phoneEditText.error
 Observable<Boolean> loginEnabled; // -> loginButton.enabled
44. View -> Observable // Inputs
 Observable<String> email = RxTextView.textChanges(emailEditText);

45. Observable -> View loginEnabled.subscribe(RxView.enabled(loginButton));
46. Observable -> View loginEnabled.subscribe(RxView.enabled(loginButton)); @Override
 protected void onDestroy() {
 subscription.unsubscribe();
 super.onDestroy();
 } RxJava requires cleanup New Boilerplate :/ Subscription subscription =
47. Data Binding <layout>
 
 <data>
 
 <variable
 name="state"
 type="com.manaschaudhari.functional_mvvm.LoginState" />
 </data>
 <Button
 android:enabled=“@{state.loginEnabled}” />
 </layout>
48. Binding Attributes <Button
 android:enabled=“@{state.loginEnabled}” /> public class LoginState {
 public ObservableField<Boolean> loginEnabled;
49. Binding Attributes <Button
 android:enabled=“@{state.loginEnabled}” /> public class LoginState {
 public ObservableField<Boolean> loginEnabled; loginEnabled.set(true)
50. Binding Attributes <EditText
 android:text=“@={state.email}” /> public class LoginState {
 public ObservableField<String> email; } User input
51. Code Generation // AutoGenerated for activity_login.xml
 public class ActivityLoginBinding {
 
 public void setState(LoginState state);
 } <variable
 name="state"
 type="com.manaschaudhari.functional_mvvm.LoginState" />

52. View Setup ActivityLoginBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_login);
 
 binding.setState(new LoginState());

53. databinding.ObservableField View Attribute Data Binding
54. databinding.ObservableField View Attribute Data Binding Autogenerated code
55. rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding
56. rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding Manual code for each attribute
 + Cleanup Boilerplate
57. rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code RxBinding Manual code for each attribute
 + Cleanup Boilerplate Converter
58. rx.Observable databinding.ObservableField View Attribute Data Binding Autogenerated code Converter
59. Converter public static <T> Observable<T> toObservable(ObservableField<T> field) { }
 public static <T> ObservableField<T> toField(Observable<T> observable) { }
60. Observable -> View Observable<Boolean> loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 );
61. Observable -> View <Button
 android:enabled=“@{state.loginEnabled}” /> Observable<Boolean> loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 );
62. ObservableField<Boolean> loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 )); Observable -> View <Button
 android:enabled=“@{state.loginEnabled}” /> Observable<Boolean> loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 );
63. ObservableField<Boolean> loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 )); Observable -> View <Button
 android:enabled=“@{state.loginEnabled}” /> Observable<Boolean> loginEnabled = Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ); ObservableField<Boolean> loginEnabled = toField(Observable.combineLatest(emailValid, phoneValid,
 (emailValid, phoneValid) -> emailValid && phoneValid
 ));
64. <EditText
 android:text=“@={state.email}” /> View -> Observable public class LoginState { public ObservableField<String> email = new ObservableField<>("");
65. <EditText
 android:text=“@={state.email}” /> View -> Observable public class LoginState { public ObservableField<String> email = new ObservableField<>(""); Observable<String> emailObservable = toObservable(email);
66. <EditText
 android:text=“@={state.email}” /> View -> Observable public class LoginState { public ObservableField<String> email = new ObservableField<>(""); Observable<String> emailObservable = toObservable(email); emailObservable.map(...)
67. Summary • Removed findViewById & listeners boilerplate using Data Binding • databinding.ObservableField <—> rx.Observable • No Subscriptions. Memory leak free code by default
68. Pattern • State class for presentation logic • View setup in XML using State instance • Activity only initializes
69. Pattern • State class for presentation logic • View setup in XML using State instance • Activity only initializes This is MVVM
70. MVVM Model ViewModel View
71. MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app
72. MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled
73. MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled • Presentation Logic • eg: Button should be disabled when email is invalid
74. MVVM Model ViewModel View • Business Logic • Logic that will remain same for console app • State of the view • eg: Boolean field for whether button is enabled • Presentation Logic • eg: Button should be disabled when email is invalid • Observes for changes in VM and updates itself • Push values in VM when user inputs
75. Dependencies Model ViewModel View
76. Dependencies • Model is unaware about ViewModel • ViewModel is unaware about View • Multiple views can share a same ViewModel Model ViewModel View
77. LoginState -> ViewModel
78. Composition Item Listing Item Details Item Details .
 .
 . Item Checkout Item Details Item Customization
79. Composition Item Listing Item Details Item Details .
 .
 . Item Checkout Item Details Item Customization Reuse Plugin ViewModels to build the UI
80. Item Checkout Item Details Item Customisation
81. Item Checkout Item Details Item Customisation class ItemCheckoutViewModel {
 ItemViewModel detailVM;
 ItemCustomisationViewModel customisationVM;
 
 // Initialise in constructor
 
 }
82. <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation=“vertical” >
 
 <include
 layout=“@layout/row_item_details"
 bind:vm="@{vm.detailVM}"/>
 
 <include
 layout="@layout/row_item_customisation"
 bind:vm="@{vm.customisationVM}"/>
 
 </LinearLayout> Item Checkout Item Details Item Customisation <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation=“vertical” >
 
 <include
 layout=“@layout/row_item_details"
 bind:vm="@{vm.detailVM}"/>
 
 <include
 layout="@layout/row_item_customisation"
 bind:vm="@{vm.customisationVM}"/>
 
 </LinearLayout>
83. <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation=“vertical” >
 
 <include
 layout=“@layout/row_item_details"
 bind:vm="@{vm.detailVM}"/>
 
 <include
 layout="@layout/row_item_customisation"
 bind:vm="@{vm.customisationVM}"/>
 
 </LinearLayout> Item Checkout Item Details Item Customisation
84. Beauty of MVVM • Consistent View Setup from: • layout_id • ViewModel object compatible with that layout
85. Dynamic Composition • List<ViewModel> • Child layout Item Listing Item Details Item Details .
 .

86. Dynamic Composition • List<ViewModel> • Child layout Item Listing Item Details Item Details .
 .
 <android.support.v7.widget.RecyclerView
 bind:items="@{vm.itemViewModels}"
 bind:item_layout=“@{@layout/row_item}” />
87. Custom Attributes <android.support.v7.widget.RecyclerView
 bind:items="@{viewModel.itemViewModels}"
 bind:item_layout=“@{@layout/row_item}” />
88. Custom Attributes <android.support.v7.widget.RecyclerView
 bind:items="@{viewModel.itemViewModels}"
 bind:item_layout=“@{@layout/row_item}” /> @BindingAdapter(value = {"items", "item_layout"})
 public static void bindAdapter(RecyclerView recyclerView,
 List<?> states,
 @LayoutRes int layoutId) {
 ...
 }

89. Consistent Api <android.support.v7.widget.RecyclerView
 bind:items="@{viewModel.itemViewModels}"
 bind:item_layout=“@{@layout/row_item}” /> <android.support.v4.view.ViewPager
 bind:items="@{viewModel.itemViewModels}"
 bind:item_layout=“@{@layout/row_item}” />
90. Dependencies • ViewModel cannot have references to android.Context • How to invoke actions like Navigation?
91. Dependencies • ViewModel cannot have references to android.Context • How to invoke actions like Navigation? Abstract actions into an interface
92. public interface Navigator {
 void openItemDetailsPage(Item item);
 }
93. public class ItemViewModel {
 public final Action0 itemClicked;
 
 public ItemViewModel(final Item item, final Navigator navigator) {
 itemClicked = () -> navigator.openItemDetailsPage(item);
 }
 } public interface Navigator {
 void openItemDetailsPage(Item item);
 }
94. Testability • All UI interactions can be triggered on ViewModels • All UI states can be asserted from ViewModel • Unit Tests instead of Instrumentation -> Faster
95. Testability 
 @Test
 public void detailsPage_isOpened_onClick() throws Exception {
 Item item = new Item("Item 1");
 Navigator mockNavigator = mock(Navigator.class);
 ItemViewModel viewModel = new ItemViewModel(item, mockNavigator);
 
 viewModel.itemClicked.call();
 
 verify(mockNavigator).openDetailsPage(item);
 }

96. Conclusions • RxJava and Data Binding together • UI = express output as a function of input • MVVM • Easy composition of views
97. manas-chaudhari/android-mvvm @chaudharimanas