"Building component-driven UIs at Spotify" from John Sundell

Spotify is changing the way its building its mobile apps for iOS & Android. To be able to move faster than ever before; the company is now building most of its UIs in a component-driven, declarative way - most of which also have their layout driven from the backend. In this talk, John will give you a deep-dive into Spotify's new UI architecture, how it gives their app a lot more flexibility, makes testing & personalization easier, and how this kind of architecture can be applied on other apps - of any size.

Transcript

1. Building component-driven UIs at Spotify John Sundell Lead iOS developer @johnsundell
2. Music streaming service 100+ million users 100+ mobile developers ~100,000 commits on iOS
3. We ❤ We build a lot of UI Experimenting
4. Optimizing for experimentation UI should be easy to change Code needs to be dynamic Building new UIs should be fast Want to launch & learn as quick as possible
5. What’s the problem?
6. Card Backend Feature
7. Card Backend Feature Create View Controller Setup container view Register card Load data Handle offline Backend request Parse response Handle errors or timeouts Caching Bind data to cards Handle highlights & selection Integrate View Controller with the rest of the app Wait for the next binary release
8. Always building UIs from scratch made us slow and inflexible
9. Most of the time, we write code to render a state and to handle events from state changes
10. Playlists Links Genres " Navigate
11. Header Navigate " Playlists
12. " Playlists Links Genres State Render Respond Navigate Selection
13. UI = fn(state)
14. View Model Playlists Links Genres State Albums Artists Shared data model Component Model Component Model Component Model Component Model Component Model Component Model Render Components
15. State State State State State Rendering & event handling
16. UICollectionView
17. protocol Component { var view: UIView? { get } func loadView() } func configureWithModel(model: ComponentModel) UICollectionView var preferredViewSize: CGSize { get } var layoutTraits: [LayoutTrait] { get } UICollectionViewLayout
18. EntityCard [CompactWidth] CategoryCard [CompactWidth] Carousel [FullWidth, Stackable] NavigationRow [FullWidth, Stackable] SectionHeader [FullWidth, Divider]
19. UI = fn(state) state = json json = backend
20. UI = fn(backend)
21. DEMO
22. Component-driven UI Components have built-in reusability UI as a function of state State can be loaded from backend We can now quickly iterate on UI
23. This is just the beginning ;)
24. @johnsundell