building component-driven uis at spotify

Building component-driven UIs at Spotify

John SundellLead iOS developer@johnsundell

Music streaming service

100+ million users

100+ mobile developers

~100,000 commits on iOS

We ❤We build a lot of UI Experimenting

Optimizing for experimentation

UI should be easy to changeCode needs to be dynamicBuilding new UIs should be fastWant to launch & learn as quick as possible

What’s the problem?

Card Backend

Feature

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

Always building UIs from scratch made us slow and inflexible

Most of the time, we write code to render a state and to handle events from state changes

Playlists

Links

Genres

"Navigate

Header

Navigate

"

Playlists

"

Playlists

Links

Genres

State

Render

Respond

Navigate

Selection

UI = fn(state)

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

State State State State State

Rendering & event handling

UICollectionView

protocol Component {var view: UIView? { get }

func loadView()

}func configureWithModel(model: ComponentModel)

UICollectionView

var preferredViewSize: CGSize { get }var layoutTraits: [LayoutTrait] { get }

UICollectionViewLayout

EntityCard[CompactWidth]

CategoryCard[CompactWidth]

Carousel[FullWidth, Stackable]

NavigationRow[FullWidth, Stackable]

SectionHeader[FullWidth, Divider]

UI = fn(state)

state = json

json = backend

UI = fn(backend)

DEMO

Component-driven UIComponents have built-in reusability

UI as a function of stateState can be loaded from backendWe can now quickly iterate on UI

This is just the beginning ;)

@johnsundell