dynamic, native, backend-driven uis - app builders 2016
TRANSCRIPT
Dynamic, native, backend-driven UIs
John Sundell
Lead iOS Developer@johnsundell
Dynamic Native
Backend-driven
“What if we changed this list to a grid?”
Layout changesContent changes
A/B testingShip fast
Changing our UI and content was too slow
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
Cache
Bind data to cards
Handle highlights & selection
Integrate View Controller with the rest of the app
Card Backend
Feature
Components
Content providers
{
“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”: … } ]
View Model
“components”: [ { “component”: “card” … }, { “component”: “card” … }, { “component”: … }, { “component”: … } ]
“row”
“row”
View Model
Component driven UI development
Built-in reusability
Content providers
View URI
spotify:playlist:b2ks8shS
[UIApplication openURL:]
View URI
spotify:playlist:b2ks8shS
Content Provider Registry
Content provider
Content provider
Content provider
View Model Builder
Content provider
Content provider
Content provider
Core data models Cached dataBackend
View Model Builder
Content provider
Content provider
Content provider
Core data models Cached dataBackend
JSON
View Model Builder
Content provider
Content provider
Content provider
Core data models Cached dataBackend
JSON Code
View Model Builder
Content provider
Content provider
Content provider
Core data models Cached dataBackend
JSON Code Code / JSON
View Model Builder
Content provider
Content provider
Content provider
Core data models Cached dataBackend
JSON Code Code / JSON
View model
View model Component Models
Components / Views Content
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]
This is just the beginning ;)
@johnsundell
Thank you! :)