Server Driven UI with SwiftUI
Server-Driven UI is a way of developing (I would say ‘managing content’) applications, including mobile and web, where the UI is provided by the server.
Server-Driven UI is a way of developing (I would say ‘managing content’) applications, including mobile and web, where the UI is provided by the server. There are different pros and cons that you can find in various articles, along with numerous implementations.
Let’s begin and see how it can look with SwiftUI.
Design System & Components
In Figma, components are defined and can be easily fetched with Figma API.
Template
A JSON template contains essential information about the UI, which can include component names, layouts, padding, margins, and/or data.
Below is a simple JSON example in response to a UI request from the server for a specific page.
{
"type": "home",
"page": {
"type": "layout",
"children": [
{
"type": "image-box",
"image": "https://wallpapers.com/images/featured-full/interesting-pictures-0phka103hul2wp72.jpg"
"title": "Amazing nature"
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere fermentum enim in malesuada. Nullam in quam ultrices, mattis velit nec, condimentum lectus."
},
{
"type": "primary-button",
"text": "Read more."
}
]
}
}Here you can see components that are defined in Figma, some custom layout like ‘vertical’ layout. Naming and structure can be changed and finally agreed within a team.
Before we start with implementation on iOS side let’s have a short summarise.
Server Driven UI based on Figma components, building blocks. Server prepare a unique recipe to stick them together with or without data. There are different implementation of SDUI, so it depends on the product whether data is in JSON or not.
