App Architectures: Remixed (early EE edition)

Many apps support multiple “themes”, but some need the ability to be remixed with specialised flows and feature sets, while reusing as much as possible.

When layouts, flows and business logic live in View Controllers, it’s difficult to do this well. But a combination of Coordinators and Clean architecture make remixed apps not just possible, but straightforward and easy to test too.

Dan Cutting guides us through the techniques they're applying at Schibsted to achieve highly flexible, well tested mobile software using the 'Remix' approach.

Transcript

1. ed App Architectures @dcutting cutting.io Dan Cutting Schibsted
2. Who? • Biggest Internet company
 you’ve never heard of • Media & marketplaces • 260 million users • I’m an iOS developer and technical lead for one of our teams
3. –Uncle Bob “The goal of software architecture is to minimize the human resources required to build and maintain the required system” Clean Architecture
4. REP CCP CRP
5. Break it down REP CCP CRP Remix it Build it up
6. So “architecture” is… • contextual • different teams, constraints, goals • a journey • it will change over time
7. MVC
8. MVC MVVM VIPER
9. MVC MVVM VIPER
10. Our app
11. Our app context tests
12. Marketplaces
14. 2015 2016 2017 Now Developers 0 3 6 9 12 Timeline
15. Break it down, build it up, remix it
16. A tale of 2 teams
17. • Buyer Team wants to make browsing ads fun A tale of 2 teams
18. • Buyer Team wants to make browsing ads fun • Seller Team wants to make managing ads easy A tale of 2 teams
19. • Buyer Team wants to make browsing ads fun • Seller Team wants to make managing ads easy • Mostly separate goals A tale of 2 teams
20. • Buyer Team wants to make browsing ads fun • Seller Team wants to make managing ads easy • Mostly separate goals • Mostly separate parts of the code A tale of 2 teams
21. • Buyer Team wants to make browsing ads fun • Seller Team wants to make managing ads easy • Mostly separate goals • Mostly separate parts of the code • …mostly A tale of 2 teams
22. Ad List VC Ad Detail VC Happy Buyer Team
23. Ad Detail VC Ad Edit VC Ad List VC Glorious Seller Team Edit Gateway
24. Ad Detail VC Ad Edit VC Ad List VC Browse Flow Flow coordinators Edit Gateway
25. Buyer Ad Detail VC Ad Edit VC Ad List VC Browse Flow Seller Ad Detail VC Common
 Ad Detail
26. Ad List VC Browse Flow Intrepid Shop Team Shop Flow App
27. Ad List VC Browse Flow Shop Flow App Shop Badge Intrepid Shop Team
28. Ad List VC Browse Flow Intrepid Shop Team Shop Flow App Ad List
 Decorator Shop Badge
 Decorator
29. Marketplace B App List Browse
 Flow Card Browse Flow Ad Detail VC Ad List VC Ad Cards VC Custom UX Marketplace A App
30. App List Browse
 Flow Card Browse Flow Ad Detail VC Ad List VC Ad Cards VC A/B Browse
 Flow A/B testing
32. What have we learnt?
33. What have we learnt? • Too much negotiation? Break it down!
34. What have we learnt? • Too much negotiation? Break it down! • Too much overhead? Build it up!
35. What have we learnt? • Too much negotiation? Break it down! • Too much overhead? Build it up! • Reuse gives you wings
36. What have we learnt? • Too much negotiation? Break it down! • Too much overhead? Build it up! • Reuse gives you wings • But it implies dependencies
37. What have we learnt? • Too much negotiation? Break it down! • Too much overhead? Build it up! • Reuse gives you wings • But it implies dependencies • Optimise out-of-band
38. Test (1, 2)
39. –Paul Stringer Use it!
40. Loading Sirius
 Canopus
 Arcturus Could not
 load star < Sirius < Brightest star
 in the sky
41. Loading Sirius
 Canopus
 Arcturus Could not
 load star < Sirius < Brightest star
 in the sky Demo
42. App User Web
43. UI layout UI flow Network gateway User Web Important code More important code
44. UI layout UI flow Spies Network gateway Stubs Important code More important code
45. UI layout UI flow Spies Network gateway Stubs Important code More important code Acceptance tests & fixtures
46. View View Data Views
47. View View Controller View Data Views
48. View View Controller View Data View Spy Views
49. Navigator Navigation
50. Navigator UINavigation Controller Navigation
51. Navigator UINavigation Controller Navigator Fake Navigation
52. App Browse Flow Gateway List VC Detail VC UI flow Spies Stubs Important code
53. Fixture Browse Flow Gateway List Spy Detail Spy UI flow Spies Stubs Important code
54. Fixture Browse Flow Gateway Stub List Spy Detail Spy UI flow Spies Stubs Important code
55. Fixture Browse Flow Gateway Stub List Spy Detail Spy UINavigation Controller UI flow Spies Stubs Important code
56. UINavigation Controller Fixture Browse Flow Gateway Stub List Spy Detail Spy Navigator Fake UI flow Spies Stubs Important code
57. Xcode
58. Coda • Should every app be written like this? • Probably not: architecture should support your goals • But maybe every app should follow similar principles
59. Break it down, build it up, remix it
60. Test
61. ed App Architectures https://github.com/dcutting/Remix @dcutting cutting.io Dan Cutting Schibsted