Exploring Server-Driven UI

A new way to build reactive apps with native UI

Siva Ganesh Kantamani
Mar 17 · 5 min read
Photo from Airbnb’s app.

Native apps are still the first choice for businesses that want to expand at scale and reach out to millions based on their UI and performance. This statement might be controversial for many of the people out there, but we’re not going to discuss which platform is best. Instead, we’re going to learn how to grab more control over what you’re showing in the app using server-driven UI.

I always wonder how apps like Airbnb, Flipkart, and Swiggy update their UI on the fly. Even if I didn’t update the app, Flipkart shows different UIs during festivals, while Swiggy always changes its UI based on the device location. Do you wonder how they do it?

Changes in the Swiggy UI based on location.

What Is Server-Driven UI?


How Can a Server Control UI?

Bird’s-eye view of server-driven UI.

If we want to change the order in UI, like the actions row below the image and then the title, we just need to change the response:

Similarly, if we want to include a totally different component (e.g. a full-length button below the title) and remove the action row, again we just have to change the response:

With this approach, we can change anything in the UI based on user location, subscription, or literally anything.


Advantages

  1. We can run tests on specific features on the fly.
  2. It’s easy to ship new features and create more reusable components.
  3. Native experience for users and reactive for companies.

I think it’s a win-win process.


A Deeper Look at SDUI

There are many libraries out there:

Back to the point, Airbnb uses a component-based UI, like Jetpack Compose. When a JSON format is received from the server, app developers inflate components based on the row types in the JSON.

JSON format

Simple JSON format to inflate views using Lona.

The node type defines which type of component should be inflated on the view, such as Title Row, Action Row, and more (as we see above). The Content node provides the contents to be shown in the inflated view. For example, if my component is Title Row, then the title and subtitle contain the contents to be shown in the title and subtitle fields. The Action node is used to inflate actionable components like click and content navigation should happen based on the onPress node.


Versioning Challenges With SDUI

When an old version of the app accesses new API responses, the consequences will be direct, so we should be very careful to ensure the API responses and client-side code should be backward-compatible.

Let’s see the solution provided by Airbnb for versioning problems. Below is the JSON format for the header component in Version 1 that was already published.

As we already published the app, we need a new version to make any changes. To integrate new changes, we need to include new variable minVersion enclosed with the version number. Under that variable, we can include any number of components and styles. Have a look:

As we don’t access minVersion in the previous version of the app, there will be no problem.


Jetpack Compose With SDUI (Future)

JetPack Compose combines a reactive programming model with conciseness and simple coding using Kotlin programming language. Plus, it is fully declarative, meaning you describe your UI by calling a series of functions that transform data into a UI hierarchy, which is more convenient for building layouts with SDUI than using traditional XML formats.

Though we’ve advanced libraries like Litho, Epoxy, and more from big tech companies, having a native solution is more convenient. That’s the reason Jetpack Compose is going to shine in the near future.

To know more about JetPack Compose, read the following articles:


Conclusion

Thank you for reading.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Siva Ganesh Kantamani

Written by

Learn. Code. Write. Repeat. Visit me at https://about.me/sivaganesh_kantamani & Join my email list at https://tinyletter.com/Siva_Ganesh_Kantamani

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade