Philly ETE 2019 Rapidly Iterating Across Platforms Using Server-Driven UI

Philly ETE 2019

Transcript

2. Rapidly iterating across platforms using server-driven UI Laura Kelly @heylaurakelly
3. • Android Engineer @ Airbnb • Previously front-end web • Trip Platform team • Powerlifter • Whiskey connoisseur @heylaurakelly Who I am
4. 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
5. @heylaurakelly Airbnb is adding new products all the time Homes
6. @heylaurakelly Airbnb is adding new products all the time Homes Experiences
7. @heylaurakelly Airbnb is adding new products all the time Homes Experiences Restaurants
8. @heylaurakelly Airbnb is adding new products all the time Homes Experiences Restaurants Freeform Events
9. @heylaurakelly Homes Experiences Restaurants Coworking Spaces We were rebuilding nearly the same screen, multiplying our efforts across the codebase
10. @heylaurakelly
11. …and across platforms @heylaurakelly
12. There’s got to be a better way @heylaurakelly
13. WHAT WOULD AN IDEAL SYSTEM LOOK LIKE? @heylaurakelly
14. Easy to understand @heylaurakelly
15. Flexible to adapt to designers @heylaurakelly
16. Launch without a Play Store release @heylaurakelly
17. Minimize repetition @heylaurakelly
18. Easy to maintain @heylaurakelly
19. SERVER-DRIVEN UI @heylaurakelly
20. @heylaurakelly
21. 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"
 }
 ]
 }
22. {
 "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
23. pol·y·mor·phism the provision of a single interface to entities of different types @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. LinkRow { id, type, deeplink } ActionRow { id, type, actions } CarouselRow { id, type, imageUrls} MapRow { id, type, lat, long } Row { id, type } @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
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 @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
31. {
 "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, . . .
 }
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
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 Carousel Title Row Action 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. @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
39. BENEFITS WE SAW AFTER BUILDING THE SYSTEM @heylaurakelly
40. Build once @heylaurakelly
41. Easily accommodates changing minds @heylaurakelly
42. Reuse existing UI component libraries @heylaurakelly
43. Iterate, reconfigure, and experiment on our own time @heylaurakelly
44. ANDROID DEEP DIVE @heylaurakelly
45. JSON 1. JSON from server @heylaurakelly
46. JSON ArrayList<Row> rows( ) 1. JSON from server 2. Parse network response @heylaurakelly
47. JSON ArrayList<Row> rows( ) LinkRow MapRow TitleRow HostAvatarRow 1. JSON from server 2. Parse network response 3. Parse row subtypes @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 @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. 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
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. @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
53. 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
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. @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
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. @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
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(); ... } 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(); ... } 3. Parse row subtypes @heylaurakelly
60. @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(); ... } 3. Parse row subtypes @heylaurakelly
61. 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
62. Render with Epoxy https://github.com/airbnb/epoxy An open source library for building complex screens in a RecyclerView
63. 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
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. 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
69. 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
70. {
 "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
71. SERVER-DRIVEN SYSTEMS ACROSS AIRBNB @heylaurakelly
72. @heylaurakelly
73. BUILDING FORMS IS SIMPLE, RIGHT? @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. What’s so hard about building a user flow? @heylaurakelly
78. Branching Logic @heylaurakelly
79. Experimentation Control Treatment @heylaurakelly
80. Experimentation Control Treatment @heylaurakelly
81. Client-side logic @heylaurakelly
82. 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
83. API Response @heylaurakelly
84. API Response "questions": [ { "id": "sample_bool_question", "type": "BOOL" } ] @heylaurakelly
85. 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" } ],
86. API Response "steps": [ { "componentIds": [ "doc_marquee", "sample_switch" ], "id": "initial_step", "nextButton": { "disabled": { "questionId": "sample_bool_question", "type": "ANSWER_EQUALS", "value": "false" } } } ], @heylaurakelly
87. API Response "settings": { "afterSubmitted": { "redirectUrl": "https://www.airbnb.com/superhost", "primaryButton": { "webHref": "https://www.airbnb.com/superhost" }, } } @heylaurakelly
88. NAVIGATING BETWEEN SCREENS @heylaurakelly
89. @heylaurakelly Hide and show steps based on state
90. @heylaurakelly Hide and show steps based on state
91. @heylaurakelly Hide and show steps based on state
92. LONA DYNAMIC UI @heylaurakelly
93. Scaling server-driven UI to hundreds of developers, sustainably. @heylaurakelly
94. Lona Dynamic UI @heylaurakelly
95. Lona Dynamic UI A unified format for views @heylaurakelly
96. Lona Dynamic UI A unified format for views Backend tooling to enforce the format @heylaurakelly
97. Lona Dynamic UI A unified format for views Backend tooling to enforce the format Client frameworks to render views @heylaurakelly
98. A UNIFIED FORMAT FOR DESCRIBING VIEWS @heylaurakelly
99. Design Language System @heylaurakelly
100. 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
101. BACKEND TOOLING TO ENFORCE THE FORMAT @heylaurakelly
102. • Kotlin domain-specific language (DSL) • The spec being in Kotlin makes it very easy to build tooling The Lona spec @heylaurakelly
103. The Lona spec Backend Service Lona Validation @heylaurakelly
104. CLIENT FRAMEWORKS TO RENDER VIEWS @heylaurakelly
105. // Can also be of type JSONObject val json: String = ... 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() Lona on Android @heylaurakelly
107. // 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
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 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
109. @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
110. CODEGEN @heylaurakelly
111. Custom deserializer for building Epoxy models @heylaurakelly
112. 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
113. 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
114. • 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
115. DIFFERENT LEVELS OF INTEGRATION @heylaurakelly
116. Lona Dynamic UI A unified format for views Backend tooling to enforce the format Client frameworks to render views @heylaurakelly
117. Lona Dynamic UI Wall E backend service Wall E client A unified format for views @heylaurakelly
118. • 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
119. VERSIONING @heylaurakelly
120. 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
121. A server-driven system has to accommodate an API that evolves faster than some users upgrade @heylaurakelly
122. • Versioning by an explicit client version number • Lona is backwards compatible • Have fallbacks for older clients API evolution @heylaurakelly
123. HOW LONA SCALES @heylaurakelly
124. • 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
125. @heylaurakelly
126. 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 Laura Kelly, Nathanael Silverman, Kieraj Mumick, Tae Kim