RxRIBs: Multiplatform architecture with Rx

RxRIBs
Multiplatform architecture with rx

Transcript

1. VCNC (Between / TADA)
   김 남 현
   RxRIBs
   Multiplatform architecture with rx
   

   View Slide

2. VCNC (Between / TADA)
   김 남 현
   VCNC RIBs
   Multiplatform architecture with rx
   

   View Slide

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

   View Slide

4. Why a new architecture?
   

   View Slide

5. Why a new architecture?
   Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
   

   View Slide

6. Why a new architecture?
   4 different apps in 2 platforms
   

   View Slide

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

   View Slide

8. Why a new architecture?
   

   View Slide

9. Why a new architecture?
   VIPER Reflex MVP with Rx
   

   View Slide

10. Multi-platform architecture
    Reference: Tsahi Levent-Levi flickr
    

    View Slide

11. Factors to consider
    No MVC (no MVVM or MVP, too)
    - MVC stands for Massive View Controller
    - Keeping components simple
    Single Activity Application
    - We’re making a map-based application
    No time to create a framework from scratch
    - Conductor, Scoop, ReSwift, ReactorKit, Reflex, …
    

    View Slide

12. Factors to consider
    No MVC (no MVVM or MVP, too)
    - MVC stands for Massive View Controller
    - Keeping components simple
    Single Activity Application
    - We’re making a map-based application
    No time to create a framework from scratch
    - Conductor, Scoop, ReSwift, ReactorKit, Reflex, …
    

    View Slide

13. Factors to consider
    No MVC (no MVVM or MVP, too)
    - MVC stands for Massive View Controller
    - Keeping components simple
    Single Activity Application
    - We’re making a map-based application
    No time to create a framework from scratch
    - Conductor, Scoop, ReSwift, ReactorKit, Reflex, …
    

    View Slide

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

    View Slide

15. Uber RIBs
    Router
    Interactor
    Builder
    

    View Slide

16. Uber RIBs
    Router Interactor Builder
    

    View Slide

17. Uber RIBs
    Router Interactor Builder
    Presenter View
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Uber RIBs
    Router Interactor Builder
    Presenter View
    Translation logic
    

    View Slide

23. Uber RIBs
    Router Interactor Builder
    Presenter View
    

    View Slide

24. 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
    

    View Slide

25. State tree
    Root
    Main
    LoggedOut
    Menu
    Request Ride
    LocationEditor Confirm Refinement
    Coupon
    DroppedOff
    Card
    Matched
    Pending
    Viewless
    Viewful
    Email, PW, ...
    

    View Slide

26. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

27. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

28. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

29. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

30. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

31. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

32. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

33. RIB tree
    Root
    Main
    LoggedOut
    Menu
    Request
    LocationEditor Confirm Refinement
    Coupon Card
    Viewless
    Viewful
    Ride
    DroppedOff
    Matched
    Pending
    Email, PW, ...
    

    View Slide

34. View(ViewController) tree
    RootView
    MainView
    LocationEditor Confirm Refinement
    Coupon
    DroppedOff
    Card
    Matched
    Pending
    LoggedOut
    

    View Slide

35. Scopes
    Root
    

    View Slide

36. Root
    Scopes
    Main
    (logged in)
    

    View Slide

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

    View Slide

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

    View Slide

39. Root
    Scopes
    Main
    Ride
    

    View Slide

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

    View Slide

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

    View Slide

42. Efficiency in co-working
    Separation of concern leads to
    better modularization.
    

    View Slide

43. Efficiency in co-working
    Before RIBs After RIBs
    

    View Slide

44. Flow of data (Uber RIBs)
    Interactor
    (business logic)
    Presenter
    (translation logic)
    Router
    (attach/detach RIBs)
    View
    (layout & interaction)
    

    View Slide

45. Flow of data (VCNC RIBs)
    Interactor
    (business logic)
    Presenter
    (translation logic)
    Router
    (attach/detach RIBs)
    View
    (layout & interaction)
    Events
    

    View Slide

46. Animations
    No consideration in Uber RIBs
    Need to think about RIBs transitions
    UITransitioningDelegate in UIViewController
    HeroTransitions
    func transition(from: UIViewController, to: UIViewController)
    in view: UIView,
    completion: ((Bool) -> Void)? = nil)
    

    View Slide

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

    View Slide

48. Wrap-up
    1 Multi-platform architecture
    2 Router, Inteactor, Builder, Presenter, and View
    3 Business logic determines the state tree
    4 Scopes
    5 Unidirectional data flow, Animations, Lifecycle
    

    View Slide

49. View Slide