Your First MVVM with RxJava in Android

Demonstrate how to use RxJava to implement MVVM pattern in Android

Transcript

1. 使⽤用 RxJava 實作
 MVVM 模式 Elvis Lin 
 2017-03-20 @Android Taipei
2. Agenda • MVC 與 MVP 回顧 • MVVM 簡介 • ⽤用 RxJava 實作 MVVM
3. MVC/MVP回顧
4. MVC Model - View - Controller
5. View Controller Model User Input Update Model Query Data Update UI Dispatch Event
6. View Controller Model User Input 1 … 1 Activity
7. View Controller Model User Input Update Model Query data Update UI Inform about input Notify view
8. View Controller Model 1 … 1 View Inferface
9. MVP Model - View - Presenter
10. View Presenter Update UI Inform User Action
11. View Presenter Model 1 … 1 IView IPresenter Contract
12. interface IView {
 void setCapital(String capital)
 }
13. interface IPresenter {
 void onLoad();
 }
14. MVVM簡介
15. MVVM Model - View - ViewModel
16. View ViewModel Model 1 … ＊ View ViewModel Model ＊ … ＊
17. • View 向 ViewModel 註冊 • ViewModel 不主動更更新 View • ViewModel 不知道 View 的存在 • 實作⽅方式： • Data-binding • RxJava
18. RxJava 簡介
19. • 使⽤用 Observer pattern • 提供便便利利的 Thread 控制 • Observer 建立的⽅方式 • Observer.create() • Observer.just() • ……
20. ⽤用 RxJava 實現 MVVM
21. View ViewModel Model RxJava
23. 建立⼀一個 ViewModel public class SearchViewModel { private BehaviorSubject<String> scoreValue; public SearchViewModel() { scoreValue = BehaviorSubject.create(); } public void searchScore(final String userName) { // do something } public Observable<String> getScoreValueObservable() { return scoreValue; } }
24. 在 View 中對 ViewModel 註冊 public class SearchScoreActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { searchViewModel = new SearchViewModel(); } @Override protected void onResume() { searchViewModel.getScoreValueObservable(). observeOn(AndroidSchedulers.mainThread()). subscribe(new Observer<String>() { @Override public void onNext(String value) { updateScoreView(value); } }); } }
25. DEMO https://github.com/elvismetaphor/SearchScore-RX- MVVM
26. 結論 • 關注點分離（Separation of Concerns ) • MVVM 讓 View 跟 ViewModel 單向/雙向綁定 • View 只負責資料的顯⽰示跟UI事件傳遞 • View 根據 ViewModel 的變化，更更新⾃自⼰己的畫⾯面 • ViewModel 不知道 View 的存在
27. Contact Info Elvis Lin • Github: 
 https://github.com/elvismetaphor • Blog: http://article.elvismetaphor.me • Slides: https://speakerdeck.com/ elvismetaphor
28. 參參考資料 • 投影片中的範例例
 https://github.com/elvismetaphor/ SearchScore-RX-MVVM • Google Architecture 範例例
 https://github.com/googlesamples/android- architecture • MVP/MVVM 範例例
 https://github.com/ivacf/archi
29. 補充資料 (1/2) • RxJava 2.0 介紹 @Kros
 https://www.slideshare.net/ssuser72c3b0/ rxjava-20 • MVP in Practice @洪彥斌
 https://www.slideshare.net/ssuser8674c1/ mvp-in-practice
30. 補充資料 (2/2) • Introduction to MV(Whatever) in Android
 https://speakerdeck.com/elvismetaphor/ introduction-to-mv-whatever-in-android • 使⽤用 Data binding 實作 MVVM 模式
 https://speakerdeck.com/elvismetaphor/ introduction-to-mv-whatever-in-android