Slides from DevFest Hamburg 2019 talk

1. RIBs
Fragments which work
Dmitry Zaytsev, Android Engineer @ Uber
1

2. Why Fragments?
2

3. 3

4. MainActivity
4

6. ● Encapsulation
● Lifecycle
● Navigation
Why Fragments

7. Fragments are great!
7

8. Why not Fragments?
8

9. ● Encapsulation
● Lifecycle
● Navigation
● Scalability
Why not Fragments

10. 10

11. Listeners
No compile-time safety
A dynamic type check needs to be
performed at runtime which could (and will)
lead to crashes.
override fun onAttach(context: Context) {
super.onAttach(context)
if (context is Listener) {
listener = context
} else if (parentFragment is Listener) {
listener = parentFragment as Listener
} else {
throw RuntimeException()
}
}

12. Back Stack
12
FragmentA FragmentB FragmentC

13. Back Stack
Simple yet hard to use
Back stack works well when you don’t need
to handle back navigation yourself or use
children fragments. However, as soon as you
need to do any customization it quickly falls
apart.
// Attach Root fragment
supportFragmentManager.beginTransaction()
.apply {
add(R.id.fragmentContainer, RootFragment.newInstance(), "Root")
addToBackStack(null)
}
.commit()
// Attach Child fragment
rootFragment.childFragmentManager.beginTransaction()
.apply {
add(R.id.rootContainer, ChildFragment.newInstance(), null)
addToBackStack(null)
}
.commit()
// Press back

14. MainActivity
MainFragment
14

15. ● Too many lifecycle states
● No compile-time safety when calling listeners
● Nested fragments is an afterthought
● Passing arguments
● Testability
● Non-restrictive API
● Fragments are an Android thing
● Requires glue code
Problems

16. 16

17. 500+Mobile Engineers who
worked on new Uber app
200+ Android Engineers who
made at least 1 commint
in Android monorepo
500+iOS Engineers who made
at least 1 commit in iOS
monorepo
Some Numbers
17

19. Account Info

20. Account Info
Balance Pill

21. Account Info
Balance Pill
Map

22. Account Info
Balance Pill
Safety Info
Map

23. Account Info
Balance Pill
Safety Info
Status
Map

24. M - V - Something
24

25. Naive MVP
25
Model Presenter View
Update
Read
Notify
Populate

26. ● Works well for individual pieces
● Countless variations of the pattern
● Requires glue code
● Development slows down
● Integration points are main source of bugs
Naive MVP / MVVM

27. RIBs
27

28. Router
Interactor
Builder
28

29. Router
Interactor
Builder
29

30. Router
Interactor
Builder
30

31. Naive MVP
31
Model Presenter View
Update
Read
Notify
Populate

32. RIB
32
Interactor Presenter View
Notify
Present
Notify
Populate
Model
Update
Read

33. RIB
33
Interactor Presenter View
Notify
Present
Notify
Populate
Model
Update
Read
Router
Navigate

34. RIB
34
Interactor Presenter View
Notify
Present
Notify
Populate
Model
Update
Read
Router
Navigate
Builder
Build

35. Example
35

36. ProductList
ProductDetails

37. Interactor
Simple Lifecycle
Just 2 lifecycle events. Sometimes even less
than that. @Override
protected void didBecomeActive(@Nullable Bundle savedInstanceState) {
super.didBecomeActive(savedInstanceState);
// Subscribe to data source. Ready to update UI.
}
@Override
protected void willResignActive(@Nullable Bundle savedInstanceState) {
super.didBecomeActive(savedInstanceState);
// Tear down and remove subscriptions/callbacks.
}

38. Interactor
Business Logic
Loads data from Model layer, makes
decisions and asks Presenter to render UI.
Talks to Router to perform navigation.
@Override
protected void didBecomeActive(@Nullable Bundle savedInstanceState) {
super.didBecomeActive(savedInstanceState);
presenter.showLoading();
productApi.getProducts()
.observeOn(AndroidSchedulers.mainThread())
.as(autoDisposable(this))
.subscribe(result -> {
presenter.hideLoading();
if (result.isSuccess()) {
presenter.showProducts(result.getResult());
} else {
presenter.showError();
}
});
}

39. Router
Navigation
Creates other RIBs and attaches them to
view hierarchy.
void routeToProductDetails(Product product) {
ProductDetailsRouter router = productDetailsBuilder.build(
getView(),
product
);
attachChild(router);
getView().addView(router.getView());
}

40. Builder
Builds
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
public Router build() {
// Builds and returns a router
}

41. Builder
Configuration
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
@Override
protected ProductListView inflateView(LayoutInflater inflater, ViewGroup parentViewGroup) {
return (ProductListView) inflater.inflate(R.layout.root_rib, parentViewGroup, false);
}
public interface ParentComponent extends ProductDetailsBuilder.ParentComponent {
ProductNetworkApi productNetworkApi();
}
@dagger.Module
public abstract static class Module {
@BindsInstance
public abstract ProductDetailsInteractor.Listener productDetailsListener(
ProductListInteractor interactor
);
}
@dagger.Component(
modules = RootBuilder.Module.class,
dependencies = ParentComponent.class
)
interface Component extends InteractorBaseComponent<ProductListInteractor>,
ProductDetailsBuilder.ParentComponent {
// Dagger initialization
}

42. Builder
Configuration
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
@Override
protected ProductListView inflateView(LayoutInflater inflater, ViewGroup parentViewGroup) {
return (ProductListView) inflater.inflate(R.layout.root_rib, parentViewGroup, false);
}
public interface ParentComponent extends ProductDetailsBuilder.ParentComponent {
ProductNetworkApi productNetworkApi();
}
@dagger.Module
public abstract static class Module {
@BindsInstance
public abstract ProductDetailsInteractor.Listener productDetailsListener(
ProductListInteractor interactor
);
}
@dagger.Component(
modules = RootBuilder.Module.class,
dependencies = ParentComponent.class
)
interface Component extends InteractorBaseComponent<ProductListInteractor>,
ProductDetailsBuilder.ParentComponent {
// Dagger initialization
}

43. Builder
Configuration
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
@Override
protected ProductListView inflateView(LayoutInflater inflater, ViewGroup parentViewGroup) {
return (ProductListView) inflater.inflate(R.layout.root_rib, parentViewGroup, false);
}
public interface ParentComponent extends ProductDetailsBuilder.ParentComponent {
ProductNetworkApi productNetworkApi();
}
@dagger.Module
public abstract static class Module {
@BindsInstance
public abstract ProductDetailsInteractor.Listener productDetailsListener(
ProductListInteractor interactor
);
}
@dagger.Component(
modules = RootBuilder.Module.class,
dependencies = ParentComponent.class
)
interface Component extends InteractorBaseComponent<ProductListInteractor>,
ProductDetailsBuilder.ParentComponent {
// Dagger initialization
}

44. Builder
Configuration
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
@Override
protected ProductListView inflateView(LayoutInflater inflater, ViewGroup parentViewGroup) {
return (ProductListView) inflater.inflate(R.layout.root_rib, parentViewGroup, false);
}
public interface ParentComponent extends ProductDetailsBuilder.ParentComponent {
ProductNetworkApi productNetworkApi();
}
@dagger.Module
public abstract static class Module {
@BindsInstance
public abstract ProductDetailsInteractor.Listener productDetailsListener(
ProductListInteractor interactor
);
}
@dagger.Component(
modules = RootBuilder.Module.class,
dependencies = ParentComponent.class
)
interface Component extends InteractorBaseComponent<ProductListInteractor>,
ProductDetailsBuilder.ParentComponent {
// Dagger initialization
}

45. Builder
Configuration
Instantiates Interactor, Router and View.
Provides dependencies. Specifies which
dependencies to request from a parent RIB.
@Override
protected ProductListView inflateView(LayoutInflater inflater, ViewGroup parentViewGroup) {
return (ProductListView) inflater.inflate(R.layout.root_rib, parentViewGroup, false);
}
public interface ParentComponent extends ProductDetailsBuilder.ParentComponent {
ProductNetworkApi productNetworkApi();
}
@dagger.Module
public abstract static class Module {
@BindsInstance
public abstract ProductDetailsInteractor.Listener productDetailsListener(
ProductListInteractor interactor
);
}
@dagger.Component(
modules = RootBuilder.Module.class,
dependencies = ParentComponent.class
)
interface Component extends InteractorBaseComponent<ProductListInteractor>,
ProductDetailsBuilder.ParentComponent {
// Dagger initialization
}

46. Composition
46

47. Account Info
Balance Pill
Safety Info
Status
Map

48. 48
Root

49. Root
Logged InLogged Out

50. 50
Root
Logged InLogged Out
Sign Up Log In

51. 51
Root
Logged InLogged Out
MapSign Up Log In

52. 52
Root
Logged InLogged Out
Map
Balance StatusProfile
Sign Up Log In

53. 53
Root
Logged InLogged Out
Map
Balance StatusProfile
Payments
Sign Up Log In

54. Where is Activity?
54

55. 55
Root
Logged InLogged Out
Map
Balance StatusProfile
Payments
Sign Up Log In
RootActivity

56. Modularization
56

57. 57
Root
Logged InLogged Out
Map
Balance StatusProfile
Payments
Sign Up Log In

58. +
58

59. What’s the catch?
59

62. ● Screen rotation
● Transition animations
Not included

63. Where to grab it?
63

64. uber/RIBs
64

65. ● Good parts of MVP
● Composable
● Compile-time independent
● OS agnostic
● Scalable
● Single-Activity as a bonus
Summary

66. Thank you!
Time for questions
Dmitry Zaytsev, dmitry.zaytsev@uber.com
Twitter: @dizaytsev
Medium: @dmitry.zaicew