KotlinConf_2019_Server_Driven_UI.pdf

Transcript

1. Scaling server-driven UI with the power of Kotlin LAURA KELLY & NATHANAEL SILVERMAN
2. Laura Kelly Software Engineer Design Language Team Nathanael Silverman Software Engineer Design Language Team
3. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
4. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
5. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
6. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
7. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
8. Airbnb’s Design System An Evolving Product Server-Driven UI Lona Kotlin Power Agenda
9. A few years ago…
12. Homes Experiences Plus
13. Homes Experiences Plus Luxe
14. Many products
15. Many platforms
16. Many engineers product v
17. Infra
18. We needed to enable rapid, complex development
19. Airbnb’s DLS DESIGN LANGUAGE SYSTEM
20. Bélo Color Typeface …
21. Row components
25. Speed
26. Consistency
27. Can we do better?
28. Write screens once
29. Deploy instantly
30. Server-Driven UI AN INTRODUCTION
31. API Response (not SDUI) Name: “Sightglass Coffee”, Photos: {…} Website: “www.sightglasscoffee.com”, Location: { address: “123 main street”, city: “San Francisco”, state: “California”, country: “United States" },
32. Action Row Title Row API Response Carousel Map Row
33. Title Row Action Row API Response Carousel Map Row
34. Button Row Title Row API Response Carousel Map Row
35. Client-side implementation
36. REST Client-side implementation Server-driven flexibility
37. REST HTML Client-side implementation Server-driven flexibility
38. REST HTML Component- based SDUI Client-side implementation Server-driven flexibility
39. API Response Carousel Map Row Title Row Action Row
40. The JSON format A MORE SPECIFIC EXAMPLE
41. { "id": "…", "type": “MyComponent", "content": { "title": "My Title", "subtitle": "…" } } Lona Component JSON
42. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" } } Lona Component JSON
43. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" } } Lona Component JSON
44. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
45. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
46. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
47. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
48. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
49. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
50. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } "dismiss" "logout" "asyncRequest" … Lona Component JSON
51. { "id": "…", "type": "MyComponent", "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } } Lona Component JSON
52. Lona Component JSON { "id": "…", "type": “MyComponent”, "content": { "title": "My Title", "subtitle": "…" }, "actions": { "onPress": { "case": "deepLink", "data": { "url": "https://…" } } } }
53. Challenges of SDUI
54. Versioning
55. Initial launch Time passes Turn on the API Push changes
56. What’s the problem?
57. Some users never update!
60. API Client
61. V2 V1 V3
62. Keeping clients in sync
64. Scaling
66. It’s hard to scale to different use cases
67. One big system also has downsides…
68. ☁
70. Clients should receive only the code that they need
71. Documentation
72. A widely used SDUI system is constantly changing
73. • Versioning • Keeping clients in sync • Scaling • Documentation Challenges of server-driven UI
74. The Lona Spec KOTLIN POWERED
75. iOS Web frontend Backend Android Lona specification
76. ?
77. ?! est.tabs.TabChooser.onCreate(TabChooser.java:15) 1-21 20:55:47.390: W/System.err(989): at ndroid.app.Activity.performCreate(Activity.java:4465) 1-21 20:55:47.410: W/System.err(989): at ndroid.app.Instrumentation.callActivityOnCreate(Instr mentation.java:1049) 1-21 20:55:47.410: W/System.err(989): at ndroid.app.ActivityThread.performLaunchActivity(Activ tyThread.java:1919) 1-21 20:55:47.420: W/System.err(989): at ndroid.app.ActivityThread.handleLaunchActivity(Activi yThread.java:1980) 1-21 20:55:47.420: W/System.err(989): at ndroid.app.ActivityThread.access$600(ActivityThread.j va:122)
78. - Component properties
79. - Component properties - Versions
80. - Component properties - Versions - Events - Actions
81. - Component properties - Versions - Events - Actions - Logging
82. - Component properties - Versions - Events - Actions - Logging - Styles
83. Me
84. Android team Kotlin
85. Backend team using Java
88. Domain-Specific Language Not to be confused with Design Language System.
89. Lona Spec DSL lonaSpec { component("MyHeaderComponent") { } component("MyOtherComponent") { } }
90. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") }
91. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) }
92. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) { description("Documentation about this property.") } }
93. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) { description("Documentation about this property.") example("Title") example("A really long title to test this use case…") } }
94. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) { description("Documentation about this property.") example("Title") example("A really long title to test this use case…") } optionalContent("subtitle", Type.String, nullable = true, default = null) … } }
95. Lona Spec DSL val optionalContentSubtitle: LonaComponent.Builder.() -> Unit = { optionalContent("subtitle", Type.String, true, null) { example("Subtitle") example("A really long subtitle to test wrapping…") } }
96. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) { description("Documentation about this property.") example("Title") example("A really long title to test this use case…") } optionalContentSubtitle() }
97. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) { description("Documentation about this property.") example("Title") example("A really long title to test this use case…") } optionalContentSubtitle() }
98. Versioning v1
99. - Hello components
100. - Hello components - Bye bye components
101. - Hello components - Bye bye components - Did you get a haircut components?
102. Explicit versioning
103. Backward-compatible clients
104. ++
105. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) … optionalContent("subtitle", Type.String, nullable = true, default = null) }
106. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) … optionalContent("subtitle", Type.String, nullable = true, default = null) minVersion(2) { } }
107. Lona Spec DSL component("MyHeaderComponent") { description("Introduces sections of text. …") content("title", Type.String) … optionalContent("subtitle", Type.String, nullable = true, default = null) minVersion(2) { optionalContent("showDivider", Type.Boolean, nullable = false, default … } } }
108. Lona Spec DSL component("MyComponent") { … } minVersion(2) { component("MyOtherComponent") { … } }
109. Lona Spec DSL minVersion(2) { component("MyOtherComponent") { … minVersion(3) { optionalContent(…) { … } } minVersion(4) { … } } } minVersion(3) { … }
110. Artifacts
111. Lona specification JSON specs
112. Lona JSON Specs { "components": [ { "type": "MyHeaderComponent", "content": [{ "nullable": false, "name": "title", "type": "String" }] }, … ], "version": 1 }
113. Lona JSON Specs { "components": [ { "type": "MyHeaderComponent", "content": [{ "nullable": false, "name": "title", "type": "String" }] }, … ], "version": 1 }
114. Lona JSON Specs { "components": [ { "type": "MyHeaderComponent", "content": [{ "nullable": false, "name": "title", "type": "String" }] }, … ], "version": 1 }
115. Lona JSON Specs { "components": [ { "type": "MyHeaderComponent", "content": [{ "nullable": false, "name": "title", "type": "String" }] }, … ], "version": 1 }
116. Lona JSON Specs { "components": [ { "type": "MyHeaderComponent", "content": [{ "nullable": false, "name": "title", "type": "String" }] }, … ], "version": 1 }
117. Lona JSON Specs "examples": [ { "id": "0", "type": "MyHeaderComponent", "content": {"title": "Title"} }, { "id": "1", "type": "MyHeaderComponent", "content": {"title": "A really long title to test this use case…"} } ]
118. Lona JSON Specs "examples": [ { "id": "0", "type": "MyHeaderComponent", "content": {"title": "Title"} }, { "id": "1", "type": "MyHeaderComponent", "content": {"title": "A really long title to test this use case…"} } ]
119. Lona JSON Specs "examples": [ { "id": "0", "type": "MyHeaderComponent", "content": {"title": "Title"} }, { "id": "1", "type": "MyHeaderComponent", "content": {"title": "A really long title to test this use case…"} } ]
120. Lona specification JSON specs iOS Web frontend Android
121. Lona specification JSON specs iOS Web frontend Android JSON schemas
122. JSON Schema Draft v4
123. The JSON Schema A component example It’s valid!
124. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans
125. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans Documentation
127. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans Documentation Humans
128. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans Documentation Page builder Humans
129. Lona Type-Unsafe Page Builder pageBuilder { componentInstance("MyHeaderComponent") { "title" to "Scaling Server-Driven UI with the Power of Kotlin" "subtitle" to "Bla bla bla" } componentInstance("MyOtherComponent") { … } … }
130. Lona Type-Unsafe Page Builder pageBuilder { componentInstance("MyHeaderComponent") { "title" to "Scaling Server-Driven UI with the Power of Kotlin" "subtitle" to "Bla bla bla" } componentInstance("MyOtherComponent") { … } … }
131. Lona Type-Unsafe Page Builder pageBuilder { componentInstance("MyHeaderComponent") { "title" to "Scaling Server-Driven UI with the Power of Kotlin" "subtitle" to "Bla bla bla" } componentInstance("MyOtherComponent") { … } … }
132. Lona Type-Safe Page Builder componentInstance("MyHeaderComponent") { "title" to "Scaling Server-Driven UI with the Power of Kotlin" "subtitle" to "Bla bla bla" } myHeaderComponent( title = "Scaling Server-Driven UI with the Power of Kotlin", subtitle = "Bla bla bla" }
133. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans Documentation Page builder Humans Backend
134. Backend Lona specification JSON specs iOS Web frontend Android JSON schemas Humans Documentation Page builder Humans Backend
135. Modul arization
136. Lona Spec Modules specModule(name = "plus") { … } specModule(name = "luxe") { … }
137. Lona Spec Modules val myHeaderComponent = reusableComponent("MyHeaderComponent") { … }
138. Lona Spec Modules val myHeaderComponent = reusableComponent("MyHeaderComponent") { … } specModule(name = "plus") { add(myHeaderComponent.version(1)) }
139. • Versioning • Keeping clients in sync • Scaling • Documentation Challenges of server-driven UI
140. • Versioning • Keeping clients in sync • Scaling • Documentation Challenges of server-driven UI Kotlined
141. • Versioning • Keeping clients in sync • Scaling • Documentation Challenges of server-driven UI Kotified?
144. • Speed of iteration • Build once, deploy anytime • Consistency • Quality Server-driven UI with a Kotlin DSL
145. Thank you and remember to vote! Laura Kelly @heylaurakelly Nathanael Silverman #KotlinConf Credit to vecteezy.com for the finger snap icon
146. FAQ?