A server-driven UI architecture determines which UI views need to be rendered on an application screen.
Most web applications today work this way: a client/server (frontend/backend) architecture. The backend sends data to the front end, and the front end decides where and how to present the data.
Well, the server-driven UI (SDUI) approach is similar, with one twist: the backend decides where and how to present the data. Or better say, the backend decides about the user interface.
One of the benefits of this approach is that it enables new features to be deployed on all platforms simultaneously via a backend change without releasing new versions of the native apps.
How Server-Driver UI works?
There are no molded templates anymore; instead, the server defines the list of components. There is a corresponding UI implementation in the app (UI Component) for each component defined at the server.
Why Server-driven UI uses components instead of templates?
Template creation, by default, implies a dependent relationship between the front-end programmer and the content creators.
How? To fill templates with content, creators must adapt their content to the template. They can only alter or customize the content with a programmer. The same applies to changes made to a page's design or content. When you add new sections or buttons to a website using the traditional method (i.e., the client-side approach), you must create new codes and add new CMS fields.
Rather than using templates, SDUI concentrates on separate components to solve these problems.
How to build new components with SDUI
JSON! JSON! JSON!
So, an emerging thing with SDUI is the fact that it uses layouts as JSON. Something that you can deliver over an API. So, you build components, and the API can dictate who sees what information in what order. And believe it or not, this simple philosophy could actually solve very complex problems.
Wanna know how this actually works?
As you can see in this picture, this imaginary web page is made up of several "components."
So, from the top, we see the page type, a carousel, title, action row, and map row. And then a list of sections; each section consists of a list of components. Each component is rendered based solely on the data contained in JSON.
The server does all the work of deciding which component to use and how to render. The app/client/front end doesn't decide anything.
The most important thing is that the server ultimately decides the order of these components and the content inside of them.
Advantages of the Server-driven user interface
To keep reading and finding more about SDUI pros and cons, pls proceed to my blog, where you can find the full text on this subject: [https://thebcms.com/blog/server-driven-ui-on-the-web-examples]
Top comments (0)