Droidcon SF 2018: Rapidly Iterating Across Platforms Using Server-Driven UI

Transcript

1. Rapidly iterating across platforms using server-driven UI Laura Kelly @heylaurakelly
2. • Android Engineer @ Airbnb • Previously front-end web • Trip platform team • Powerlifter • Whiskey connoisseur @heylaurakelly Who I am
3. 1. The problem: iterative, cross-platform products 2. Why server-driven UI fit the bill 3. Deep-dive into Android implementation 4. Case studies from Airbnb @heylaurakelly Outline
4. @heylaurakelly Airbnb is adding new products all the time Homes
5. @heylaurakelly Airbnb is adding new products all the time Homes Experiences
6. @heylaurakelly Airbnb is adding new products all the time Homes Experiences Restaurants
7. @heylaurakelly Airbnb is adding new products all the time Homes Experiences Restaurants Coworking Spaces
8. @heylaurakelly Homes Experiences Restaurants Coworking Spaces We were rebuilding nearly the same screen, multiplying our efforts across the codebase
9. @heylaurakelly
10. …and across platforms @heylaurakelly
11. There’s got to be a better way @heylaurakelly
12. WHAT WOULD AN IDEAL SYSTEM LOOK LIKE? @heylaurakelly
13. Easy to understand @heylaurakelly
14. Flexible to adapt to designers @heylaurakelly
15. Launch without a Play Store release @heylaurakelly
16. Minimize repetition @heylaurakelly
17. Easy to maintain @heylaurakelly
18. SERVER-DRIVEN UI @heylaurakelly
19. @heylaurakelly
20. Example API response @heylaurakelly {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls": [ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 },
 {
 "type": "row:map",
 "address": "1234 Main Street"
 }
 ]
 }
21. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls": [ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 },
 {
 "type": "row:map",
 "address": "1234 Main Street"
 }
 ]
 } @heylaurakelly API Response
22. pol·y·mor·phism the provision of a single interface to entities of different types @heylaurakelly
23. LinkRow { id, type, deeplink } ActionRow { id, type, actions } CarouselRow { id, type, imageUrls} MapRow { id, type, lat, long } Row { id, type } @heylaurakelly
24. LinkRow { id, type, deeplink } ActionRow { id, type, actions } CarouselRow { id, type, imageUrls} MapRow { id, type, lat, long } Row { id, type } @heylaurakelly
25. LinkRow { id, type, deeplink } ActionRow { id, type, actions } CarouselRow { id, type, imageUrls} MapRow { id, type, lat, long } Row { id, type } @heylaurakelly
26. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response @heylaurakelly
27. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response @heylaurakelly @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models
28. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response @heylaurakelly @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models
29. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response @heylaurakelly @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models
30. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response @heylaurakelly Frontend Web Code export default { 'row:carousel': CarouselRow, 'row:title': TitleRow, 'row:action': ActionRow, . . .
 }
31. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly
32. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly
33. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly
34. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly
35. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly Rendering Framework Carousel Title Row Action Row
36. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly Rendering Framework Title Row Action Row Map Row
37. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering @heylaurakelly Rendering Framework Title Row Action Row Map Row
38. BENEFITS WE SAW AFTER BUILDING THE SYSTEM @heylaurakelly
39. Build once @heylaurakelly
40. Easily accommodates changing minds @heylaurakelly
41. Reuse existing UI component libraries @heylaurakelly
42. Iterate, reconfigure, and experiment on our own time @heylaurakelly
43. ANDROID DEEP DIVE @heylaurakelly
44. JSON 1. JSON from server @heylaurakelly
45. JSON ArrayList<Row> rows( ) 1. JSON from server 2. Parse network response @heylaurakelly
46. JSON ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes @heylaurakelly
47. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models @heylaurakelly
48. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models 5. Render components @heylaurakelly
49. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models 5. Render components @heylaurakelly
50. @AutoValue @JsonDeserialize(builder = AutoValue_Reservation.Builder.class) public abstract class Reservation { @JsonProperty public abstract String primary_key(); @JsonProperty public abstract ArrayList<RowDataModel> rows(); ... } 2. Parse network response @heylaurakelly
51. @AutoValue @JsonDeserialize(builder = AutoValue_Reservation.Builder.class) public abstract class Reservation { @JsonProperty public abstract String primary_key(); @JsonProperty public abstract ArrayList<RowDataModel> rows(); ... } 2. Parse network response @heylaurakelly
52. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models 5. Render components @heylaurakelly
53. @heylaurakelly @JsonTypeInfo(...) @JsonSubTypes({ @JsonSubTypes.Type(value = LinkRowDataModel.class, name = "row:link"), @JsonSubTypes.Type(value = MapRowDataModel.class, name = "row:map"), @JsonSubTypes.Type(value = TitleRowDataModel.class, name = “row:title”), @JsonSubTypes.Type(value = HostAvatarRowDataModel.class, name = “row:host_avatar”) ... }) public interface RowDataModel extends Parcelable { ... } 3. Parse row subtypes
54. @heylaurakelly @JsonTypeInfo(...) @JsonSubTypes({ @JsonSubTypes.Type(value = LinkRowDataModel.class, name = "row:link"), @JsonSubTypes.Type(value = MapRowDataModel.class, name = "row:map"), @JsonSubTypes.Type(value = TitleRowDataModel.class, name = “row:title”), @JsonSubTypes.Type(value = HostAvatarRowDataModel.class, name = “row:host_avatar”) ... }) public interface RowDataModel extends Parcelable { ... } 3. Parse row subtypes
55. @JsonTypeInfo(...) @JsonSubTypes({ @JsonSubTypes.Type(value = LinkRowDataModel.class, name = "row:link"), @JsonSubTypes.Type(value = MapRowDataModel.class, name = "row:map"), @JsonSubTypes.Type(value = TitleRowDataModel.class, name = “row:title”), @JsonSubTypes.Type(value = HostAvatarRowDataModel.class, name = “row:host_avatar”) ... }) public interface RowDataModel extends Parcelable { ... } 3. Parse row subtypes @heylaurakelly
56. @JsonTypeInfo(...) @JsonSubTypes({ @JsonSubTypes.Type(value = LinkRowDataModel.class, name = "row:link"), @JsonSubTypes.Type(value = MapRowDataModel.class, name = "row:map"), @JsonSubTypes.Type(value = TitleRowDataModel.class, name = “row:title”), @JsonSubTypes.Type(value = HostAvatarRowDataModel.class, name = “row:host_avatar”) ... }) public interface RowDataModel extends Parcelable { ... } 3. Parse row subtypes @heylaurakelly
57. @AutoValue @JsonDeserialize(builder = AutoValue_LinkRowDataModel.Builder.class) @JsonTypeName("row:link") public abstract class LinkRowDataModel implements RowDataModel { @JsonProperty public abstract String id(); @JsonProperty public abstract String title(); @JsonProperty public abstract String app_url(); @JsonProperty public abstract String loggingId(); ... } 3. Parse row subtypes @heylaurakelly
58. @AutoValue @JsonDeserialize(builder = AutoValue_LinkRowDataModel.Builder.class) @JsonTypeName("row:link") public abstract class LinkRowDataModel implements RowDataModel { @JsonProperty public abstract String id(); @JsonProperty public abstract String title(); @JsonProperty public abstract String app_url(); @JsonProperty public abstract String loggingId(); ... } 3. Parse row subtypes @heylaurakelly
59. @AutoValue @JsonDeserialize(builder = AutoValue_LinkRowDataModel.Builder.class) @JsonTypeName("row:link") public abstract class LinkRowDataModel implements RowDataModel { @JsonProperty public abstract String id(); @JsonProperty public abstract String title(); @JsonProperty public abstract String app_url(); @JsonProperty public abstract String loggingId(); ... } 3. Parse row subtypes @heylaurakelly
60. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models 5. Render components @heylaurakelly
61. Render with Epoxy https://github.com/airbnb/epoxy An open source library for building complex screens in a RecyclerView
62. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun RowDataModel.buildModel() { when (this) { is LinkRowDataModel -> buildModel() is MapRowDataModel -> buildModel() is TitleRowDataModel -> buildModel() is HostAvatarRowDataModel -> buildModel() } } } 4. Configure UI Models with Epoxy @heylaurakelly
63. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun LinkRowDataModel.buildModel() = basicRow { id(this@buildModel.id()) title(title()) onClickListener(navigationContoller.navigateToDeeplink(app_url())) } } 4. Configure UI Models with Epoxy @heylaurakelly
64. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun LinkRowDataModel.buildModel() = basicRow { id(this@buildModel.id()) title(title()) onClickListener(navigationContoller.navigateToDeeplink(app_url())) } } 4. Configure UI Models with Epoxy @heylaurakelly
65. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun LinkRowDataModel.buildModel() = basicRow { id(this@buildModel.id()) title(title()) onClickListener(navigationContoller.navigateToDeeplink(app_url())) } } 4. Configure UI Models with Epoxy @heylaurakelly
66. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun LinkRowDataModel.buildModel() = basicRow { id(this@buildModel.id()) title(title()) onClickListener(navigationContoller.navigateToDeeplink(app_url())) } } 4. Configure UI Models with Epoxy @heylaurakelly
67. class ReservationEpoxyController : TypedAirEpoxyController<Reservation>() { ... private fun LinkRowDataModel.buildModel() = basicRow { id(this@buildModel.id()) title(title()) onClickListener(navigationContoller.navigateToDeeplink(app_url())) } } 4. Configure UI Models with Epoxy @heylaurakelly
68. JSON ReservationController ReservationFragment ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes 4. Configure UI models 5. Render components @heylaurakelly
69. {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls": [ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 },
 {
 "type": "row:map",
 "address": "1234 Main Street"
 }
 ]
 } @heylaurakelly
70. SERVER-DRIVEN SYSTEMS ACROSS AIRBNB @heylaurakelly
71. @heylaurakelly
72. BUILDING FORMS IS SIMPLE, RIGHT? @heylaurakelly
73. What’s so hard about building a user flow? @heylaurakelly
74. What’s so hard about building a user flow? @heylaurakelly
75. What’s so hard about building a user flow? @heylaurakelly
76. What’s so hard about building a user flow? @heylaurakelly
77. Branching Logic @heylaurakelly
78. Experimentation Control Treatment @heylaurakelly
79. Experimentation Control Treatment @heylaurakelly
80. Client-side logic @heylaurakelly
81. Wall-E JSON Payload Components Ordered list of screens Includes conditions for validation Questions Includes conditions for validation Answers Can be pre- populated, previously answered, or empty @heylaurakelly
82. API Response @heylaurakelly
83. API Response "questions": [ { "id": "sample_bool_question", "type": "BOOL" } ] @heylaurakelly
84. API Response "components": [ { "id": "doc_marquee", "phraseIdPrimary": "doc_marquee_title", "type": "DOCUMENT_MARQUEE" }, { "id": "sample_switch", "phraseIdPrimary": "switch_title", "questionId": "sample_bool_question", "type": "SWITCH_ROW" } ],
85. API Response "steps": [ { "componentIds": [ "doc_marquee", "sample_switch" ], "id": "initial_step", "nextButton": { "disabled": { "questionId": "sample_bool_question", "type": "ANSWER_EQUALS", "value": "false" } } } ], @heylaurakelly
86. API Response "settings": { "afterSubmitted": { "redirectUrl": "https://www.airbnb.com/superhost", "primaryButton": { "webHref": "https://www.airbnb.com/superhost" }, } } @heylaurakelly
87. NAVIGATING BETWEEN SCREENS @heylaurakelly
88. @heylaurakelly Hide and show steps based on state
89. @heylaurakelly Hide and show steps based on state
90. @heylaurakelly Hide and show steps based on state
91. LONA DYNAMIC UI @heylaurakelly
92. Scaling server-driven UI to hundreds of developers, sustainably. @heylaurakelly
93. Lona Dynamic UI @heylaurakelly
94. Lona Dynamic UI A unified format for views @heylaurakelly
95. Lona Dynamic UI A unified format for views Backend tooling to enforce the format @heylaurakelly
96. Lona Dynamic UI A unified format for views Backend tooling to enforce the format Client frameworks to render views @heylaurakelly
97. A UNIFIED FORMAT FOR DESCRIBING VIEWS @heylaurakelly
98. Design Language System @heylaurakelly
99. A sample Lona response { "id": "1", "type": "BasicRow", "params": { "content": { "title": "Paris", "subtitle": "Tap to search in Paris" }, "actions": { "onPress": { "case": "deepLink", "data": "airbnb://d/search?query=Paris" } } } } @heylaurakelly
100. BACKEND TOOLING TO ENFORCE THE FORMAT @heylaurakelly
101. • Kotlin design-specific language (DSL) • The spec being in Kotlin makes it very easy to build tooling off of The Lona spec @heylaurakelly
102. The Lona spec Backend Service Lona Validation @heylaurakelly
103. CLIENT FRAMEWORKS TO RENDER VIEWS @heylaurakelly
104. // Can also be of type JSONObject val json: String = ... Lona on Android @heylaurakelly
105. // Can also be of type JSONObject val json: String = ... // This is where the magic happens val models: List<EpoxyModel<*>> = LonaFile.make(json).makeModels() Lona on Android @heylaurakelly
106. // Can also be of type JSONObject val json: String = ... // This is where the magic happens val models: List<EpoxyModel<*>> = LonaFile.make(json).makeModels() // Ready to be used in a controller, for example val controller = SimpleEpoxyController().apply { setModels(models) } Lona on Android @heylaurakelly
107. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Data Models {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response UI Rendering Rendering Framework Carousel Title Row Action Row @heylaurakelly
108. @JsonSubTypes({ @JsonSubTypes.Type( value = CarouselDataModel.class, name = “row:carousel” ), @JsonSubTypes.Type( value = TitleRowDataModel.class, name = “row:title” ), @JsonSubTypes.Type( value = ActionRowDataModel.class, name = “row:action" ) . . .
 }) Map to Views + Render {
 "type": "place",
 "id": "123",
 "rows": [ {
 "type": "row:carousel",
 "image_urls":[ "sightglassImage.png” ]
 },
 {
 "type": “row:title“,
 "title": "Sightglass Coffee",
 "starts_at": “Sun, Sept 24, 7:00 PM"
 },
 {
 "type": "row:action",
 "actions": [ /* ... actions here */ ]
 } ...
 ]
 } API Response Carousel Title Row Action Row @heylaurakelly
109. CODEGEN @heylaurakelly
110. Custom deserializer for building Epoxy models @heylaurakelly
111. public class BasicRowModel_ ... { public static BasicRowModel_ make(JSONObject json) { try { JSONObject params = json.getJSONObject(“params”); JSONObject content = params.getJSONObject(“content"); BasicRowModel_ model = new BasicRowModel_() // There should always be an id .id(json.getString("id")) .title(content.getString("title")) .onClickListener(clickListener); // Optional attributes if (content.has("subtitle")) { model.subtitleText(content.optString("subtitle")); } Custom deserializer for building Epoxy models @heylaurakelly
112. Custom deserializer for building Epoxy models public class BasicRowModel_ ... { public static BasicRowModel_ make(JSONObject json) { try { JSONObject params = json.getJSONObject(“params”); JSONObject content = params.getJSONObject(“content"); BasicRowModel_ model = new BasicRowModel_() // There should always be an id .id(json.getString("id")) .title(content.getString("title")); // Optional attributes if (content.has("subtitle")) { model.subtitleText(content.optString("subtitle")); } @heylaurakelly
113. • Lona has an extensive set of test JSON responses • They’re generated directly from the Lona spec • The test JSON responses are stubbed into client CI tests • Changes to clients and the spec are rigorously tested automatically in CI Codegen for continuous integration testing @heylaurakelly
114. DIFFERENT LEVELS OF INTEGRATION @heylaurakelly
115. Lona Dynamic UI A unified format for views Backend tooling to enforce the format Client frameworks to render views @heylaurakelly
116. Lona Dynamic UI Wall E backend service Wall E client A unified format for views @heylaurakelly
117. • A single component in a screen rendered by a non-Lona system • A full screen rendered by Lona • A set of screens rendered by Lona Levels of integration on the client @heylaurakelly
118. VERSIONING @heylaurakelly
119. 1. Build the initial system and components 2. Add new components and properties 3. Push the changes to a new app version 4. turn on the API changes Versioning Some users don’t update @heylaurakelly
120. A server-driven system has to accommodate an API that evolves faster than some users upgrade @heylaurakelly
121. • Versioning by an explicit client version number • Lona is backwards compatible • Have fallbacks for older clients API evolution @heylaurakelly
122. HOW LONA SCALES @heylaurakelly
123. • Let teams decide what level of integration makes sense • Make full use of our Design Language System • Validate on the backend • Eliminate boilerplate data models • Codegen Epoxy model classes and CI tests • Explictly version and intentional fallbacks Scaling server-driven UI with Lona @heylaurakelly
124. THINK YOU WANT TO TRY SERVER-DRIVEN UI? @heylaurakelly
125. • Know how server-driven you want to go • API design is key • Think about platform differences early on • Consider how you’ll support older clients Tips for building a server-driven system @heylaurakelly
126. @heylaurakelly
127. Thanks @heylaurakelly Reservations contributors Laura Kelly, Eric Horacek, Tyler Hedrick, Jenn Tilton, Callie Callaway, Laura Xu, Andy Bartholomew Wall-E contributors Truman Cranor, Kevin Almanza, Garrett Berg, Josh Freeman, Steven Liu, Chris Talley, Noah Hendrix Lona Dynamic UI contributors Nathanael Silverman, Sherwin Li, Nora Tarano, Kieraj Mumick, Maja Wichrowska