Evolving Nubank: iOS Architecture

This talk sumarizes how Nubank found out when a new iOS architecture was needed and how it was implemented.

Transcript

1. Evoluindo a Arquitetura iOS do Nubank Eduardo Pinto @edulpn Piera Marchesini @pieramarchesini 08/12/2018
2. Show of hands Quem aqui: • É cliente do Nubank
3. O que é Nubank?
4. • Mais de 1200 funcionários • Diversidade • Mais de 5M de clientes • App first • Cultura de qualidade e testes O que é Nubank?
5. História
6. Linha do tempo Lançamento do aplicativo Setembro 2014
7. Linha do tempo Lançamento do aplicativo Rewards Setembro 2014 Agosto 2017
8. Linha do tempo Lançamento do aplicativo Rewards NuConta Setembro 2014 Agosto 2017 Outubro 2017
9. O que enfrentamos? Lanç. H oje Clientes 2K +5M Lanç. H oje Devs Mobile +50 2
10. O que enfrentamos? Lanç. H oje Devs Mobile +50 2 Nós escalamos, nossa arquitetura não nos acompanhou • Nossa equipe aumentou exponencialmente • Necessário continuar criando e iterando com agilidade e qualidade
11. Swift e Kotlin Decisão de migração em 2016 • Esta decisão foi o ponto de partida para estudar soluções de arquitetura • Intenção de adotar uma arquitetura para ambas as plataformas
12. Planejamento
13. Inspiração Entities UI Web Controllers Presenters Use Cases Uncle Bob’s Clean Architecture • Modularização e reuso • Padronização • Testes e manutenção
14. App Como resolver?
15. App Como resolver? Apresentação
16. App Como resolver? Apresentação Domínio & Dados
17. App Como resolver? Apresentação Domínio & Dados
18. App Como resolver? Apresentação Domínio & Dados
19. Arquitetura de apresentação
20. Abstrações UIKit nos oferece duas classes: UIView e UIViewController • Responsabilidades pouco definidas • Necessário mais camadas de abstração
21. Abstrações • Controller • ViewController • View • ViewModel
22. Protótipo Bloqueio e desbloqueio de cartão
23. Protocolos enum CardStatus { case active case blocked } protocol CardManagerProtocol { func toggleCardStatus() -> Completable }
24. Controller Controller
25. class Controller { enum Action { case toggleCardStatus } let viewController: ViewController let cardManager: CardManager lazy var action: Observable<Action> = { return self.viewController.toggleCardStatus.map { .toggleCardStatus } }() init(status: Observable<CardStatus>, cardManager: CardManager = .init(), viewController: ViewController = .init()) { self.viewController = viewController self.cardManager = cardManager subscribe(toStatus: status) subscribe(toAction: action) } Controller Controller
26. Controller Controller func subscribe(toStatus cardStatus: Observable<CardStatus>) { cardStatus .subscribe(onNext: { [viewController] in let viewModel = ViewModel(cardStatus: $0) viewController.bind(viewModel) }).disposed(by: disposeBag) } func subscribe(toAction action: Observable<Action>) { action .flatMap { [cardManager] action -> Completable in switch action { case .toggleCardStatus: return cardManager.toggleCardStatus() } }.subscribe() .disposed(by: disposeBag) } let disposeBag = DisposeBag() }
27. ViewController ViewController Controller ViewModel Repassa Ações Cria
28. ViewController ViewController Controller ViewModel Repassa Ações Cria class ViewController: UIViewController { lazy var typedView: View = { return view as! View }() lazy var toggleCardStatus: ControlEvent<Void> = { return typedView.button.rx.tap }() func bind(_ viewModel: ViewModel) { typedView.button.setTitle(viewModel.buttonTitle, for: .normal) typedView.titleLabel.text = viewModel.title typedView.hintLabel.text = viewModel.hint typedView.cardImageView.image = viewModel.cardImage } }
29. ViewModel ViewController Controller ViewModel Repassa Ações Cria
30. ViewModel struct ViewModel: Equatable { let title: String = "Card Status" let buttonTitle: String let hint: String? let cardImage: UIImage? } ViewController Controller ViewModel Repassa Ações Cria
31. ViewModel extension ViewModel { init(cardStatus: CardStatus) { cardImage = UIImage(named: "newCard") switch cardStatus { case .active: hint = "Tap the button to block your card" buttonTitle = "Block" case .blocked: hint = "Tap the button to unblock your card" buttonTitle = "Unblock" } } } ViewController Controller ViewModel Repassa Ações Cria
32. View ViewController Controller View ViewModel Repassa Ações Repassa Ações Atualiza Cria
33. class View: BaseView { let button: UIButton = { let button = UIButton() button.backgroundColor = .purple button.setTitleColor(.white, for: .normal) button.setTitleColor(.lightGray, for: .disabled) return button }() let titleLabel: UILabel = { let label = UILabel() label.font = .boldSystemFont(ofSize: 24) return label }() let hintLabel: UILabel = { let label = UILabel() label.numberOfLines = 0 return label }() View ViewController Controller View ViewModel Repassa Ações Repassa Ações Atualiza Cria
34. let cardImageView: UIImageView = { let imageView = UIImageView() imageView.contentMode = .scaleAspectFit return imageView }() override func initialize() { backgroundColor = .white addSubview(button) addSubview(titleLabel) addSubview(hintLabel) addSubview(cardImageView) } override func installConstraints() { button.snp.makeConstraints { $0.left.bottom.right.equalToSuperview().inset(20) } View ViewController Controller View ViewModel Repassa Ações Repassa Ações Atualiza Cria
35. titleLabel.snp.makeConstraints { $0.left.right.equalToSuperview().inset(20) $0.top.equalToSuperview().inset(20) } hintLabel.snp.makeConstraints { $0.left.right.equalTo(titleLabel) $0.top.equalTo(titleLabel.snp.bottom).offset(20) } cardImageView.snp.makeConstraints { $0.top.equalTo(hintLabel.snp.bottom).offset(20) $0.left.right.equalToSuperview().inset(20) } } } View ViewController Controller View ViewModel Repassa Ações Repassa Ações Atualiza Cria
36. Navegação
37. Nubank App Rotas e Coordinators Tela 2 Tela 1 Tela 3
38. Nubank App Rotas e Coordinators App Home Cartão de Crédito NuConta Rewa UIViewContr oller UIViewContr oller UIViewContr oller Fluxos & Bibliotecas Rotas
39. Rotas e Coordinators • Um único ponto de entrada • URLs para identificar fluxos • Manter composição
40. Router Fluxo Rotas e Coordinators RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
41. Router Fluxo Rotas RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
42. Rotas Cartão de Crédito NuConta Rewards nuapp://<product>/<feature>&<parameter>=value register
43. Coordinator Router Fluxo RoutingHub RouteDescriptor Coordinator UIViewController UIViewController UIViewController UIViewController
44. Fluxo Coordinator UIViewController Coordinator UIViewController UIViewController UIViewController Unidade de abstração de um fluxo
45. Coordinator Coordinator UIViewController Unidade de abstração de um fluxo UIViewController UIViewController
46. Perguntas? Eduardo Pinto @edulpn | eduardo.pinto@nubank.com.br Piera Marchesini @pieramarchesini | piera.marchesini@nubank.com.br
47. Obrigado! sou.nu/jobs-at-nubank Eduardo Pinto @edulpn | eduardo.pinto@nubank.com.br Piera Marchesini @pieramarchesini | piera.marchesini@nubank.com.br