Building Dynamic Interfaces - Implementing Server-Driven UI on Android

Learn how to transform your Android app's user interface into a dynamic, real-time experience. This talk explores the concept of Server-Driven UI, providing practical insights and coding examples to help you create adaptive, engaging interfaces that update in real-time. Stay ahead in the world of Android app development and enhance user experiences.

Transcript

1. Building dynamic interfaces 🪄 Implementing Server-Driven UI on Android Ar Razy Fathan Rabbani Mobile Engineer @gamatechno
2. 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
3. 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]
5. Traditional Approach Source : https://www.judo.app/blog/server-driven-ui
6. Server-Driven UI Source : https://www.judo.app/blog/server-driven-ui
7. Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label
8. Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label 🙅
9. Why Server Driven UI ? Source : https://www.judo.app/blog/server-driven-ui UI Changes : Add rating & label
10. 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
11. Advantages Of Server-Driven
12. Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 📉
13. Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 🚀
14. Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability ⏰
15. Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability 👨🔬
16. Experimentation friendly Source : https://splitmetrics.com/resources/what-is-ab-testing-and-why-it-matters-for-mobile-developers/
17. Reduced App Upgrades Fast updates and delivery Increased Time to Market Experimentation friendly Code reusability ♻
18. How to implement Server-Driven UI on Android ?
19. Design
20. Identify each component TopAppBar - category - share button Featured Image Content Footer - content text - card - carousel - image - caption - title - blurred background
21. 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 } }
22. 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
23. Setup Firebase Firestore ⃪ ⃪
24. Create a model class to hold data from server Data classes in Kotlin are used to represent simple, immutable data structures
25. Make each components stateful Create a mutable state variable with an initial value
26. 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
27. 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
28. 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.
29. Let's see how it works
30. Concern Using Server-Driven UI (SDUI)
31. Latency and performance Dependency on Internet Connection Cost Complexity
32. Latency and performance Dependency on Internet Connection Cost Complexity
33. Latency and performance Dependency on Internet Connection Cost Complexity
34. Latency and performance Dependency on Internet Connection Cost Complexity
35. Conclusion So, is it the ultimate solution for mobile apps?
36. “It depends” Remember that there is no silver bullet and each methodology has its own trade-offs ✨
37. 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/
38. Thank You Ar Razy Fathan Rabbani Mobile Engineer @gamatechno in/arrazyfathan /arrazyfathan 🌎 arrazyfathan.com /arrazyfathann