Desacoplando fluxos - Coordinators e Rotas

Como criamos abstrações de navegação e aumentamos a possibilidade de reuso com Coordinators e Rotas no Nubank

Transcript

1. Desacoplando fluxos: Coordinators e Rotas Victor Maraccini @vmaraccini Eduardo Lourenço @edulpn
2. Nubank App Motivação Tela 2 Tela 1 Tela 3
3. Nubank App Motivação App Home Cartão de Crédito NuConta Rewa UIViewController UIViewController UIViewController Fluxos & Bibliotecas Rotas
4. Necessidade • Abrir fluxos de qualquer lugar do app • Após separarmos em bibliotecas, não podíamos ter acoplamento • Ser dinâmico e responder ao backend • Poder alterar o comportamento sob demanda
5. Como resolver? • Um único ponto de entrada • URLs para identificar um fluxo • Tudo passado por parâmetro na query • Ainda manter composição • Saber quando uma rota começa, produz efeitos colaterais e termina
6. Router Fluxo Rotas & Coordinators RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
7. RoutingHub Porta de entrada para abrir um fluxo routingHub .start(url: URL(string: "nuapp://domain")) Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
8. RoutingHub Porta de entrada para abrir um fluxo routingHub .start(url: URL(string: "nuapp://domain")) .subscribe(onNext: { state in //React to state changes } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
9. RoutingHub Porta de entrada para abrir um fluxo routingHub .start(url: URL(string: "nuapp://domain")) .subscribe(onNext: { state in //React to state changes }, onError: { error in //Handle flow errors } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
10. RoutingHub Porta de entrada para abrir um fluxo routingHub .start(url: URL(string: "nuapp://domain")) .subscribe(onNext: { state in //React to state changes }, onError: { error in //Handle flow errors }, onCompleted: { //Perform finishing actions }) Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
11. RoutingHub Interface RxSwift para fluxos no app class RoutingHub { func start(url: URL) -> Observable<RoutingState> { } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
12. RoutingHub Interface RxSwift para fluxos no app class RoutingHub { func start(url: URL) -> Observable<RoutingState> { guard let router = self.router else { return .error(RoutingError.routerUnavailable) } } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
13. RoutingHub Interface RxSwift para fluxos no app class RoutingHub { func start(url: URL) -> Observable<RoutingState> { guard let router = self.router else { return .error(RoutingError.routerUnavailable) } guard let descriptor = descriptors.first { $0.match(url: url) } else { return .error(RoutingError.unknownRoute) } } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
14. RoutingHub Interface RxSwift para fluxos no app class RoutingHub { func start(url: URL) -> Observable<RoutingState> { guard let router = self.router else { return .error(RoutingError.routerUnavailable) } guard let descriptor = descriptors.first { $0.match(url: url) } else { return .error(RoutingError.unknownRoute) } return router.start(url: url, descriptor: descriptor) } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
15. RoutingHub Registro de rotas em Runtime class RoutingHub { var router: Router? var descriptors: [RouteDescriptor] = [] func register(descriptor: RouteDescriptor) func register(router: Router) … } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
16. RoutingHub Registro de rotas em Runtime routingHub.register(descriptor: rewardsRoute) routingHub.register(descriptor: chatRoute) routingHub.register(descriptor: cardActivationRoute) routingHub.register(descriptor: helpRoute) … routingHub.start(url: URL(string: "nuapp://domain")) Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
17. RouteDescriptor Responsável por descrever uma rota e expor seu ciclo de vida protocol RouteDescriptor: AnyObject { func match(url: URL) -> Bool func start(url: URL, on context: UIViewController) -> Observable<RoutingState> } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
18. RouteDescriptor Exemplo class SomeRouteDescriptor: RouteDescriptor { func match(url: URL) -> Bool { return url.host == "domain" //Matches xxx://domain } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
19. RouteDescriptor Exemplo class SomeRouteDescriptor: RouteDescriptor { func match(url: URL) -> Bool { return url.host == "domain" //Matches xxx://domain } func start(url: URL, on context: UIViewController) -> Observable<RoutingState> { return Observable.create { (observer) -> Disposable in } } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
20. RouteDescriptor Exemplo class SomeRouteDescriptor: RouteDescriptor { func match(url: URL) -> Bool { return url.host == "domain" //Matches xxx://domain } func start(url: URL, on context: UIViewController) -> Observable<RoutingState> { return Observable.create { (observer) -> Disposable in let coordinator = SomeCoordinator(context: context) do { try coordinator.start(onCompleted: observer.onCompleted) } catch { observer.onError(error) } } } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
21. RouteDescriptor Exemplo class SomeRouteDescriptor: RouteDescriptor { func match(url: URL) -> Bool { return url.host == "domain" //Matches xxx://domain } func start(url: URL, on context: UIViewController) -> Observable<RoutingState> { return Observable.create { (observer) -> Disposable in let coordinator = SomeCoordinator(context: context) do { try coordinator.start(onCompleted: observer.onCompleted) } catch { observer.onError(error) } return Disposables.create { coordinator.dismiss() } } } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
22. RoutingState Descrevendo o estado de fluxos func start(url: URL) -> Observable<RoutingState> enum RoutingState { } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
23. RoutingState Descrevendo o estado de fluxos func start(url: URL) -> Observable<RoutingState> enum RoutingState { case preparing } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
24. RoutingState Descrevendo o estado de fluxos func start(url: URL) -> Observable<RoutingState> enum RoutingState { case preparing case started } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
25. RoutingState Descrevendo o estado de fluxos func start(url: URL) -> Observable<RoutingState> enum RoutingState { case preparing case started case produced } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
26. Router Fluxo Coordinator RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
27. Fluxo Coordinator UIViewController Coordinator UIViewController UIViewController UIViewController Unidade de abstração de um fluxo
28. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
29. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
30. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
31. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
32. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
33. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
34. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
35. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
36. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
37. Coordinator Abstração de fluxo class SomeCoordinator { var firstScreen: FirstViewController? var secondScreen: SecondViewController? func start(onCompleted: () -> Void) { } func dismiss() { } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
38. Coordinator Abstração de fluxo class SomeCoordinator { ... func start(onCompleted: () -> Void) { let firstScreen = FirstViewController(nextPressed: { [weak self] userInput in }) self.firstScreen = firstScreen context.present(firstScreen, animated: true, completion: nil) } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
39. Coordinator Abstração de fluxo class SomeCoordinator { ... func start(onCompleted: () -> Void) { let firstScreen = FirstViewController(nextPressed: { [weak self] userInput in self?.firstScreenFinished(withInput: userInput) }) self.firstScreen = firstScreen context.present(firstScreen, animated: true, completion: nil) } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
40. Coordinator Abstração de fluxo class SomeCoordinator { ... func start(onCompleted: () -> Void) { let firstScreen = FirstViewController(nextPressed: { [weak self] userInput in self?.firstScreenFinished(withInput: userInput) }) self.firstScreen = firstScreen context.present(firstScreen, animated: true, completion: nil) } func firstScreenFinished(withInput input: String) { let secondScreen = SecondViewController(previousInput: input, nextPressed: { userInput in /*…*/ }) self.secondScreen = secondScreen firstScreen?.present(secondScreen, animated: true, completion: nil) } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
41. Coordinator Abstração de fluxo class SomeCoordinator { ... func start(onCompleted: () -> Void) { let firstScreen = FirstViewController(nextPressed: { [weak self] userInput in self?.firstScreenFinished(withInput: userInput) }) self.firstScreen = firstScreen context.present(firstScreen, animated: true, completion: nil) } func firstScreenFinished(withInput input: String) { let secondScreen = SecondViewController(previousInput: input, nextPressed: { userInput in /*…*/ }) self.secondScreen = secondScreen firstScreen?.present(secondScreen, animated: true, completion: nil) } func dismiss() { firstScreen?.dismiss(animated: true, completion: nil) } } Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
42. Router Fluxo Rotas & Coordinators RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
43. Obrigado! https://nubank.workable.com