Scaling mobile development at Nubank

As a mobile first company, Nubank's mobile applications were born together with the company and it's the main point of contact with our customers. That means that everything you wanna do or change with your credit-card / bank account is done through the app, and, as expected, the app is full with features that are always being rethought to improve their experience, and new ones coming almost every month.

We've scaled from 2 to 20+ mobile developers in three years and want to share with you the things we've built and how we've adapted to be able to attend that demand, and what we're planning on doing next.

Transcript

1. Scaling Mobile Development at Nubank Ygor Barboza • Thales Machado
2. Nubank - Overview •750 employees •100 Software Engineers •20 Mobile Engineers •10 Android Engineers •Based in São Paulo - SP (and now Berlin)
3. Nubank - App Overview •android-app + internal libs •Total of more than 25k commits •More than 450k lines of code •Pull Requests •Code Review
4. Pattern
5. Lines of code from 2015 to 2017 5 350.000 LoC Lines from 2014 Lines from 2015 Lines from 2016 Lines from 2017
6. Growth 6 350.000 LoC Lines from 2014 Lines from 2015 Lines from 2016 Lines from 2017 Why a pattern •More developers = more code •Lack of a coding conventions / way to do things •Easy to maintain every part of the app •MVP / MVVM don’t fit well for complex screens
7. Pattern Problem 7 ViewModel
8. Pattern problem 8 class FeedViewModel(private val feedRepository: FeedRepository) { val feedObservable = ObservableField<FeedData>() init { feedView.onRefreshListener.subscribe { ... } feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) } } } • A single ViewModel or Presenter doesn’t scale well for complex screens
9. Pattern problem 9 class FeedViewModel(private val feedRepository: FeedRepository) { val feedObservable = ObservableField<FeedData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() init { feedView.onRefreshListener.subscribe { ... } val hasValue = feedRepository.hasValue() feedContentObservable.set(hasValue) shimmerObservable.set(!hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) } } }
10. 10 class FeedViewModel(private val feedRepository: FeedRepository) { val feedObservable = ObservableField<FeedData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() init { feedView.onRefreshListener.subscribe { ... } val hasValue = feedRepository.hasValue() feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) } } }
11. 11 class FeedViewModel(private val feedRepository: FeedRepository) { val feedObservable = ObservableField<FeedData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() init { feedView.onRefreshListener.subscribe { ... } retryObservable.set(false) val hasValue = feedRepository.hasValue() feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } }
12. 12 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() init { feedView.onRefreshListener.subscribe { ... } retryObservable.set(false) var hasValue = feedRepository.hasValue() feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } }
13. 13 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() var hasValue = feedRepository.hasValue() init { feedView.onRefreshListener.subscribe { ... } feedView.retryListener.subscribe { loadFeed() } feedView.bannerRetryListener.subscribe { loadBanners() } } fun loadFeed() { retryObservable.set(false) feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } } fun loadBanners() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } }
14. 14 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() var hasValue = feedRepository.hasValue() init { feedView.onRefreshListener.subscribe { ... } feedView.retryListener.subscribe { loadFeed() } feedView.bannerRetryListener.subscribe { loadBanners() } } fun loadFeed() { retryObservable.set(false) feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } } fun loadBanners() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } } And it goes on
15. 15 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() var hasValue = feedRepository.hasValue() init { feedView.onRefreshListener.subscribe { ... } feedView.retryListener.subscribe { loadFeed() } feedView.bannerRetryListener.subscribe { loadBanners() } } fun loadFeed() { retryObservable.set(false) feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } } fun loadBanners() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } fun addSearch() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } } And it goes on Adding Search
16. 16 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() var hasValue = feedRepository.hasValue() init { feedView.onRefreshListener.subscribe { ... } feedView.retryListener.subscribe { loadFeed() } feedView.bannerRetryListener.subscribe { loadBanners() } } fun loadFeed() { retryObservable.set(false) feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } } fun loadBanners() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } fun addSearch() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } fun paginate() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } } And it goes on Adding Search Pagination
17. 17 class FeedViewModel( private val feedRepository: FeedRepository, private val bannerRepository: BannerRepository ) { val feedObservable = ObservableField<FeedData>() val bannerObservable = ObservableField<BannerData>() val bannerShimmerObservable = ObservableField<BannerData>() val bannerRetryObservable = ObservableField<BannerData>() val feedContentObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() val shimmerObservable = ObservableField<Boolean>() val retryObservable = ObservableField<Boolean>() var hasValue = feedRepository.hasValue() init { feedView.onRefreshListener.subscribe { ... } feedView.retryListener.subscribe { loadFeed() } feedView.bannerRetryListener.subscribe { loadBanners() } } fun loadFeed() { retryObservable.set(false) feedContentObservable.set(hasValue) shimmerObservable.set(! hasValue) feedRepository .getFeed() .map { feedData(it) } .subscribe { feedObservable.set(it) shimmerObservable.set(false) retryObservable.set(false) hasValue = true }, { feedContentObservable.set(false) shimmerObservable.set(false) retryObservable.set(!hasValue) } } fun loadBanners() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it) } else { (. show some toast) } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } fun addSearch() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerRetryObservable.set(false) if (!hasValue) { bannerObservable.set(it } }, { bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } fun paginate() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() .map { bannerData(it) } .subscribe { bannerShimmerObservable.set(false) bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } fun collapse() { bannerShimmerObservable.set(hasValue) bannerRetryObservable.set(false) bannerRepository .getData() bannerShimmerObservable.set(false) if (!hasValue) { bannerRetryObservable.set(true) } else { (. show some toast) } } } } And it goes on Adding Search Pagination Collapsable Toolbar
18. Blocks 18
19. Blocks 18
20. Blocks 18
21. Blocks 18
22. Blocks 19 Search Rewards Banner Card Banner Stats Banner Feed Controller Controller Controller Controller Holder
23. Managers 20 Manager Screen 1 Screen 2 Screen 3 Connector
24. Managers 20 Manager Screen 1 Screen 2 Screen 3 Connector O bservable Observable O bservable Cached Model Cached M odel Cached M odel
25. Managers 20 Manager Screen 1 Screen 2 Screen 3 Refresh Connector O bservable Observable O bservable
26. Managers 20 Manager Screen 1 Screen 2 Screen 3 Connector Request updated model O bservable Observable O bservable
27. Managers 20 Manager Screen 1 Screen 2 Screen 3 Connector New Model O bservable Observable O bservable
28. Managers 20 Manager Screen 1 Screen 2 Screen 3 Connector O bservable Observable O bservable New Model New M odel New M odel
29. Build and tests
30. Test development 22 • ~90 Activities • ~70 Fragments • 5.000 Unit tests • 800 Instrumental tests
31. Environment problem 23 20 min Build time 2.5 Hours Complete CI task
42. Multi services 25 NuConta Squad Rewards Squad Acquisition Squad Bills Squad Main App
43. Multi services 26 NuConta Squad Rewards Squad Acquisition Squad Bills Squad GhostFlame Bonafont Rewards Bills Main App
44. Multi services 26 NuConta Squad Rewards Squad Acquisition Squad Bills Squad GhostFlame Bonafont Rewards Bills Main App
45. React Native
46. React Native 28 • NuConta made all in RN • Every engineer code on this • Same code on both platforms • Easy to learn, fast to code • Great community
47. React Native - Down side 29 • Still pretty new • Increase size of the app and method count • Instrumental tests hard to make • Turn into a library was hard • Mysterious crash and bugs • Abandoned libs
48. Where did it all begin?
49. 33 Analysts / Engineers Customer Service Operations
50. 34 SQUAD SQUAD SQUAD SQUAD SQUAD Company Structure
51. 35 Small startups inside the company
53. Split into business logic •Every squad is empowered to create it’s own part of the app •Decentralized prioritization •Decoupled code •New technologies and spikes possibilites •No start up pain
54. What do we need? •Provide every functionality already existent that has core/shared value •Provide easy solution to start a new project •Bring backend people to front
55. Common Libraries Nubank Android Core
56. Common Libraries Nubank Android Core
57. Common Libraries Nubank Android Core
58. Common Libraries Nubank Android Core
59. Common Libraries Nubank Android Core
60. Common Libraries Nubank Android Core
61. Common Libraries Nubank Android Core
62. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core
63. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
64. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . . What did we gain? •Incredible fast builds (like `new -> Project`) •Smaller and faster test suits •Happiness •Documentation / easy to search and know project structure
65. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
66. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
67. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
68. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
69. Schemata Managers Core Analytics blocks ui http Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . .
70. Common Libraries Nubank Android Core Schemata Managers Core Analytics blocks ui http Help Bonafont NuConta Feed . . . . . . android-app
71. Common Libraries Nubank Android Core Schemata Managers Core Analytics blocks ui http Help Bonafont NuConta Feed . . . . . . android-app What did suffer? •Changes on core features are painful •having to update / communicate changes •Not everybody is working on a fresh new library
72. Common Libraries Nubank Android Core Schemata Managers Core Analytics blocks ui http Help Bonafont NuConta Feed . . . . . . android-app
73. Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . . android-app foundation
74. Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . . . . android-app foundation
75. Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . foundation blankets react-native-common-bridge All JS dependencies Anticipation react-native-central . . . android-app
76. Common Libraries Nubank Android Core Help Bonafont NuConta Feed . . . foundation blankets react-native-common-bridge All JS dependencies Anticipation react-native-central . . . android-app What did suffer (2)? •Changes are still painful •Know how for specific libs bumps •Libraries set loose (no active owners)
77. Gocd Our CI
78. Gocd Slack Integration
79. Gocd Github Integration
80. Gocd Github Integration
81. Gocd Custom Triggers
82. Gocd Our CI
83. Gocd Our CI
84. Gocd Our CI
85. Gocd Our CI
86. Gocd Templates foundation help bonafont
87. Gocd Templates foundation help bonafont
88. Gocd Templates
89. foundation Gocd Testing
90. foundation Gocd Testing
91. https://openstf.io/ Gocd Testing
92. Gocd Testing
93. foundation Gocd Github Release
94. foundation Gocd Github Release
95. Gocd Github Release Command line interface in Kotlin!
96. Gocd Github Release
97. Gocd Github Release
98. Gocd Github Release
99. Gocd Github Release
100. Gocd Github Release
101. Gocd Github Release
102. foundation Gocd Deploy
103. foundation Gocd Deploy
104. Gocd Deploy
105. Gocd Deploy
106. Gocd Deploy
107. foundation Gocd Autobump
108. foundation Gocd Autobump
109. Gocd Autobump
110. Gocd Autobump
111. Gocd Autobump
112. Gocd Autobump
113. Next steps? •Spike on Buck (go back to monorepo approach) •Implement auto merge •Shard UI tests with Flank
114. References •Blocks and Managers • https://speakerdeck.com/thalescm/blocks-and-managers-adc-brazil-2017 • https://www.youtube.com/watch?v=Vgbe52XJkNU •Backend controlled by the frontend (Bonafont) • https://speakerdeck.com/thalescm/frontend-controlled-by-the-backend
115. Contacts Thales Machado thalescm @ speaker deck thalescm @ Github thalescm @ Android Dev Br (slack) thalescm @ Android Study Group (slack) Ygor Barboza ygorbarboza @ Github ygorbarboza @ Android Dev Br (slack) ygorbarboza @ Android Study Group (slack)