How apps change their UI easily without a huge update?
You might have used different apps like Flipkart, Swiggy, Google Chrome, Gmail, etc. You might have observed that its user interface changes some time without an app update.
I Say It's Possible!!
lets us see how…
Okay, let us consider an example, you might have used Flipkart to order something online. Have you ever observed their user interface during normal days?
It is pretty straightforward with some with
- The search bar at the top
- Categories below the search
- Deals of the day carousel
- and so on…
But have you observed the Flipkart Home page during some sales time, namely, summer or big-billion-day sales?
The Home page is completely changed when the sale is on. You will not get any app update during that time.
Many might wonder how Flipkart has changed the home page without an app update 🤔.
So here comes the magic
Server Driven UI(SDUI).
Here Flipkart uses the Server Driven UI concept to change its home page spontaneously.
The majority of the Well known Apps uses this concept for faster deployment of new features and test the UI with users.
But…
What is Server Driven UI?
Basically, when we click a button on the home page, the apps sends a request to the server. The server pushes back the data as a response in JSON. That JSON will be processed, and accordingly, the UI components are rendered on the screen.
The server Driven UI follows the same procedure, but instead of data as JSON, the server sends the JSON response in which there will be logic for what to show on the screen. Based on that, the app will render natively developed UI components on the view.
The UI code will be fetched from the server as a response, so it was called Server Driven UI.
This results in a good user experience and faster deployment of new features to the users with less effort from the user’s side.
Let us have a closure look at how the UI is rendered on the app.
if we want to reorder the UI having the button at the top of the delivery card, we just need to change the JSON response, and it will be automatically reflected in the app UI.
Similarly, if we want a render a completely new component on the screen, we just edit the JSON response by a new component, and Boom…
With this feature, companies change their app's UI spontaneously based on the requirement.
🤔 Are there any advantages of this Server Driven UI?
Yes, of course…
Advantages
- Companies no longer need to depend on users to update the app to show a specific UI or change the UI's order.
- Easy shipping of new features and reusable components.
Basically, 50% of the users do not tend to update the app while using, so this feature can benefit most companies to easily ship their new UI with additional features on the go.
Ready to implement it
We can't create an SDUI(server-driven UI) system by ourselves. So some libraries are created by the companies for open source.
some of them are:
- JetPack Compose from Android
- Proteus from Flipkart
- Epoxy from Airbnb
- Litho from Facebook
- Graywater from Tumblr
JSON Format
When a JSON response is received from the server, app developers inflate components based on the row types in the JSON.
Let’s see an example in flutter.
{
"type": "Container",
"alignment": "center",
"child": {
"type": "RaisedButton",
"color": "...", "..." : "...", }
}
Challenges
Say you have released an app with SDUI implementation after few days. You have made changes to the app with the new API rules to render new components onto the app and push the update to the play store.
Not every user updates the app to the latest version. Some might retain with the older version.
The problem arises when older API tries to render the new API responses. We should be cautious about the versioning of API responses, and it should have backward compatibility.
Congratulations, you have made it to the end.🥳
I would like to thank all the guys who made this SDUI happen and improved our user experience while using the apps.🤝
Coming up with “How to implement SDUI with Flutter.”
Stay tuned