RxRIBs: Multiplatform architecture with Rx

RxRIBs
Multiplatform architecture with rx

Transcript

1. VCNC (Between / TADA) 김 남 현 RxRIBs Multiplatform architecture with rx
2. VCNC (Between / TADA) 김 남 현 VCNC RIBs Multiplatform architecture with rx
3. Table of Contents 1 Why a new architecture? 2 RIBs at Uber 3 What we got from RIBs 4 RIBs at VCNC
4. Why a new architecture?
5. Why a new architecture? Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
6. Why a new architecture? 4 different apps in 2 platforms
7. Why a new architecture? Project started 2018.06 Driver α 2018.07 2018.08 2018.09 2018.10 Rider α Beta Public release
8. Why a new architecture?
9. Why a new architecture? VIPER Reflex MVP with Rx
10. Multi-platform architecture Reference: Tsahi Levent-Levi flickr
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, …
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, …
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, …
14. Multi-platform architecture https://github.com/uber/RIBs
15. Uber RIBs Router Interactor Builder
16. Uber RIBs Router Interactor Builder
17. Uber RIBs Router Interactor Builder Presenter View
18. Uber RIBs Router Interactor Builder Presenter View Business logic (a.k.a. brain of the app)
19. Uber RIBs Router Interactor Builder Presenter View Helper for routing between RIBs
20. Uber RIBs Router Interactor Builder Presenter View Build RIB units
21. Uber RIBs Router Interactor Builder Presenter View Layout & Animation
22. Uber RIBs Router Interactor Builder Presenter View Translation logic
23. Uber RIBs Router Interactor Builder Presenter View
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
25. State tree Root Main LoggedOut Menu Request Ride LocationEditor Confirm Refinement Coupon DroppedOff Card Matched Pending Viewless Viewful Email, PW, ...
26. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
27. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
28. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
29. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
30. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
31. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
32. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
33. RIB tree Root Main LoggedOut Menu Request LocationEditor Confirm Refinement Coupon Card Viewless Viewful Ride DroppedOff Matched Pending Email, PW, ...
34. View(ViewController) tree RootView MainView LocationEditor Confirm Refinement Coupon DroppedOff Card Matched Pending LoggedOut
35. Scopes Root
36. Root Scopes Main (logged in)
37. Scopes class AuthenticateNetworkRequest: NetworkRequest { private var authToken: String? public func makeRequest() { if let authToken = authToken { addAuthToken(authToken) } super.makeRequest() }
38. Scopes // `authToken` is not null in MainScope class AuthenticateNetworkRequest: NetworkRequest { private var authToken: String public func makeRequest() { addAuthToken(authToken) super.makeRequest() } }
39. Root Scopes Main Ride
40. Scopes public func refresh() { if let ride = self.ride { getRideStatus(ride.id) } else { getUserStatus(self.user!.id) } }
41. Scopes // `ride` is not null in RideScope public func refresh() { getRideStatus(self.ride.id) }
42. Efficiency in co-working Separation of concern leads to better modularization.
43. Efficiency in co-working Before RIBs After RIBs
44. Flow of data (Uber RIBs) Interactor (business logic) Presenter (translation logic) Router (attach/detach RIBs) View (layout & interaction)
45. Flow of data (VCNC RIBs) Interactor (business logic) Presenter (translation logic) Router (attach/detach RIBs) View (layout & interaction) Events
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)
47. Lifecycle Router, Interactor, Presenter, View Active Inactive Router willAttach didAttach willDetach didDetach RIBs emit lifecycle events
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