Slides from my "Building component-driven UIs at Spotify" talk that I gave at UIMobiTech in Dnipro, Ukraine in July 2016. The talk covered how Spotify has moved to an architecture where most UIs are build declaratively using a component-driven approach.

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 easyto 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
CreateView Controller
Setup containerview
Register card
Load data
Handle offline
Backend request
Parse response
Handle errors ortimeouts
Caching
Bind data to cards
Handle highlights & selection
IntegrateView Controllerwith the rest ofthe app
Wait forthe next binary release

8. Always building UIs from scratch
made us slow and inflexible

9. Most ofthe 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