Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RxRIBs: Multiplatform architecture with Rx

VCNC
November 06, 2018

RxRIBs: Multiplatform architecture with Rx

RxRIBs
Multiplatform architecture with rx

VCNC

November 06, 2018
Tweet

More Decks by VCNC

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

  4. Why a new architecture?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Why a new architecture?

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  15. Uber RIBs
    Router
    Interactor
    Builder

    View full-size slide

  16. Uber RIBs
    Router Interactor Builder

    View full-size slide

  17. Uber RIBs
    Router Interactor Builder
    Presenter View

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Uber RIBs
    Router Interactor Builder
    Presenter View
    Translation logic

    View full-size slide

  23. Uber RIBs
    Router Interactor Builder
    Presenter View

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Root
    Scopes
    Main
    (logged in)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Root
    Scopes
    Main
    Ride

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Efficiency in co-working
    Before RIBs After RIBs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 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 full-size slide