Server Driven UI

Published in

YML Innovation Lab

6 min readMay 20, 2023

Why do we need to use Server Driven UI?

As a mobile developer, have you ever had to add a new field to a native Android layout and it would take up the entire sprint which includes development, QA and release cycle? Or, have you ever had a client who was hesitant to use web views to render content in their app? These are common issues that can be solved by implementing server-driven UI in your mobile app.

Server-driven UI allows developers to render native components using data provided by a server. This means that instead of hard-coding all the layouts in the app, you can fetch the data from a server and dynamically create the UI components at runtime. This can save a lot of development time and make the app more flexible to changes in the future.

Additionally, using server-driven UI can also improve the performance as the native components are rendered directly in the app, which can lead to faster load times and better performance overall. You can find some of the major differences between Native components and web-view below

Performance: Native components are much faster and provide better performance as compared to web views. Web views usually require a lot of resources to render the content, which can result in slow loading times and a poor user experience.
User experience: Native components provide a better user experience as they are designed specifically for the platform they are running on. They can take advantage of the device’s features and offer a consistent look and feel across the entire app.
Security: Native components are considered more secure as compared to web views. Web views can be vulnerable to security threats such as cross-site scripting attacks and phishing attacks.
Accessibility: Native components are designed to be accessible and support accessibility features such as screen readers and text-to-speech. This makes it easier for people with disabilities to use your app.

Ideally Server-driven UI is a great solution for developers who want to save development time, improve app flexibility, and improve performance. By using this approach, you can dynamically render native components using data from a server, making it easier to add new features and update the app in the future.

How can we implement Server Driven UI ?

Server-driven UI or dynamic layout is a technique that allows the server to send data or instructions to the client, which the client then uses to render the user interface dynamically. This approach can help to optimize the layout of the UI for different devices or screen sizes, as well as provide more personalised or relevant content to the user. This technique is independent of platforms such as Android, iOS & Web. For a better understanding of the concept we are using Contentful CMS as server, fetching data from Contentful via GraphQL and rendering it on an Android App.

Contentful CMS is a headless content management system that enables developers to create and manage content, and then deliver that content through a variety of channels such as websites, mobile applications, and digital displays. By defining custom content types in Contentful, we can create dynamic content models for components such as Card, TextView, and ImageView.

GraphQL is a query language for APIs that provides a flexible and efficient way to access data. By using GraphQL, we can specify the data we need, and the server responds with exactly that data.

Defining Content Models

To start with, we need to define the content models for our UI components in Contentful. We can define properties such as width, text, style, and others, which can be used to render the components dynamically in Android.

For example, to define a Card component, we can define fields such as title, description, image, and style properties such as backgroundColor and borderRadius. Similarly, we can define fields for other components such as TextView and ImageView.

Once we have defined our content models in Contentful, we can start creating and managing content. We can create entries for each component, and then define the values for each field. We can also define the style properties for each component, which can be used to adjust the visual appearance of the UI components.

Card and its style

Fetching Content using GraphQL

To access the data from Contentful in Mobile, we can use the GraphQL API. We can define queries in our Mobile application that specify the data we need, and then send those queries to the server. The server responds with exactly the data we requested, which we can then use to generate our UI components dynamically.

For example, we can define a query to retrieve all entries for a Card component, and then use that data to generate the Card UI component in our Mobile application. We can also specify the style properties for the Card component, which can be retrieved from Contentful and used to adjust the appearance of the Card component.

Rendering Components in Android

Here let’s see how we can create custom component in Android, with a similar concept we can create custom components in other platforms too.

Once we have fetched the data using GraphQL, we can start rendering the components in Android. We can create reusable UI components in Android that can be dynamically generated based on the data received from Contentful.

We can create components such as Card, TextView & ImageView which match ContentModel in Contentful and these components should have a flexible design, with the ability to adjust the style properties based on the data received from Contentful.

For example, we can define a Card component in Android that has properties such as title, description, image, and style properties such as backgroundColor and borderRadius. We can then use the data received from Contentful to dynamically generate the Card component in our Android application.

Yes, instead of passing a lot of parameters, you can create a data class that contains all the properties that you need for your card component, and pass an instance of that data class to your composable function. This will make your code more readable and maintainable.

For example:

Then you can create an instance of the CardData class and pass it to the CardComponent function like this:

This way, you can easily create multiple instances of CardData with different values and reuse the CardComponent function to render them.

Architecture Diagram

This diagram illustrates the high-level architecture of a server-driven UI system using Contentful CMS and GraphQL.

Designer logs in and navigates to the Content section in Contentful
Once the new layout is created, the Designer will publish the layout to be consumed in the app.
When a user launches the app or the screen gets refreshed, a GraphQL query is sent to Contentful to check for any new layout that is available.
The user screen gets an updated layout if there is any change in the content

Conclusion

Server-driven UI is a powerful approach to designing mobile applications that allow for flexible and scalable UI design. Using Contentful CMS and GraphQL API, we can create dynamic content models for components such as Card, TextView, and ImageView and render them in Android. By creating reusable UI components in Android and defining content types in Contentful, we can create a flexible and dynamic UI that can be easily managed and updated.

Implementing server driven UI will be much useful for the users if you are planning to provide a tailored UI experience based on user activities which are driven by ML, but if you want to provide a static UI for all the users then server driven UI might not be a great choice.

Appreciation

I would like to thank Enrique López-Mañas for his help in reviewing my blog, his feedback was incredibly helpful in making my blog stronger. Thank you Enrique López-Mañas