MVVM with RxJava Build Music App

www.softvision.com
MVVM with RxJava

Agenda
▪ MVP & MVVM
▪ Constructing a simple
Music App
▪ Intro Journey into RxJava

MVP
Presenter ModelView
User events
*Lifecycle Events
View updates Notifications
Updates/Requests

MVP
Presenter
<<interface>>
View
<<interface>>
MyPresenter MyModelMyView
User events
*Lifecycle Events
View updates Notifications
Updates/Requests
Model
<<interface>>

MVVM
ViewModel ModelView
Stream of data Notifications
Updates/Requests
Data bindings
Commands
Model
<<interface>>

Data LayerBusiness Logic /
Domain Layer
Presentation Layer
Layered Architecture
Presenter /
ViewModel
View
Model
Use Case
Repository
DB
Rest API
Shared
Prefs

Data LayerBusiness Logic /
Domain Layer
Presentation Layer
Layered Architecture
Presenter /
ViewModel
View
Model
Use Case
Repository
DB
Rest API
Shared
Prefs
Device Specific
(Location,
Notification)

What we want to do
Search on letter entered Loading Show results

What we want to do
Play Track Change icon when new track is playing

What we use
MVVM Architectural Pattern
RxJava
Retrofit
Realm

Search Screen
ViewModelView
Stream of data
Data bindings
Commands

Search Screen
SearchViewModelSearchActivity
ViewModelView
Stream of data
Data bindings
Commands

Search Screen
searchChangedAction
ViewModelView
Stream of data
Data bindings
Commands

RxJava - building blocks
public interface Observer<T> {
void onCompleted();
void onError(Throwable e);
void onNext(T t);
}

void onCompleted();
void onNext(T t);
}
public interface Subscription {
void unsubscribe();
boolean isUnsubscribed();
}

void onCompleted();
void onNext(T t);
}
public abstract class Subscriber<T> implements Observer<T>, Subscription {
…
}
void unsubscribe();
}

void onCompleted();
void onNext(T t);
}
public abstract class Subscriber<T> implements Observer<T>, Subscription {
…
}
public class Observable<T> {
....
public final Subscription subscribe() {
Action1<T> onNext = Actions.empty();
Action1<Throwable> onError = InternalObservableUtils.ERROR_NOT_IMPLEMENTED;
Action0 onCompleted = Actions.empty();
return subscribe(new ActionSubscriber<T>(onNext, onError, onCompleted));
}
}
void unsubscribe();
}

RxJava - Observable & Subscriber
Observable<String> editTextObservable =
Observable.create(new Observable.OnSubscribe<String>() {
@Override
public void call(Subscriber<? super String> subscriber) {
subscriber.onNext("Entered text");
subscriber.onCompleted();
}
});

@Override
}
});
private Subscriber<String> searchTriggered =
new Subscriber<String>() {
@Override
public void onCompleted() {
}
@Override
public void onError(Throwable e) {
}
@Override
public void onNext(String s) {
}
};

@Override
}
});
private Subscriber<String> searchTriggered = new
Subscriber<String>() {
@Override
public void onCompleted() {
}
@Override
public void onError(Throwable e) {
}
@Override
public void onNext(String s) {
}
};
editTextObservable.subscribe(searchTriggered);

RxJava - Action
public interface Action1<T> extends Action {
void call(T t);
}
private Action1<String> searchTriggered = new Action1<String>() {
@Override
public void call(String searchedText) {
searchTracks(searchedText)
}
};

Transform TextWatcher into an Observable
public static Observable<String> editTextObservable(EditText editText) {
return Observable. create(new Observable.OnSubscribe<String>() {
@Override
TextWatcher textWatcher = new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
if (subscriber .isUnsubscribed()) {
editText .removeTextChangedListener( this);
}
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
subscriber .onNext(s.toString());
}
@Override
public void afterTextChanged(Editable s) {
}
}
};
editText .addTextChangedListener(textWatcher);
}
});
}

SearchActivity (View)
private CompositeSubscription subscriptions;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
subscriptions = new CompositeSubscription();
}
@Override
protected void onDestroy() {
super.onDestroy();
subscriptions.unsubscribe();
}

private SearchViewModel viewModel;
@Override
viewModel = new SearchViewModel();
}
@Override
super.onDestroy();
}

private TracksViewModel viewModel;
@Override
viewModel = new TracksViewModel();
}
subscriptions.addAll(
CustomViewBindings.editTextObservable(searchEditText)
.subscribe(viewModel.searchChangedAction())
);
@Override
super.onDestroy();
}

SearchViewModel (ViewModel)
private Action1<String> searchTriggered = new Action1<String>() {
@Override
public void call(String searchedText) {
searchTracks(searchedText)
.debounce(50, TimeUnit.MILLISECONDS)
.subscribe();
}
};
public Action1<String> searchChangedAction() {
return searchTriggered;
}

Debounce

Timeline
SearchActivity SearchViewModel TracksRepoUser
Open app
Subscribe for
TextWatcher events

Search Screen
searchChangedAction
isLoadingObservable
ViewModelView
Stream of data
Data bindings
Commands

private BehaviorSubject<Boolean> isLoadingTracks = BehaviorSubject.create(false);
public Observable<Boolean> isLoadingObservable() {
return isLoadingTracks.asObservable();
}

CustomViewBindings.editTextObservable(searchEditText)
.subscribe(viewModel.searchChangedAction()),
viewModel.isLoadingObservable()
.observeOn(AndroidSchedulers. mainThread())
.subscribe( new Action1<Boolean>() {
@Override
public void call(Boolean show) {
showLoading(show);
}
})
);

RxJava - Subject
A Subject is a bridge or proxy that acts both as an Observer and as an Observable.
public abstract class Subject<T, R> extends Observable<R> implements Observer<T>
Because it is an observer, it can subscribe to one or more Observables, and because it is an
Observable, it can pass through the items it observes by re-emitting them, and it can also emit
new items.
Types:
AsyncSubject
BehaviorSubject
PublishSubject
ReplaySubject

RxJava - PublishSubject

RxJava - BehaviorSubject

Timeline
Subscribe for loading updates
Open app
Subscribe for
TextWatcher events
isLoadingObservable emits “false”

Search Screen
searchChangedAction
isLoadingObservable
tracksObservable
ViewModelView
Stream of data
Data bindings
Commands

private BehaviorSubject<List<TrackViewModel>> searchedTracks =
BehaviorSubject.create(new ArrayList<TrackViewModel>());
public Observable<List<TrackViewModel>> tracksObservable() {
return searchedTracks.asObservable();
}

CustomViewBindings.editTextObservable(searchEditText).subscribe(viewModel.searchChangedAction()),
viewModel.isLoadingObservable()
.observeOn(AndroidSchedulers.mainThread())
.subscribe(show -> showLoading(show)),
viewModel.tracksObservable()
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Action1<List<TrackViewModel>>() {
@Override
public void call(List<TrackViewModel> newTracks) {
updateAdapter(newTracks);
}
})
);

Timeline
Open app
Subscribe for
TextWatcher events
Subscribe for track list updates
searchedTracksObservable emits
“empty array”

private Observable<List<TrackViewModel>> searchTracks(String text) {
isLoadingTracks.onNext(true);
return TracksRepo.getInstance().searchTracks(text, searchedTracks.getValue().size())
.flatMap(new Func1<List<Track>, Observable<Track>>() {
@Override
public Observable<Track> call(List<Track> tracks) {
return Observable.from(tracks);
}
})
.map(new Func1<Track, TrackViewModel>() {
@Override
public TrackViewModel call(Track track) {
return getNewTrackViewModel(track);
}
})
.toList()
.doOnNext(tracks1 -> {
searchedTracks.onNext(tracks1);
}).onErrorResumeNext(throwable -> {
return Observable.empty();
}).doOnTerminate(() -> isLoadingTracks.onNext(false));
}

RxJava - Map

RxJava - Map Example
.map(new Func1<Track, TrackViewModel>() {
@Override
public TrackViewModel call(Track track) {
return getNewTrackViewModel(track);
}
})

RxJava - FlatMap

RxJava - FlatMap Example
.flatMap(new Func1<List<Track>, Observable<Track>>() {
@Override
public Observable<Track> call(List<Track> tracks) {
return Observable.from(tracks);
}
})

Timeline
Open app
Press “r”
Subscribe for
TextWatcher events
Subscribe for track list updates
Subscribe for searchTracks
Search tracks
Notify of Tracks Result
isLoadingObservable emits “true”
“empty array”
“List<TracksViewModel>”

List Item
TrackViewModelTrackView
isPlayingObservable
onPlayClicked
ViewModelView
Stream of data
Data bindings
Commands

TrackViewModel
private BehaviorSubject<Boolean> isPlaying = BehaviorSubject.create(false);
public Observable<Boolean> isPlaying() {
return isPlaying.asObservable();
}

TrackView
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (this.viewModel != null) {
subscription = this.viewModel.isPlaying().subscribe(playing -> setPlayIcon(playing));
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (subscription != null) {
subscription.unsubscribe();
}
}

TrackView
@Override
}
}
public void bindViewModel(TrackViewModel viewModel) {
if (this.viewModel != null && subscription != null) {
}
this.viewModel = viewModel;
}
@Override
}
}

TrackViewModel
private BehaviorSubject<Boolean> isPlaying = BehaviorSubject.create(false);
private Action0 onPlayClicked;
public Observable<Boolean> isPlaying() {
return isPlaying.asObservable();
}
public void changePlayState() {
isPlaying.onNext(!isPlaying.getValue());
}
public void onPlayClicked() {
onPlayClicked.call();
}

TrackView
@Override
}
}
public void bindViewModel(TrackViewModel viewModel) {
if (this.viewModel != null && subscription != null) {
}
this.viewModel = viewModel;
trackImage .setOnClickListener(v -> viewModel.onPlayClicked());
}
@Override
}
}

TracksAdapter
private List<TrackViewModel> trackViewModels = new ArrayList<>();
@Override
public void onBindViewHolder(TracksViewHolder holder, int position) {
holder.bind(trackViewModels.get(position));
}
class TracksViewHolder extends RecyclerView.ViewHolder {
TrackView trackView;
private TracksViewHolder(View view) {
super(view);
trackView = (TrackView) view;
}
public void bind(TrackViewModel viewModel) {
trackView.bindViewModel(viewModel);
}
}

Timeline
TrackView TrackViewModelTracksAdapter
Subscribe for play state updates
isPlayingObservable emits “true or false”
isPlayingObservable emits “false or true”
TracksViewHolder
View Inflated
bindViewModel
attachedToWindow
user
play clicked
Unsubscribe from previous viewmodel
SearchViewModel
onPlayClicked action
changePlayState
dettachedFromWindow
user
Scroll item out of screen
Unsubscribe from viewmodel

What to explore next?
▪ Talk by Jacke Warthon ->
http://jakewharton.com/demystifying-rxjava-subscribers/
▪ RxBindings -> https://github.com/JakeWharton/RxBinding
▪ Android Data Binding Library ->
https://developer.android.com/topic/libraries/data-binding/index.ht
ml
▪ Debugging Rx -> Frodo -> https://github.com/android10/frodo
▪ Clean Architecture
▪ Books: Clean Code & Clean Coder - Robert C. Martin aka “Uncle Bob”
▪ Nice talk Simple made Esay:
https://www.infoq.com/presentations/Simple-Made-Easy

www.softvision.com
Questions?
Thank you!

MVVM with RxJava Build Music App

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

MVVM with RxJava Build Music App