Developing native apps for mobile devices is still the first choice for large-scale businesses that want to reach the masses with effective products. We will not argue about which platform outperforms the other, which is a completely different discussion.
In my opinion, most mobile developers have to think about how companies like Flipkart, Swiggy, Amazon, Airbnb, etc … change / update their main app screens quickly and provide Give users a more customized experience. Most people agree that it’s a WebView, but not (except for Amazone) all of these are dynamically deployed and controlled.
So, by comparing the two screens in detail by Flipkart and Amazon, we can see that both have similar components in areas like Carousel, Images, Cards using basic components. Image and Text
What is server-driven UI?
This is the term through which the server is responsible for displaying and controlling components (views) on the frontend (in this article fronend is the interface on our mobile application). It is also known as backend-driven UI. The server determines which components are part of the screen and their order, which are described through data returned from the API. The application will output the image to the device screen with the processing of components controlled dynamically from the backend. This allows applications to provide a high quality user experience with all the basic components of the operating system into devices.
What are the benefits of using this model?
- It is possible to run multiple tests with the purpose of testing the theory differently to improve the quality of the product.
- Easily update changes on the screen without having to update the application.
- Brings new features faster. Build many new screens based on the defined components.
How does it work?
To deploy this, there are ways to implement the following:
1. Definition of View type
In this approach, the server will return the predefined view types, including all the visible items declared as in the sample below, we have the view types like the image tag, title. , the action is taken as opening the profile page for Cristiano Ronaldo with a specific id provided.
2. Definition of View
In this method, the response from the server contains all the views, hierarchies, positions, width, height, padding, colors, text, etc.It determines all the properties needed for the layout of the server. view.
So what are the differences of these two methods?
With the Defined View type method a specific view is already in the application and you can only change certain properties of the elements depending on your usecase. In contrast, with the View Definition method with all the properties used, you can change the whole way of displaying through the server response.
Parsers / Converters
We will convert / map JSON UIs into models, which can then be used to lay out on-screen views in JSON. There are many Json converters in Android to perform sequentially with Json like Gson, Moshi, Kotlin, etc.
Layouting
Now, the first thought that comes to mind for doing this is everyone’s obvious choice: RecyclerView. It is RecyclerView that can really help us build this behavior, but is it feasible with options for line breaks or scaling views, managing different types of views, scrolling performance? , create views, use and optimize memory.
Yes, you can use RecyclerView to deploy, but there are many other great View Architectures available in the Android open source community that can help build these frameworks effectively and remember all optimizations. The chemistry happens below the library.
PS: All of these libraries have a common goal to achieve. But the way they are implemented is different.
There are many instructions for using Epoxy and Litho . And those are the libraries that are most trusted by people to use.
And finally, we can not ignore that is the UI tookit recently introduced by Google. Built by Google itself to support modularization of UI
Jetpack Compose , the toolkit is currently under development at an early stage and there is a lot of strong development going on. But you can try Jetpack now, although it tends to disrupt recent changes in program development and structure.
Case Study:
Swiggy
Swiggy uses many server-controlled user interfaces to control the views displayed on the screen and their respective locations. Also, consider location-based dynamic components that are only available for certain locations (see image below).
Swiggy uses Litho (available for Android) as a library from Facebook to perform complex views while running, by providing ways to refine the View layout. Flattening the views and synchronizing the layout calculations will improve the performance of scrolling.
On iOS, Facebook ComponentKit can be used instead of Litho.
Litho uses the declarative API to identify UI components. You only need to describe the layout for your UI based on a set of immutable inputs and the framework will handle the rest. While generating code, Litho can perform optimizations for your UI, keeping your code simple and easy to maintain.
The following article will explain to you exactly how and why Swiggy chose Litho over Android’s RecyclerView.
Optimizing scrolling performance with Litho
Flipkart
Flipkart has designed and laid out to flexibly control what users will see. This helps Flipkart update the main screen of the app during the festive season to get more product sales.
Flipkart Engineering developed its system called Proteus to do this
Proteus uses an alternative to Android’s LayoutInflater. But unlike the way of compiling empty xml layout in Apk, Proteus inflates layout during runtime. You can control your application interface right from the backend (note, this is not Webview).
Proteus considers the JSON API to be defined and then converts the components depending on the type of view into native components that can be added at runtime.
Airbnb
Airbnb has developed a library called Epoxy to implement server-driven UI ideas on Android. They developed view architecture first for their application, then they synthesized it into a library.
Read more about how to deploy it below. Epoxy: Airbnb’s View Architecture on Android
Epoxy’s replacement on iOS is MagzineLayout by Airbnb.
Source of translation: Dynamic screens using server-driven UI in Android