backend-driven native uis
TRANSCRIPT
Backend-driven native UIs
John Sundell
Lead iOS Developer@johnsundell
100% Native
Backstory
“What if we changed this list to a grid?”
“We need to ship this feature in the next release because we have
an event in 2 months!”
“We want to A/B test 5 different ways of displaying this
content over the next week.”
Delivery time
= Development time + Release timeDelivery time
UI development is slow
Idea Finished UI In hands of your users
Card Backend
Feature
Card Backend
Feature
Create View Controller / Fragment
Setup container view
Register card
Load data
Handle offline
Backend request
Parse response
Handle errors or timeouts
Cache
Bind data to cards
Handle highlights & selection
Integrate View Controller / Fragment with the rest of the app
Card Backend
Feature
Define data sources
Register data sources
{
“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
“card”
“card”
“components”: [ { “component”: “card” … }, { “component”: “card” … }, { “component”: … }, { “component”: … } ]
“row”
“components”: [ { “component”: “card” … }, { “component”: “card” … }, { “component”: … }, { “component”: … } ]
“row”
Models
iOS app Android app
Backend
Logic
Models
iOS app Android app
BackendLogic
View models
Components
CMS
Database
Syncing
Component driven UI development
Built-in reusability
View models in the backend
Content driven architecture
Layout?
Carousel
Navigation row
Section headerCategory 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]
Demo
