Slides from my talk at App Builders in Zürich, April 26th 2016, about how we at Spotify are utilizing backend-driven component-based UIs to move fast.

1. Dynamic, native,
backend-driven UIs
John Sundell
Lead iOS Developer
@johnsundell

2. Dynamic
Native
Backend-driven

3. “What ifwe changed
this list to a grid?”

4. Layout changes
Content changes
A/B testing
Ship fast

5. Changing our UI and
content was too slow

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
Cache
Bind data to cards
Handle highlights & selection
IntegrateView Controllerwith the rest ofthe app

8. Card Backend
Feature
Components
Content providers

9. {
“id”: “b2ks8shS”,
“name”: “Indie Highlights”,
“followers”: 55
}
{
“component”: “card”,
“title”: “Indie Highlights”,
“subtitle”: “55 FOLLOWERS”,
“uri”: “spotify:playlist:b2ks8shS”
}
Playlist ComponentModel
Data binding
Not reusable Reusable

10. “card”
“card”
“components”: [
{
“component”: “card”
…
},
{
“component”: “card”
…
},
{
“component”:
…
},
{
“component”:
…
}
]
View Model

11. “components”: [
{
“component”: “card”
…
},
{
“component”: “card”
…
},
{
“component”:
…
},
{
“component”:
…
}
]
“row”
“row”
View Model

12. Component driven
UI development

13. Built-in reusability

14. Content providers

15. View URI
spotify:playlist:b2ks8shS
[UIApplication openURL:]

16. View URI
spotify:playlist:b2ks8shS
Content Provider
Registry
Content
provider
Content
provider
Content
provider

17. View Model
Builder
Content
provider
Content
provider
Content
provider
Core data
models
Cached dataBackend

18. View Model
Builder
Content
provider
Content
provider
Content
provider
Core data
models
Cached dataBackend
JSON

19. View Model
Builder
Content
provider
Content
provider
Content
provider
Core data
models
Cached dataBackend
JSON Code

20. View Model
Builder
Content
provider
Content
provider
Content
provider
Core data
models
Cached dataBackend
JSON Code Code / JSON

21. View Model
Builder
Content
provider
Content
provider
Content
provider
Core data
models
Cached dataBackend
JSON Code Code / JSON
View
model

22. View model
Component
Models
Components
/ Views
Content

23. Content driven
architecture

24. Layout

25. Carousel
Navigation row
Section header
Category card
Entity card
UICollectionView
Layout traits: [Full width]
Layout traits: [Full width, Stackable]
Layout traits: [Full width, Divider]
Layout traits: [Compact width]
Layout traits: [Compact width]

26. This is just the beginning ;)

27. @johnsundell
Thank you! :)