Andrew's Digital Garden

Server Driven UI (SDUI)

Airbnb has probably the most famous implementation of this with it's 'Ghost Platform'.

Rather than the backend handling data and each platform client handling the UI, SDUI tries to push some of the UI work towards the backend. The server response describes how a UI should be rendered on the client. This approach has several benefits:

  • Consistency across clients
  • Less versioning required for updates (especially mobile apps)
  • Flexibility and adaptability
  • Personalisation
  • Easier experimentation

The goal is for the client to be agnostic about what it's displaying. Rather than displaying a particular view, you receive information about the UI from the server, and display that. It includes how the page is laid out, the sections in the layout, the data in each section, and even interactions.

In a way this is similar to a [[headless CMS]]. The data and authoring experience is split from the UI, and data can be transformed however wanted by the client.

The lines between the two are a little blurry. SDUI seems like a further extension of the idea. There's less of a tight coupling between the schema, data, and the UI, because they're all kind of the same thing. The data gets transformed into an agnostic component API, and then the UI merely renders whatever it is.

Rather than requesting data for a specific component and applying that to a component on the client, the server informs you what component you should be rendering, along with it's data. Rather than your client being responsible for rendering a 'blog post', SDUI may take it further and send agnostic sections and slices that end up creating a blog post. If you want to add a second button to your Hero component, you don't need to update the UI components to handle this new schema. Since the server was already in charge, the UI should already have the ability to render whatever is required.

SDUI thus better fulfills the goal of parity across different clients. Different levels of fidelity can be configured to allow for less/more customisation as needed. This kind of is dependent on your API for components, as it changes what levers you can pull when you want to change things. e.g Can you specify if text is bold?

The idea seems similar to what I did with 'Advanced Custom Fields' in Wordpress, or the slices side project https://github.com/ajosedev/slices. Both of these converted JSON data into a full page, with the JSON data including information about both the layout, components, and data involved in both of them.

https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5 https://www.rea-group.com/about-us/news-and-insights/blog/introducing-atomic-part-one/ https://prismic.io/

[[architecture]] [[web]]

Referred in

Server Driven UI (SDUI)