Can you have a full-featured UI on web and native and iterate quickly at the same time? In this talk, learn how we designed a server-driven UI framework for web, iOS, and Android that allows us to launch new features across web and native with a simple backend change.

1. Rapidlyiteratingacross
platformsusing
server-drivenUI
LAURA KELLY

2. • Android Engineer
• Previously front-end web
• Trips team
• Itinerary, reservations, and trip planning
• Powerlifter
• Whiskey connoisseur
WhoIam

3. Airbnbisaddingnewproductsallthetime
Homes

4. Airbnbisaddingnewproductsallthetime
Homes Experiences

5. Airbnbisaddingnewproductsallthetime
Homes Experiences Restaurants

6. Airbnbisaddingnewproductsallthetime
Homes Experiences Restaurants Coworking Spaces

7. Homes Experiences Restaurants Coworking Spaces
Wewererebuildingnearlythe
samescreen,
multiplyingoureffortsacross
thecodebase

9. …andacrossplatforms

10. There’sgottobeabetterway.

11. Whatwouldanidealsystembe?

12. Easytounderstand

13. Flexibletoadapttodesigners

14. Abletolaunchwithoutanew
PlayStore/AppStorerelease

15. Minimizerepetition

16. Easytomaintain

18. ?

19. Server-drivenUI

20. Whatisserver-drivenUI?
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_title_subtitle“,
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
ExampleAPIresponse

21. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse

22. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse

23. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse

24. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
@JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name = “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
APIResponse
AndroidCode

25. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name = “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode

26. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name = “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode

27. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name = “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode

28. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
export default {
'row:header_subtitle_title': HeaderSubtitleTitleRow,
'row:action': ActionRow,
'row:poi_map': MapRow,
. . .
}
ReactWebCode
APIResponse

29. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
export default {
'row:header_subtitle_title': HeaderSubtitleTitleRow,
'row:action': ActionRow,
'row:poi_map': MapRow,
. . .
}
APIResponse
ReactWebCode

30. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
@JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name= “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
APIResponse
AndroidCode
UIRendering

31. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name= “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode
UIRendering

32. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name= “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode
UIRendering

33. @JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name= “row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
})
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
APIResponse
AndroidCode
UIRendering

34. {
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
API RESPONSE
Howitworks
@JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name=“row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
}
UI RENDERING
FRAMEWORK
(React or Epoxy)

35. Howitworks
{
"type": "place",
"id": "123",
"marquee": {
"type": "marquee:image",
"image_urls": [ "sightglassImage.png” ]
},
"rows": [
{
"type": “row:header_subtitle_title",
"title": "Sightglass Coffee",
"starts_at": “Sun, Sept 24, 7:00 PM"
},
{
"type": "row:action",
"actions": [ /* ... actions here */ ]
},
{
"type": "row:poi_map",
"address": "1234 Main Street"
}
]
}
API RESPONSE
@JsonSubTypes({
@JsonSubTypes.Type(
value = HeaderSubtitleTitleRowDataModel.class,
name = “row:header_subtitle_title"
),
@JsonSubTypes.Type(
value = ActionRowDataModel.class,
name=“row:action"
),
@JsonSubTypes.Type(
value = POIMapRowDataModel.class,
name = “row:poi_map”
),
. . .
}
UI RENDERING
FRAMEWORK
(React or Epoxy)

36. Bonusesthatcamewiththissystem

37. Buildonce

38. Easilyaccommodateschangingminds

39. ReuseexistingUIcomponentlibraries

40. Iterate,reconfigure,andexperiment
onourowntime

41. • Think about your use case
• Think about platform differences early on
• Know your limits
Tipsforbuildingouta
server-drivenUIsystem

42. • Mobile-forward companies keen on visual
consistency
• Repetition, and lots of it!
• Limited client-side engineers
• You want to launch on all platforms at the
same time
• Teams that communicate well
Whoshould Whoshouldn’t

43. Whoshould
• No native app
• Product looks different across platforms and
devices
• Unique screens, minimal visual overlap
Whoshouldn’t
• Mobile-forward companies keen on visual
consistency
• Repetition, and lots of it!
• Limited client-side engineers
• You want to launch on all platforms at the
same time
• Teams that communicate well

45. THANKS
LAURA KELLY