Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Why a new architecture?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Why a new architecture? 4 different apps in 2 platforms

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Why a new architecture?

Slide 9

Slide 9 text

Why a new architecture? VIPER Reflex MVP with Rx

Slide 10

Slide 10 text

Multi-platform architecture Reference: Tsahi Levent-Levi flickr

Slide 11

Slide 11 text

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, …

Slide 12

Slide 12 text

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, …

Slide 13

Slide 13 text

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, …

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Uber RIBs Router Interactor Builder

Slide 16

Slide 16 text

Uber RIBs Router Interactor Builder

Slide 17

Slide 17 text

Uber RIBs Router Interactor Builder Presenter View

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Uber RIBs Router Interactor Builder Presenter View Build RIB units

Slide 21

Slide 21 text

Uber RIBs Router Interactor Builder Presenter View Layout & Animation

Slide 22

Slide 22 text

Uber RIBs Router Interactor Builder Presenter View Translation logic

Slide 23

Slide 23 text

Uber RIBs Router Interactor Builder Presenter View

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Scopes Root

Slide 36

Slide 36 text

Root Scopes Main (logged in)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Root Scopes Main Ride

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Efficiency in co-working Before RIBs After RIBs

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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)

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content