Building dynamic interfaces 🪄 Implementing Server-Driven UI on Android Ar Razy Fathan Rabbani Mobile Engineer @gamatechno 

What is Server-Driven UI? Why Server-Driven UI? Advantages of Server-Driven UI Implementation Server-Driven UI on Android Concern using Server-Driven UI Conclusion Outline 

What is Server-Driven UI Server Driven UI is a powerful approach to building user interfaces that puts the server in charge of generating the UI. This means that the client-side code only needs to know how to render the UI, while the server-side code is responsible for deciding what the UI should look like. [7] 

No content

Traditional Approach Source : https://www.judo.app/blog/server-driven-ui 

Server-Driven UI Source : https://www.judo.app/blog/server-driven-ui 

Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label 

Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label 🙅 

Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label 

The Problem Source : https://www.judo.app/blog/server-driven-ui 1) Slow down experimentation and iteration. 2) Versioning Problem The necessity to run through a full release cycle for even simple UI changes comes with a few problems 

Advantages Of Server-Driven 

Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 📉 

Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 🚀 

Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability ⏰ 

Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 👨🔬 

Experimentation friendly Source : https://splitmetrics.com/resources/what-is-ab-testing-and-why-it-matters-for-mobile-developers/ 

Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability ♻ 

How to implement Server-Driven UI on Android ? 

Design 

Identify each component TopAppBar - category - share button Featured Image Content Footer - content text - card - carousel - image - caption - title - blurred background 

Translate component as JSON { "featured_image": { "article_title": "2022: The ...", "article_title_size": 40, "blurred_background": true, "caption_size": 10, "image_caption": "With victory...", "image_height": 240, "image_corner_radius": 16, "image_padding": 16, "image_url": "https://example.com/", "image_width": 0 } } 

Setup Firebase Firestore dependencies { // Import the BoM for the Firebase platform implementation(platform("com.google.firebase:firebase-bom:32.3.1")) // Declare the dependency for the Cloud Firestore library // When using the BoM, you don't specify versions in Firebase library dependencies implementation("com.google.firebase:firebase-firestore-ktx") } 1. Create a new Firebase project for your Android app. 2. Register Your App with Firebase. 3. Add Firebase Firestore Dependencies 

Setup Firebase Firestore ⃪ ⃪ 

Create a model class to hold data from server Data classes in Kotlin are used to represent simple, immutable data structures 

Make each components stateful Create a mutable state variable with an initial value 

AnimatedVisibility(enableBlurredBackground) { FeaturedPostItemBackground(imageUrl = imageUrl) } Enable/Disable blurred background AsyncImage( model = ImageRequest.Builder(LocalContext.current) .data(imageUrl) .crossfade(true) .build(), modifier = Modifier .pressClickEffect() .padding(horizontal = imagePadding.dp) .clip(MaterialTheme.shapes.extraLarge .copy(CornerSize(imageCornerRadius.dp))) .height(imageHeight.dp) .fillMaxWidth() .background(Color.Black), contentDescription = null, contentScale = ContentScale.Crop, ) Image Text( text = imageCaption, fontSize = captionSize.sp, color = Color.White.copy(alpha = .8f), lineHeight = 12.sp, fontFamily = GoloSansRegular, textAlign = TextAlign.Start, modifier = Modifier .padding(horizontal = 16.dp, vertical = 10.dp) .fillMaxWidth(), ) Image Caption Text( text = articleTitle, fontSize = articleTitleSize.sp, lineHeight = 40.sp, fontFamily = GoloSansSemiBold, color = Color.White, modifier = Modifier .padding(horizontal = 16.dp, vertical = 0.dp) .fillMaxWidth(), ) Article Title 

AnimatedVisibility(enableBlurredBackground) { FeaturedPostItemBackground(imageUrl = imageUrl) } Enable/Disable blurred background AsyncImage( model = ImageRequest.Builder(LocalContext.current) .data(imageUrl) .crossfade(true) .build(), modifier = Modifier .pressClickEffect() .padding(horizontal = imagePadding.dp) .clip(MaterialTheme.shapes.extraLarge .copy(CornerSize(imageCornerRadius.dp))) .height(imageHeight.dp) .fillMaxWidth() .background(Color.Black), contentDescription = null, contentScale = ContentScale.Crop, ) Image Text( text = imageCaption, fontSize = captionSize.sp, color = Color.White.copy(alpha = .8f), lineHeight = 12.sp, fontFamily = GoloSansRegular, textAlign = TextAlign.Start, modifier = Modifier .padding(horizontal = 16.dp, vertical = 10.dp) .fillMaxWidth(), ) Image Caption Text( text = articleTitle, fontSize = articleTitleSize.sp, lineHeight = 40.sp, fontFamily = GoloSansSemiBold, color = Color.White, modifier = Modifier .padding(horizontal = 16.dp, vertical = 0.dp) .fillMaxWidth(), ) Article Title 

Get data from server ( Real-Time ) Call home screen collection Get featured image document Convert snapshot to Object This function for fetching a featured image UI data from a Firestore database and transforming it into a Flow that can be observed or collected asynchronously. 

Let's see how it works 

Concern Using Server-Driven UI (SDUI) 

Latency and performance Dependency on Internet Connection Cost Complexity 

Latency and performance Dependency on Internet Connection Cost Complexity 

Latency and performance Dependency on Internet Connection Cost Complexity 

Latency and performance Dependency on Internet Connection Cost Complexity 

Conclusion So, is it the ultimate solution for mobile apps? 

“It depends” Remember that there is no silver bullet and each methodology has its own trade-offs ✨ 

References Articles Droidcon (Community Conferences) 📄 https://www.judo.app/blog/server-driven-ui ( What is Server-Driven UI? ) [1] 📄 https://betterprogramming.pub/server-driven-ui-does-it-solve-everything-for-mobile-apps-4b38397b2e04 ( Server-Driven UI : the Ultimate Solution for Mobile Apps? ) [2] 📄 https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5 ( A Deep Dive into Airbnb’s Server-Driven UI System ) [3] 📄 https://eng.lyft.com/the-journey-to-server-driven-ui-at-lyft-bikes-and-scooters-c19264a0378e ( The Journey to Server- Driven UI at Lyft Bikes and Scooters ) [4] 📄 https://doordash.engineering/2021/08/24/improving-development-velocity-with-generic-server-driven-ui-components/ (Improving Development Velocity with Generic, Server-Driven UI Components) [5] 📄 https://medium.com/swlh/server-driven-ui-and-some-herbs-f17f01aa7794 ( Server-Driven UI : How to Start. ) [6] 📄 https://netilbyte.medium.com/unveiling-the-advantages-of-server-driven-user-interface-ui-cf41f60c0f2 ( Unveiling the Advantages of Server-Driven UI ) [7] 📄 https://medium.com/@dfs.techblog/server-driven-ui-concept-db07d7946e94 ( Server-Driven UI – Concepts and Building Blocks ) [8] 📹 https://www.droidcon.com/2023/07/20/accelerating-mobile-development-with-server-driven-technologies/ 📹 https://www.droidcon.com/2022/09/29/a-journey-to-building-a-server-driven-ui-framework/ 📹 https://www.droidcon.com/2022/08/01/life-is-too-short-to-develop-only-for-android-a-journey-to-server-driven-ui/ 📹 https://www.droidcon.com/2018/06/27/using-server-driven-ui-to-rapidly-iterate-on-android-and-across-platforms/ 📹 https://www.droidcon.com/2022/06/28/a-page-out-of-server-driven-ui-on-android-2/ 

Thank You Ar Razy Fathan Rabbani Mobile Engineer @gamatechno in/arrazyfathan /arrazyfathan 🌎 arrazyfathan.com /arrazyfathann