CODEWITHSUNDEEP
androidiosreactjsreact-native
jamal
jamal

Reputation: 1105

React-Native 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.

How I implement this in my react-native-app?

Webview is the solution?

Kindly help me.. Thanks

Upvotes: 3

Views: 4035

Answers (2)

nipuna-g
nipuna-g

Reputation: 6652

There are multiple ways you can go about doing this.

One way would be to use WebViews as you've mentioned, this would make it trivial to change the interfaces as it's entierly controled in the servers. But the main issue with this approch will be performance and non native look and feel. These are the two main advantages of using React Native over hybrid frameworks in the first place and therefor, it wouldn't make much sense to use WebViews everywhere. But if there's a small slice of your application that updates regularly(ex - terms of service) you could use a WebView to do the custom views.

A more common way that's low effort would be to have all the code in place for the different looks, but use feature flags to toggle different views. This would work the same way that a dark theme would work. The amount of customisation we can do this way is limited because we need to code everything ahead of time.

Another way is to use server driven UIs. With this approach, you will have a pre defined templates in the client that you them populate on run-time with data from the server. For a very simple example, you could have a header image that could be populated with a seasonal greeting image. But instead of simple things like images, this can be much more visible changes as well. (ex - List view instead of Grid View)

One more involved way would be to use code push. This would allow things like seasonal UI changes. But this requires a lot more setup and might not provide the best user experience.

Upvotes: 8

Debdutta Panda
Debdutta Panda

Reputation: 208

Webview is best because this way you can change the UI and the business logic or UI handling logic.

But you have to develop a minimum architecture for that.

Here is my way.

Develop Host layer to use camera, shared preference, file system etc.

Develop a communication layer which will be responsible for communication between your webview and the host layer so that your webview can access all the required device platform(eg. android or ios) features which can not be normally accessed directly from webview.

So now you can render whatever UI(by HTML and CSS) you want, you can put whatever logic you want via javascript also now you can access all the required device features you really need.

So, now you are the king of your app.

Just you have to keep updating the UI or logic in server when you really need.

Some cons are there like

  1. webview in android is different than our normal browser. Some required features are not available.
  2. Its behaviors is different in different API level. So you have to test it very well. For testing, you can use Genymotion.
  3. It does not work well in some old devices/APIs.
  4. Look and feel really matters. But smart design can fix that problem.
  5. If you want your whole app in a single webview then you have to compromise with page transition feature of android or ios. But again smart animation design will fix that.

But this is just a working solution not a smart solution for server driven UI.

I have used some server driven UI frameworks. But they seems to be overhead and lacks some features.

So there should be a framework by which we can render native UI dynamically from server with corresponding business logic change feature and accessibility of all the possible device functionalities.

A few months before I started to develop a Server driven UI framework. I did it little bit. But due to lack of time I really could not complete it.

If someone interested to contribute in this project feel free to contact with me.

I have a solid idea and architecture for this project.

This framework can create a revolution in the world of app development.

email: [email protected]

Upvotes: 1

Related Questions