Your First MVVM with RxJava in Android

Slide 1

Slide 1 text

使⽤用 RxJava 實作  MVVM 模式 Elvis Lin   2017-03-20 @Android Taipei

Slide 2

Slide 2 text

Agenda • MVC 與 MVP 回顧 • MVVM 簡介 • ⽤用 RxJava 實作 MVVM

Slide 3

Slide 3 text

MVC/MVP回顧

Slide 4

Slide 4 text

MVC Model - View - Controller

Slide 5

Slide 5 text

View Controller Model User Input Update Model Query Data Update UI Dispatch Event

Slide 6

Slide 6 text

View Controller Model User Input 1 … 1 Activity

Slide 7

Slide 7 text

View Controller Model User Input Update Model Query data Update UI Inform about input Notify view

Slide 8

Slide 8 text

View Controller Model 1 … 1 View Inferface

Slide 9

Slide 9 text

MVP Model - View - Presenter

Slide 10

Slide 10 text

View Presenter Update UI Inform User Action

Slide 11

Slide 11 text

View Presenter Model 1 … 1 IView IPresenter Contract

Slide 12

Slide 12 text

interface IView {  void setCapital(String capital)  }

Slide 13

Slide 13 text

interface IPresenter {  void onLoad();  }

Slide 14

Slide 14 text

MVVM簡介

Slide 15

Slide 15 text

MVVM Model - View - ViewModel

Slide 16

Slide 16 text

View ViewModel Model 1 … ＊ View ViewModel Model ＊ … ＊

Slide 17

Slide 17 text

• View 向 ViewModel 註冊 • ViewModel 不主動更更新 View • ViewModel 不知道 View 的存在 • 實作⽅方式： • Data-binding • RxJava

Slide 18

Slide 18 text

RxJava 簡介

Slide 19

Slide 19 text

• 使⽤用 Observer pattern • 提供便便利利的 Thread 控制 • Observer 建立的⽅方式 • Observer.create() • Observer.just() • ……

Slide 20

Slide 20 text

⽤用 RxJava 實現 MVVM

Slide 21

Slide 21 text

View ViewModel Model RxJava

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

建立⼀一個 ViewModel public class SearchViewModel { private BehaviorSubject scoreValue; public SearchViewModel() { scoreValue = BehaviorSubject.create(); } public void searchScore(final String userName) { // do something } public Observable getScoreValueObservable() { return scoreValue; } }

Slide 24

Slide 24 text

在 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() { @Override public void onNext(String value) { updateScoreView(value); } }); } }

Slide 25

Slide 25 text

DEMO https://github.com/elvismetaphor/SearchScore-RX- MVVM

Slide 26

Slide 26 text

結論 • 關注點分離（Separation of Concerns ) • MVVM 讓 View 跟 ViewModel 單向/雙向綁定 • View 只負責資料的顯⽰示跟UI事件傳遞 • View 根據 ViewModel 的變化，更更新⾃自⼰己的畫⾯面 • ViewModel 不知道 View 的存在

Slide 27

Slide 27 text

Contact Info Elvis Lin • Github:   https://github.com/elvismetaphor • Blog: http://article.elvismetaphor.me • Slides: https://speakerdeck.com/ elvismetaphor

Slide 28

Slide 28 text

參參考資料 • 投影片中的範例例  https://github.com/elvismetaphor/ SearchScore-RX-MVVM • Google Architecture 範例例  https://github.com/googlesamples/android- architecture • MVP/MVVM 範例例  https://github.com/ivacf/archi

Slide 29

Slide 29 text

補充資料 (1/2) • RxJava 2.0 介紹 @Kros  https://www.slideshare.net/ssuser72c3b0/ rxjava-20 • MVP in Practice @洪彥斌  https://www.slideshare.net/ssuser8674c1/ mvp-in-practice

Slide 30

Slide 30 text

補充資料 (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

Slide 31

Slide 31 text

No content