dynamic, native, backend-driven uis - app builders 2016

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! :)