building component-driven uis at spotify

24
Building component-driven UIs at Spotify John Sundell Lead iOS developer @johnsundell

Upload: john-sundell

Post on 08-Jan-2017

380 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Building component-driven UIs at Spotify

Building component-driven UIs at Spotify

John SundellLead iOS developer@johnsundell

Page 2: Building component-driven UIs at Spotify

Music streaming service

100+ million users

100+ mobile developers

~100,000 commits on iOS

Page 3: Building component-driven UIs at Spotify

We ❤We build a lot of UI Experimenting

Page 4: Building component-driven UIs at Spotify

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

Page 5: Building component-driven UIs at Spotify

What’s the problem?

Page 6: Building component-driven UIs at Spotify

Card Backend

Feature

Page 7: Building component-driven UIs at Spotify

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

Page 8: Building component-driven UIs at Spotify

Always building UIs from scratch made us slow and inflexible

Page 9: Building component-driven UIs at Spotify

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

Page 10: Building component-driven UIs at Spotify

Playlists

Links

Genres

"Navigate

Page 11: Building component-driven UIs at Spotify

Header

Navigate

"

Playlists

Page 12: Building component-driven UIs at Spotify

"

Playlists

Links

Genres

State

Render

Respond

Navigate

Selection

Page 13: Building component-driven UIs at Spotify

UI = fn(state)

Page 14: Building component-driven UIs at Spotify

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

Page 15: Building component-driven UIs at Spotify

State State State State State

Rendering & event handling

Page 16: Building component-driven UIs at Spotify

UICollectionView

Page 17: Building component-driven UIs at Spotify

protocol Component {var view: UIView? { get }

func loadView()

}func configureWithModel(model: ComponentModel)

UICollectionView

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

UICollectionViewLayout

Page 18: Building component-driven UIs at Spotify

EntityCard[CompactWidth]

CategoryCard[CompactWidth]

Carousel[FullWidth, Stackable]

NavigationRow[FullWidth, Stackable]

SectionHeader[FullWidth, Divider]

Page 19: Building component-driven UIs at Spotify

UI = fn(state)

state = json

json = backend

Page 20: Building component-driven UIs at Spotify

UI = fn(backend)

Page 21: Building component-driven UIs at Spotify

DEMO

Page 22: Building component-driven UIs at Spotify

Component-driven UIComponents have built-in reusability

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

Page 23: Building component-driven UIs at Spotify

This is just the beginning ;)

Page 24: Building component-driven UIs at Spotify

@johnsundell