Download - 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