Multiplatform architecture ribs in swift

1. VCNC RIBs
김남현 VCNC (타다 / Between*)
Multi-platform architecture

2. Table of Contents
1 Why a new architecture?
2 RIBs at Uber
3 What we got from RIBs
4 What we’re struggling with

3. Why a new architecture?
3 different apps in 2 platforms

4. Why a new architecture?
Project started
2018.06
Driver α
2018.07 2018.08 2018.09 2018.10
Rider α Beta Public release

5. Factors to consider
No MVC (no MVVM or MVP, too)
- MVC stands for Massive View Controller
- Keeping components simple
Map-based application
- We’re making a map-based application
No time to create a framework from scratch
- Conductor, Scoop, RIBs, …

6. Factors to consider
No MVC (no MVVM or MVP, too)
- MVC stands for Massive View Controller
- Keeping components simple
Map-based application
- We’re making a map-based application
No time to create a framework from scratch
- Conductor, Scoop, RIBs, …

7. Factors to consider
No MVC (no MVVM or MVP, too)
- MVC stands for Massive View Controller
- Keeping components simple
Map-based application
- We’re making a map-based application
No time to create a framework from scratch
- Conductor, Scoop, RIBs, …

8. Multi-platform architecture
https://github.com/uber/RIBs

9. Uber RIBs
RouterInteractorBuilder

10. Uber RIBs
Router Interactor Builder

11. Uber RIBs
Router Interactor Builder
Presenter View

12. Uber RIBs
Router Interactor Builder
Presenter View
Business logic
(a.k.a. brain of the app)

13. Uber RIBs
Router Interactor Builder
Presenter View
Helper for routing
between RIBs

14. Uber RIBs
Router Interactor Builder
Presenter View
Build RIB units

15. Uber RIBs
Router Interactor Builder
Presenter View
Layout & Animation

16. Uber RIBs
Router Interactor Builder
Presenter View
Translation logic

17. Uber RIBs
Router Interactor Builder
Presenter View

18. Convoluted state machines
Change
Email
Home
Screen
Menu
Search for
Location
Change
Vehicle
Options
Refine
Location
Request
Vehicle
Vehicle
Matched
Receipt
On trip
Verify
Phone
Number

19. State tree
Root
MainLoggedOut
MenuRequest Ride
LocationEditor Confirm Refinement
Coupon
DroppedOff
Card
MatchedPending
Viewless
Viewful
Email, PW, ...

20. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

21. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

22. RIB tree
Viewless
Viewful
LoggedOut
Menu
LocationEditor Refinement
Root
Main
Request
Confirm
Coupon Card
Ride
DroppedOffMatchedPending
Email, PW, ...

23. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

24. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

25. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

26. RIB tree
Root
MainLoggedOut
MenuRequest
LocationEditor Confirm Refinement
Coupon Card
Viewless
Viewful
Ride
DroppedOffMatchedPending
Email, PW, ...

27. View(ViewController) tree
RootView
MainView
LocationEditor Confirm Refinement
Coupon
DroppedOff
Card
MatchedPending
LoggedOut

28. Scopes
Root

29. Root
Scopes
Main
(logged in)

30. Scopes
class AuthenticateNetworkRequest: NetworkRequest {
private var authToken: String?
public func makeRequest() {
if let authToken = authToken {
addAuthToken(authToken)
}
super.makeRequest()
}

31. Scopes
// `authToken` is not null in MainScope
class AuthenticateNetworkRequest: NetworkRequest {
private var authToken: String
public func makeRequest() {
addAuthToken(authToken)
super.makeRequest()
}
}

32. Root
Scopes
Main
Ride

33. Scopes
public func refresh() {
if let ride = self.ride {
getRideStatus(ride.id)
} else {
getUserStatus(self.user!.id)
}
}

34. Scopes
// `ride` is not null in RideScope
public func refresh() {
getRideStatus(self.ride.id)
}

35. Communication between RIBs
What if an interactor needs to inform
another RIB of events?
Main
Home Request
??

36. Downwards communication
Downwards communication via Rx.
Places LocationStream on DI graph and
cause Rx emissions.
Main
Receives LocationStream from DI graph.
Subscribes to LocationStream.
Home
Receives LocationStream from DI graph.
Subscribes to LocationStream.
Request

37. Upwards communication
Upwards communication with a Listener interface.
Implements Home’s Listener interface.
Main
Declares listener interface.
Invoke listener.onRequest() to
notify parent when tap.
Home

38. Efficiency in co-working
Separation of concerns leads to
a better modularization.

39. Efficiency in co-working
Before RIBs After RIBs

40. Boilerplate
ref) https://github.com/uber/RIBs/tree/master/ios/tooling/RIB.xctemplate

41. Screen stack
can be used when you want to push
an entirely new “Screen”.

42. Screen stack
can be used when you want to push
an entirely new “Screen”.
UINavigationController is used as a Screen stack.
But UINavigationController
doesn’t support a transparent view.

43. Dependency Injection
Components
are used to manage the RIB dependencies.

44. Dagger
Fully static, compile-time dependency injection
framework for Android

45. iOS
Using pure DI

46. Needle
Compile-time safe Swift
dependency injection framework
But Needle
doesn’t inject dependencies automatically.

47. What routers can do?
contain simple and repetitive routing logic.
create an additional abstraction layer.
make it easier to test complex interactor logic.
act as just a Helper?

48. What routers can do?
Request
LocationEditor Confirm Refinement
Attached RIB should be tracked by
Interactor or Router?

49. Animations

50. Animations
Home
Screen
Search for
Location
UIViewControllerTransitioningDelegate
optional func animationController(forPresented presented: UIViewController,
presenting: UIViewController,
source: UIViewController)
-> UIViewControllerAnimatedTransitioning?

51. Animations
Root
Main
Request
LocationEditor
Root
Main
MenuHome

52. Lifecycle
Router, Interactor, Presenter, View
Active Inactive
Router
willAttach didAttach willDetach didDetach
RIBs emit lifecycle events

53. Wrap-up
1 Multi-platform architecture
2 Router, Inteactor, Builder, Presenter, and View
3 Business logic determines the state tree
4 Scopes
5 Communication between RIBs
6 Boilerplate, Screen stack, DI,
Router, Animation, Lifecycle