Flux de Relax :)

Transcript

1. Flux de Relax :) ANDROID ALLSTARS #2 @dots. Masaki Ogata

2. About me Masaki Ogata ogaclejapan CyberAgent, Inc. / AbemaTV, Inc.

   @ogaclejapan

3. Flux de Relax :)

4. What is Flux?

5. Facebook Flux Architecture IUUQTGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM “Data in a Flux application flows

   in a single direction”

6. Facebook Flux Architecture IUUQTHJUIVCDPNGBDFCPPLqVY

7. Facebook Flux Architecture IUUQTHJUIVCDPNGBDFCPPLqVY Observerύλʔϯ

8. Why Flux?

9. Why Flux? ΞϓϦέʔγϣϯͷ։ൃͰ Viewͷঢ়ଶ؅ཧ͕Ұ൪೉͍͠ :(

10. Why Flux? AbemaTVͰඞཁʹͳΔViewͷঢ়ଶ؅ཧ: Cast ՝ۚ CM ࢹௌ༧໿ ΦϯσϚϯυ ը࣭ ϑΟϥʔ

    etc…

11. Sample code https://github.com/ogaclejapan/ FluxArchitectureSample *OQVU'SBHNFOU 3FTVMU'SBHNFOU

12. Flux Architecture Sample

13. Flux: Dispatcher

14. Flux: Dispatcher N:1 1:N

15. Flux: Dispatcher /* Store */ Dispatcher.register(function(payload) { switch(payload.actionType) { case

    'foo': ... = payload.data // Do something } } /* Action */ Dispatcher.dispatch({ actionType: 'foo', payload: 'value' }); ຊՈFluxͷ࣮૷Λࢀߟʹͯ͠ΈΔ

16. Flux: Dispatcher JavaͰ࣮૷Λॻ͖௚ͯ͠ΈΔͱ… public interface Action { String getType(); }

    public class FooAction implements Action {...} /* Action */ Dispatcher.dispatch(new FooAction(data)); /* Store */ Dispatcher.register(new Callback() { public void on(Action action) { switch (action.getType()) { case "foo": ... = ((FooAction) action).data; break; } } }

17. Flux: Dispatcher JavaͰ࣮૷Λॻ͖௚ͯ͠ΈΔͱ… public interface Action { String getType(); }

    public class FooAction implements Action {...} /* Action */ Dispatcher.dispatch(new FooAction(data)); /* Store */ Dispatcher.register(new Callback() { public void on(Action action) { switch (action.getType()) { case "foo": ... = ((FooAction) action).data; break; } } } Javaͩͱܕม׵͕ඞཁ :(

18. Flux: Dispatcher IUUQTHJUIVCDPNHSFFOSPCPU&WFOU#VT // Define events: public class MessageEvent {

    /* Additional fields if needed */ } // Prepare subscribers: Register your subscriber eventBus.register(this); // Declare your subscribing method: @Subscribe public void onEvent(AnyEventType event) {/* Do something */}; // Post events: eventBus.post(event); …EventBusͰΑ͘Ͷ͐ʁ

19. Flux: Dispatcher public class Dispatcher { private final EventBus bus;

    public Dispatcher() { bus = EventBus.builder() ... .build(); } public void dispatch(Object payload) { bus.post(payload); } public void register(Object observer) { bus.register(observer); } public void unregister(Object observer) { bus.unregister(observer); } }

20. Flux: Action

21. Flux: Action Actionͷσʔλϑϩʔ ٩(•౪• ٩)

22. Flux: Action View͔ΒͷೖྗʹΑΓσʔλ͕ྲྀΕͯ͘Δ

23. Flux: Action σʔλιʔεʹඞཁͱͳΔσʔλΛऔΓʹߦ͘

24. Flux: Action σʔλ͕ू·ͬͨΒDispatcher΁σʔλΛྲྀ͢

25. Flux: Action Web, DB, DevicesΛ֎෦αʔϏεͱͯ͠ଊ͑Δ

26. Flux: Action @Inject GitHubApi gitHubApi; private final Dispatcher dispatcher; @Inject

    public UserSearchAction(Dispatcher dispatcher) { this.dispatcher = dispatcher; } public void findFollower(String userId) { ... } public void findFollower(String userId, int nextPage) { gitHubApi.followers(userId, nextPage) .doOnSubscribe(() -> dispatchState(LoadingState.LOADING)) .subscribe(users -> { dispatcher.dispatch(new SearchResultListChangedEvent( userId, users, users.nextPage())); dispatchState(users.hasMore() ? LoadingState.LOADABLE : LoadingState.FINISHED); }, ...); }

27. Flux: Action Tips: ֎෦I/Fͷ໭Γ஋ΛRxͰ౷Ұ͓ͯ͘͠ @Inject GitHubApi gitHubApi; public void findFollower(String

    userId, int nextPage) { Observable.zip( gitHubApi.followers(userId, nextPage), gitHubApi.user(userId), this::doSomething) .subscribe(...) }

28. Flux: Action Tips: Ωϟϯηϧॲཧ͕ඞཁͳͱ͖ // e.g. ॲཧΛݺͼग़͠ଆͰΩϟϯηϧ͢Δ public Subscription findFollower(String

    userId, int nextPage) { return gitHubApi.followers(userId, nextPage) .subscribe(...); } // e.g. ॲཧ͕࣮ߦதͳΒΩϟϯηϧ͢Δ private Subscription subs = Subscriptions.empty(); public void findFollower(String userId, int nextPage) { if (!subs.isUnsubscribed()) subs.unsubscribe(); subs = gitHubApi.followers(userId, nextPage) .subscribe(...); }

29. Flux: Store

30. Flux: Store Storeͷσʔλϑϩʔ ₍₍ (ง ˙ω˙)ว ⁾⁾

31. Flux: Store σʔλΛड͚औΔͨΊʹCallbackΛొ࿥͢Δ

32. Flux: Store Action͔ΒσʔλΛྲྀ͢ͱCallback΁ྲྀΕͯ͘Δ

33. Flux: Store σʔλΛड͚औͬͨΒStore಺σʔλΛߋ৽͢Δ

34. Flux: Store σʔλΛߋ৽ͨ͠ΒView΁มߋΛ௨஌͢Δ

35. Flux: Store @ActivityScope public class UserSearchStore { @Inject public UserSearchStore(Dispatcher

    dispatcher, ActivityLifecycleHook hook) { hook.addOnCreate(() -> dispatcher.register(this)); hook.addOnDestroy(() -> dispatcher.unregister(this)); } Dispatcher΁CallbackΛొ࿥͢Δ

36. Flux: Store @Singleton @ActivityScope public class UserSearchStore { @Inject public

    UserSearchStore(Dispatcher dispatcher, ActivityLifecycleHook hook) { dispatcher.register(this); hook.addOnCreate(() -> dispatcher.register(this)); hook.addOnDestroy(() -> dispatcher.unregister(this)); } Dispatcher΁CallbackΛొ࿥͢Δ

37. Flux: Store CallbackॲཧͰࣗ਎ͷঢ়ଶΛߋ৽͢Δ private final ObservableField<LoadingState> state = new ObservableField<>(LoadingState.LOADABLE);

    @Subscribe(threadMode = ThreadMode.MAIN) public void on(SearchLoadingStateChangedEvent event) { state.set(event.state); }

38. Flux: Store ঢ়ଶมߋΛ௨஌͢ΔͨΊͷϝιουΛެ։͢Δ private final ObservableField<LoadingState> state = new ObservableField<>(LoadingState.LOADABLE);

    public Disposer addOnLoadingStateChanged( OnFieldChangedCallback<LoadingState> cb) { state.addOnPropertyChangedCallback(cb); return Disposers.from(() -> removeOnLoadingStateChanged(cb)); } public void removeOnLoadingStateChanged( OnFieldChangedCallback<LoadingState> cb) { state.removeOnPropertyChangedCallback(cb); }

39. Flux: Store Tips: ObservableXXͷ୅ΘΓʹRxΛ࢖͏ private final BehaviorSubject<LoadingState> state = BehaviorSubject.create(LoadingState.LOADABLE);

    public Observable<LoadingState> state() { return state.asObservable(); } @Subscribe(threadMode = ThreadMode.MAIN) public void on(SearchLoadingStateChangedEvent event) { state.onNext(event.state); }

40. Flux: View

41. Flux: View Viewͷσʔλϑϩʔ ٩(๑´3ʆ๑)۶

42. Flux: View σʔλΛड͚औΔͨΊStore΁CallbackΛొ࿥͢Δ

43. Flux: View σʔλ͕ߋ৽͞ΕͨΒCallback͕ݺ͹ΕΔ

44. Flux: View σʔλΛड͚औͬͨΒը໘Λߋ৽͢Δ

45. Flux: View ৽ͨͳೖྗ͕ൃੜͨ͠ΒAction΁σʔλΛྲྀ͢

46. Flux: View Storeͷঢ়ଶʹԠͯ͡ViewΛߋ৽͢Δ @Inject UserSearchStore userSearchStore; private final OnListChangedCallback<User> resultListChanged

    = new OnListChangedCallback<User>() { @Override public void onChanged(ObservableList<User> sender) { binding.setItemCount(sender.size()); } }; public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { ... userSearchStore.addOnListChanged(resultListChanged).addTo(this); }

47. Flux: View Storeͷঢ়ଶʹԠͯ͡AdapterΛߋ৽͢Δ @Inject public UserSearchListAdapter(UserSearchStore store, ActivityLifecycleHook hook) {

    this.store = store; OnListChangedCallback<User> cb = OnListChangedCallback.delegateTo(this); hook.addOnCreate(() -> store.addOnListChanged(cb)); hook.addOnDestroy(() -> store.removeOnListChanged(cb)); } @Override public void onBindViewHolder(ViewHolder holder, int position) { User user = store.getItemAt(position); ... } @Override public int getItemCount() { return store.getItemCount(); }

48. Flux: View ActionʹॲཧΛҕৡ͢Δ @Inject UserSearchAction userSearchAction; // SearchInputFragment @Override public

    void onViewCreated(View view, …) { binding.searchButton.setOnClickListener(v -> { hideKeyboard(binding.searchInputText.getWindowToken()); Optional.ofNullable(binding.searchInputText.getText()) .map(Editable::toString) .filter(it -> !it.isEmpty()) .ifPresent(userSearchAction::findFollower); }); // SearchResultFragment @Override public void onLoadMore() { userSearchAction.findFollower( userSearchStore.getUserId(), userSearchStore.getNextPage()); }

49. Flux: View Tips: ObservableXXͷ୅ΘΓʹRxΛ࢖͏ import com.trello.rxlifecycle.components.support.RxFragment; public class SearchResultFragment extends

    RxFragment { @Inject UserSearchStore userSearchStore; @Override public void onViewCreated(View view, Bundle savedInstanceState) { ... userSearchStore.state() .map(it -> it == LoadingState.LOADING) .compose(bindToLifecycle()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(binding::setIsLoading); }

50. Conclusion Pros :) • Viewؒͷґଘ͕ܹݮͯ͠ɺѹ౗తײँʂ • ໾ׂ͕໌֬ͳͷͰ։ൃऀͷ࣮૷͕౷Ұ͞Ε΍͍͢ • ୯ํ޲ͳͷͰίʔυ͕௥͍΍͍͢

51. Conclusion Cons :( • γϯϓϧͳػೳͩͱएׯ৑௕ʹײ͡Δͱ͖΋... • ղ์ϛεΔͱଈϝϞϦϦʔΫʘ(^o^)ʗ • جຊτϥΠˍΤϥʔ (ʀ´∀ʆ)

52. Let's Flux de Relax :)