Life is too short to develop only for Android - A journey to Server-driven UI

Talk given at the following conferences/events:
- Droidcon New York (September / 2022)
- Droidcon Berlin (July / 2022)
- Android Makers (April / 2022)
- Droidcon Lisbon (April / 2022)
- Glovo & Friends Tech Conference (Nov / 2021)

Have you ever had to implement a last minute feature? Did your requirements change? Is your build slow?

Server-driven UI might be the solution to your problems. In this talk, I will discuss how we designed a multi-platform system to build new screens via a simple backend change without having to release new versions of the native apps.

After this talk, you will be able to ship features faster on all platforms simultaneously, you will notice that life is too short to develop only for Android.

Transcript

1. Life is too short to develop only for Android A journey to Server-driven UI Zhenlei Ji @zhenleiji
2. 🗓 Outline 1. The problem 2. Server driven UI 3. Our journey
3. ⌛ A few months ago…
4. The Month of N(ovember) Explore
5. The Month of N(ovember) Perk Detail Explore Story The Month of N Detail
6. Insurance Perks The Month of N Detail Explore We are building similar screen over and over again
7. Android iOS Web … and across platforms
8. There must be a better way…
9. Server driven UI to rescue…
10. What is not SDUI 🙅
11. Api Response (not SDUI) { "insurance": { "title": "Premium Insurances", "icon": "https://n26.com/icon.png", "description": "You need at least €16,90…", "button": "Top up to unlock", }, "account_detail": { "title": "N26 You", "subtitle": "See my account details", "icon": "https://n26.com/card.png" }, "card_o ff ers": { "title": "Get more from N26", "items": […] } … }
12. Api Response (not SDUI) { "insurance": { "title": "Premium Insurances", "icon": "https://n26.com/icon.png", "description": "You need at least €16,90…", "button": "Top up to unlock", }, "account_detail": { "title": "N26 You", "subtitle": "See my account details", "icon": "https://n26.com/card.png" }, "card_o ff ers": { "title": "Get more from N26", "items": […] } … }
13. Api Response (not SDUI) { "insurance": { "title": "Premium Insurances", "icon": "https://n26.com/icon.png", "description": "You need at least €16,90…", "button": "Top up to unlock", }, "account_detail": { "title": "N26 You", "subtitle": "See my account details", "icon": "https://n26.com/card.png" }, "card_o ff ers": { "title": "Get more from N26", "items": […] } … }
14. Api Response (not SDUI) { "insurance": { "title": "Premium Insurances", "icon": "https://n26.com/icon.png", "description": "You need at least €16,90…", "button": "Top up to unlock", }, "account_detail": { "title": "N26 You", "subtitle": "See my account details", "icon": "https://n26.com/card.png" }, "card_o ff ers": { "title": "Get more from N26", "items": […] } … }
15. Api Response (not SDUI) { "insurance": { "title": "Premium Insurances", "icon": "https://n26.com/icon.png", "description": "You need at least €16,90…", "button": "Top up to unlock", }, "account_detail": { "title": "N26 You", "subtitle": "See my account details", "icon": "https://n26.com/card.png" }, "card_o ff ers": { "title": "Get more from N26", "items": […] } … } Backend for Frontend (BFF)
16. What is SDUI 👌
17. Api Response (SDUI) { "items": [ { "icon": "https://n26.com/icon.png", "text": "Premium Insurance", }, { "text": "You need at least €16,90…", }, { "text": "Top Up to unlock", "operation": {tracking, deeplink}, }, { "icon": "https://n26.com/card.png", "title": "N26 Metal", "subtitle": "See my account details" }, { "text": "Insurance", "items": [] } ] }
18. Api Response (SDUI) { "items": [ { "type": "Header", "icon": "https://n26.com/icon.png", "text": "Premium Insurance", }, { "type": "SmallBodyText", "text": "You need at least €16,90…", }, { "type": "Button", "text": "Top Up to unlock", "operation": {tracking, deeplink}, }, { "type": "SimpleCard", "icon": "https://n26.com/card.png", "title": "N26 Metal", "subtitle": "See my account details" }, { "type": "Carousel", "text": "Insurance", "items": [] } ] } Polymorphic JSON
19. Api Response (SDUI) Render UI components Polymorphic JSON HeaderDto SmallBodyTextDto ButtonDto SimpleCardDto CarouselDto Map to data models
20. Api Response (SDUI) Render UI components Polymorphic JSON HeaderDto SmallBodyTextDto ButtonDto SimpleCardDto CarouselDto Map to data models
21. Api Response (SDUI) Render UI components Polymorphic JSON HeaderDto SmallBodyTextDto ButtonDto SimpleCardDto Map to data models GridDto
22. Some benefits after building the system 🎉
23. Improve communication
24. Reuse existing UI component
25. Minimize repetition
26. React fast to changes
27. Launch without publishing on Play Store
28. 🧗 Our journey…
29. 🧗 Our journey… 1. Foundation 2. “Vaccine” 3. “Android-less”
30. 1. Foundation 🧱
31. Design System
32. - Stephen Hay “We’re not designing pages, we’re designing systems of components.”
33. https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
34. https://atomicdesign.bradfrost.com/chapter-2/ Atomic design
35. Atomic design Atoms Spot Icon Body Text Small Body Text
36. Atomic design Atoms Spot Icon Body Text Small Body Text Molecules Three Item Container
37. Atomic design Atoms Organisms Spot Icon Body Text Small Body Text Molecules Three Item Container Product Spotlight
38. Atomic design (code) data class ThreeItemContainerViewEntity( val title: BodyTextViewEntity, val subtitle: SmallBodyTextViewEntity, val spotIconViewEntity: SpotIconViewEntity ) : ViewEntity View Entity class ThreeItemContainerView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ConstraintLayout(context, attrs, defStyleAttr) { // more code }} Custom View Molecules Three Item Container
39. Atomic design (code) data class ThreeItemContainerViewEntity( val title: BodyTextViewEntity, val subtitle: SmallBodyTextViewEntity, val spotIconViewEntity: SpotIconViewEntity ) : ViewEntity View Entity class ThreeItemContainerView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ConstraintLayout(context, attrs, defStyleAttr), Bindable<ThreeItemContainerViewEntity> { // more code }} Custom View Molecules Three Item Container
40. Atomic design (code) data class ThreeItemContainerViewEntity( val title: BodyTextViewEntity, val subtitle: SmallBodyTextViewEntity, val spotIconViewEntity: SpotIconViewEntity ) : ViewEntity View Entity class ThreeItemContainerView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ConstraintLayout(context, attrs, defStyleAttr), Bindable<ThreeItemContainerViewEntity> { override fun bind(viewEntity: ThreeItemContainerViewEntity) { // bind code } // more code }} Custom View Molecules Three Item Container
41. Foundation Kick-o f • Stateless Backend • Backend without versioning 😢 • Static screen • All clickable components should have deeplink and tracking
42. Foundation Polymorphic JSON HeaderDto Data Models 1 ButtonDto BodyTextDto CarouselDto SectionDto GridDto … 3 mappings
43. Foundation Polymorphic JSON Data Models 1 HeaderDto ButtonDto BodyTextDto CarouselDto SectionDto GridDto … HeaderViewEntity View Entities ButtonViewEntity BodyTextViewEntity CarouselViewEntity SectionViewEntity GridViewEntity … 2 3 mappings
44. Foundation Polymorphic JSON Data Models 1 HeaderDto ButtonDto BodyTextDto CarouselDto SectionDto GridDto … HeaderViewEntity View Entities ButtonViewEntity BodyTextViewEntity CarouselViewEntity SectionViewEntity GridViewEntity … 2 HeaderView Views ButtonView BodyTextView CarouselView GridView … 3 SectionView 3 mappings
45. 1. Polymorphic JSON → Data Models
46. 1. Polymorphic JSON → Data Models Polymorphic JSON HeaderDto Data Models ButtonDto BodyTextDto CarouselDto SectionDto GridDto … • Jackson • Moshi • kotlinx.serialization Libraries
47. 1. Polymorphic JSON → Data Models • Jackson • Moshi • kotlinx.serialization Libraries Polymorphic JSON HeaderDto Data Models ButtonDto BodyTextDto CarouselDto SectionDto GridDto …
48. Moshi Setup • Create EnumJsonAdapter with default fallback • Create a custom JsonAdapterFactory to handle polymorphic json and ignore the invalid json Polymorphic JSON { "type": "SimpleCard", "icon": "https://n26.com/card.png", "title": "N26 Metal", "subtitle": "See my account details" } @JsonClass(generateAdapter = true) data class SimpleCardDto( val icon: String, val title: String, val subtitle: String ) : Item<BodyTextViewEntity> Data model
49. Moshi Setup • Create EnumJsonAdapter with default fallback • Create a custom JsonAdapterFactory to handle polymorphic json and ignore the invalid json Polymorphic JSON { "type": "SimpleCard", "title": "N26 Metal", "subtitle": "See my account details" } @JsonClass(generateAdapter = true) data class SimpleCardDto( val icon: String, val title: String, val subtitle: String ) : Item<BodyTextViewEntity> Data model 💣
50. Moshi Setup • Create EnumJsonAdapter with default fallback • Create a custom JsonAdapterFactory to handle polymorphic json and ignore the invalid json Polymorphic JSON { "type": "SimpleCard", "title": "N26 Metal", "subtitle": "See my account details" } @JsonClass(generateAdapter = true) data class UnknownDto( val cause: Throwable ) : Item<ViewEntity> Data model 😎
51. Moshi Setup • Create Operation, a wrapper of deeplink and tracking { "type": "Button", "text": "Top Up to unlock", "operation": { "uri": “n26://deeplink“, "tracking": {}, } } @JsonClass(generateAdapter = true) data class Operation(val uri: String, val tracking: Tracking)
52. Moshi Setup • Create SduiType enum internal enum class SduiType(val kclass: KClass<out Item>) { Header(), BodyText(), Button(), // more items Carousel(), Section(), Grid() }
53. Moshi Setup • Create SduiType enum internal enum class SduiType(val kclass: KClass<out Item>) { Header(HeaderDto::class), BodyText(BodyTextDto::class), Button(ButtonDto::class), // more items Carousel(CarouselDto::class), Section(SectionDto::class), Grid(GridDto::class) }
54. 2. Data Models → View Entities
55. 2. Data Models → View Entities HeaderDto Data Models ButtonDto BodyTextDto CarouselDto SectionDto GridDto … HeaderViewEntity View Entities ButtonViewEntity BodyTextViewEntity CarouselViewEntity SectionViewEntity GridViewEntity … @JsonClass(generateAdapter = false) interface Item<out T : ViewEntity> { fun toViewEntity( actionDelegate: ActionDelegate ): T? }
56. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ){ }}
57. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ) : Item<ButtonViewEntity> { }}
58. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ) : Item<ButtonViewEntity> { override fun toViewEntity(actionDelegate: ActionDelegate): ButtonViewEntity? }}
59. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ) : Item<ButtonViewEntity> { override fun toViewEntity(actionDelegate: ActionDelegate): ButtonViewEntity? }}
60. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ) : Item<ButtonViewEntity> { override fun toViewEntity(actionDelegate: ActionDelegate): ButtonViewEntity? = operation.toActionEntity(actionDelegate) }}
61. 2. Data Models → View Entities @JsonClass(generateAdapter = true) data class ButtonDto( val text: String, val operation: Operation ) : Item<ButtonViewEntity> { override fun toViewEntity(actionDelegate: ActionDelegate): ButtonViewEntity? = operation.toActionEntity(actionDelegate) ?.let { actionEntity -> ButtonViewEntity( text = text, clickAction = ClickAction { actionDelegate.performAction(actionEntity) } ) } }}
62. 3. View Entities → View
63. 3. View Entities → View HeaderViewEntity View Entities ButtonViewEntity BodyTextViewEntity CarouselViewEntity SectionViewEntity GridViewEntity … HeaderView Views ButtonView BodyTextView CarouselView SectionView GridView … • ViewFactory • ViewFactoryMap • RecyclerViewAdapter
64. 3. View Entities → View (ViewFactory) class ButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : Button(context, attrs, defStyleAttr), Bindable<ButtonViewEntity> { override fun bind(viewEntity: ButtonViewEntity): Unit = with(viewEntity) { // Bind code } // more code }}
65. 3. View Entities → View (ViewFactory) class ButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : Button(context, attrs, defStyleAttr), Bindable<ButtonViewEntity> { override fun bind(viewEntity: ButtonViewEntity): Unit = with(viewEntity) { // Bind code } // more code class ViewFactory : BindableViewFactory<ButtonViewEntity> { override fun inflateView(parent: ViewGroup): View = ButtonView(parent.context).apply { rootView.layoutParams = RecyclerView.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) } } }}
66. 3. View Entities → View (ViewFactory) class ButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : Button(context, attrs, defStyleAttr), Bindable<ButtonViewEntity> { override fun bind(viewEntity: ButtonViewEntity): Unit = with(viewEntity) { // Bind code } // more code class ViewFactory : BindableViewFactory<ButtonViewEntity> { override fun inflateView(parent: ViewGroup): View = ButtonView(parent.context).apply { rootView.layoutParams = RecyclerView.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) } } }}
67. 3. View Entities → View (ViewFactoryMap) object SduiViewFactoryMap { }}
68. 3. View Entities → View (ViewFactoryMap) object SduiViewFactoryMap { fun create() { val viewFactoryMap = mutableOf<KClass<out ViewEntity>, ViewFactory<in ViewEntity>>() viewFactoryMap.apply { // Simple tile put(HeaderViewEntity::class, HeaderView.ViewFactory()) put(BodyTextViewEntity::class, BodyTextView.ViewFactory()) put(ButtonViewEntity::class, ButtonView.ViewFactory()) // ... } } }}
69. 3. View Entities → View (ViewFactoryMap) object SduiViewFactoryMap { fun create() { val viewFactoryMap = mutableOf<KClass<out ViewEntity>, ViewFactory<in ViewEntity>>() viewFactoryMap.apply { // Simple tile put(HeaderViewEntity::class, HeaderView.ViewFactory()) put(BodyTextViewEntity::class, BodyTextView.ViewFactory()) put(ButtonViewEntity::class, ButtonView.ViewFactory()) // ... // Complex tile put(CarouselViewEntity::class, CarouselView.ViewFactory(viewFactoryMap = this)) put(SectionViewEntity::class, SectionView.ViewFactory(viewFactoryMap = this)) put(GridViewEntity::class, GridView.ViewFactory(viewFactory = this)) } } }}
70. 3. View Entities → View (ViewFactoryMap) class ViewFactoryMap : LinkedHashMap<KClass<out ViewEntity>, ViewFactory<in ViewEntity>>() { inline fun <reified Entity : ViewEntity> register( viewFactory: ViewFactory<in Entity> ): ViewFactory<in ViewEntity>? = put(Entity::class, viewController as ViewController<ViewEntity>) }
71. 3. View Entities → View (ViewFactoryMap) class ViewFactoryMap : LinkedHashMap<KClass<out ViewEntity>, ViewFactory<in ViewEntity>>() { inline fun <reified Entity : ViewEntity> register( viewFactory: ViewFactory<in Entity> ): ViewFactory<in ViewEntity>? = put(Entity::class, viewFactory as ViewFactory<ViewEntity>) }
72. 3. View Entities → View (ViewFactoryMap) class ViewFactoryMap : LinkedHashMap<KClass<out ViewEntity>, ViewFactory<in ViewEntity>>() { inline fun <reified Entity : ViewEntity> register( viewFactory: ViewFactory<in Entity> ): ViewFactory<in ViewEntity>? = put(Entity::class, viewFactory as ViewFactory<ViewEntity>) } object SduiViewFactoryMap { fun create() = ViewFactoryMap().apply { // Simple tile register(HeaderView.ViewFactory()) register(BodyTextView.ViewFactory()) register(ButtonView.ViewFactory()) // ... // Complex tile register(CarouselView.ViewFactory(viewFactoryMap = this)) register(SectionView.ViewFactory(viewFactoryMap = this)) register(GridView.ViewFactory(viewFactoryMap = this)) } }} 🤩
73. 3. View Entities → View (RecyclerViewAdapter) @ContributesMultibinding(SessionScope::class) @FragmentKey(SduiFragment::class) class SduiFragment @Inject constructor( val viewModelFactory: SduiViewModelFactory, ) : Fragment(R.layout.fragment_sdui) { private val recyclerViewAdapter = RecyclerViewAdapter() // more code }}
74. 3. View Entities → View (RecyclerViewAdapter) @ContributesMultibinding(SessionScope::class) @FragmentKey(SduiFragment::class) class SduiFragment @Inject constructor( val viewModelFactory: SduiViewModelFactory, ) : Fragment(R.layout.fragment_sdui) { private val recyclerViewAdapter = RecyclerViewAdapter() // more code }}
75. 3. View Entities → View (RecyclerViewAdapter) @ContributesMultibinding(SessionScope::class) @FragmentKey(SduiFragment::class) class SduiFragment @Inject constructor( val viewModelFactory: SduiViewModelFactory, ) : Fragment(R.layout.fragment_sdui) { private val recyclerViewAdapter = RecyclerViewAdapter(SduiViewFactoryMap.create()) // more code }}
76. 3. View Entities → View (RecyclerViewAdapter) @ContributesMultibinding(SessionScope::class) @FragmentKey(SduiFragment::class) class SduiFragment @Inject constructor( val viewModelFactory: SduiViewModelFactory, ) : Fragment(R.layout.fragment_sdui) { private val recyclerViewAdapter = RecyclerViewAdapter(SduiViewFactoryMap.create()) // more code private fun showContent(content: SduiViewState.Content) { setViewVisibility(isContentVisible = true) recyclerViewAdapter.submitList(content.viewEntities) } }}
77. and the test strategy?
78. Test strategy Polymorphic JSON Data models 1 2 3 View Entites Microservice
79. Test strategy Polymorphic JSON Data models View Entites Microservice Contract test 1 2 3
80. Test strategy Polymorphic JSON Data models View Entites Microservice Contract test Unit test 1 2 3
81. Test strategy Polymorphic JSON Data models View Entites Microservice Contract test Unit test Screenshot test* 1 2 3
82. Tips
83. Versioning
84. Light Mode Dark Mode Demo app
85. bootstrap.py
86. HTTP Debugging Proxy
87. A/B tests
88. Content management system
89. Content management system Microservice Polymorphic JSON SDUI Marketing team
90. 2. “Vaccine” 💉
91. Not so hypothetical situation Spaces squad Membership squad
92. Not so hypothetical situation Spaces squad Membership squad Membership's PM Spaces' PM
93. Not so hypothetical situation Spaces squad Membership squad
94. Membership Squad Not so hypothetical situation Spaces squad Membership squad Membership's Devs Spaces' Devs
95. “Vaccine” class SduiVaccineView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : Bindable<SduiVaccineViewEntity> { // more code }} View
96. “Vaccine” class SduiVaccineView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ISduiVaccineView, Bindable<SduiVaccineViewEntity> { // more code }} View
97. “Vaccine” class SduiVaccineView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ISduiVaccineView, Bindable<SduiVaccineViewEntity> { // more code }} View data class SduiVaccineViewEntity( ) : ViewEntity View Entity
98. “Vaccine” class SduiVaccineView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : ISduiVaccineView, Bindable<SduiVaccineViewEntity> { // more code }} View data class SduiVaccineViewEntity( val webserviceRelativePath: String ) : ViewEntity View Entity 💉 Membership Microservice
99. 3. “Android-less” 🏝
100. 1. New module 2. Set up DI 3. Create retrofit service 4. Set up SDUI library 5. Create the ViewModel 6. Create an Activity/Fragment 7. Tests 😭 Not so hypothetical situation Build a new screen 🤔
101. 🤔 Not so hypothetical situation Build a new screen 1. New module 2. Set up DI 3. Create retrofit service 4. Set up SDUI library 5. Create the ViewModel 6. Create an Activity/Fragment 7. Tests deeplink
102. SDUI deeplink n26://sdui?path=/api/webservice?id=12345
103. “Android-less” The Month of N Detail Story n26://sdui?path=/api/membership/story?id=2 👆
104. “Android-less” The Month of N Detail Story Perks 🤯 Browser 🌐 n26://sdui?path=/api/membership/perks 👆
105. “Life is too short to develop only for Android”
106. Thanks
107. @zhenleiji Zhenlei Ji