Implementing Server-Driven UI for iOS

Ever wondered how your favourite apps like Uber, Amazon, or Netflix can update their look and feel overnight without you having to download an update? It’s all thanks to server-driven UI

Netflix: Different Layout for different type of user using SDUI.

What is Server-Driven UI?

Server-Driven UI (SDUI) is an architectural technique in which the structure and functionality of an application’s user interface are determined by the server instead of the client-side code. The need for regular app updates through app stores is reduced by this technique, which allows real-time updates and dynamic UI changes based on data provided by the server.

How to achieve Server-Driven UI in iOS?

Although there are a few different ways to accomplish this in iOS, we’ll use JSON, the most widely used and straightforward data type.

Because JSON is simple to handle and read. Let’s examine an illustration of a JSON file.

{
  "card": {
    "log_id": "sample_card",
    "states": [
      {
        "state_id": 0,
        "div": {
          "items": [
            {
              "type": "container",
              "width": {
                "type": "match_parent"
              },
              "height": {
                "type": "match_parent"
              },
              "paddings": {
                "top": 50,
                "bottom": 50,
                "left": 20,
                "right": 20
              },
              "items": [
                {
                  "type": "image",
                  "image_url": "https://i.postimg.cc/jjQDNfMr/4SBuvy-A.png",
                  "width": {
                    "type": "match_parent"
                  },
                  "height": {
                    "type": "fixed",
                    "value": 100
                  },
                  "scale": "fit"
                },
                {
                  "type": "text",
                  "text": "Hello Medium SDUI",
                  "width": {
                    "type": "match_parent"
                  },
                  "font_size": 30,
                  "font_weight": "bold",
                  "text_alignment_horizontal": "center"
                }
              ]
            }
          ],
          "height": {
            "type": "match_parent"
          },
        
          "type": "container"
        }
      }
    ]
  }
}

In the image above, the JSON code is visible on the left, skillfully creating a user interface (UI) with an image, text, and styling, on the right.

Allow me to briefly explain these JSON lines. Div is employed as a container for a list of items.

Let’s delve into some fundamental types used in above example:

1. Container: Functions as a holding element, similar to a canvas where the UI is drawn. Imagine a simple layout displaying a list of items. In the above example, a container is used to organize a list of images and text. In iOS, it typically uses `match_parent` for both width and height to fit the available space.
2. Image: As the name suggests, it holds an image and includes properties such as image_url, width, height, and scale.
3. Text: Represents plain text with properties including width, text, font_size, font_weight, and text_alignment_horizontal.

Although there are other kinds of components, we’ll stick with the ones listed above to learn the fundamentals of server-driven user interface.

With the UI data ready, the next step is to implement it in iOS, applications.

Let’s explore the coding process to achieve this. One effective tool is DivKit, a library developed by the Yandex team. DivKit excels at rendering UI from structured data.

Check out a sample project on GitHub here.

I am going to explain how easy it is to integrate.

STEP 1: Install the following dependency using cocoapods.

pod 'DivKit'

STEP 2: Create your View Controller as follows and replace the JSON with the actual JSON

import UIKit
import DivKit

class ViewController: UIViewController {
  var divKitComponents: DivKitComponents!
  var divView: DivView!
  let json: [String: Any] = [:] // <Place the above created JSON here as a dictionary>

  override func viewDidLoad() {
    super.viewDidLoad()
    setupDivView()
    setData(json)
  }

  override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    _alignDivViewToSafeArea()
  }

  func setupDivView() {
    self.divKitComponents = DivKitComponents()
    self.divView = DivView(divKitComponents: divKitComponents)
    view.addSubview(divView)
    _alignDivViewToSafeArea()
  }

  private func setData(_ data: [String: Any]) {
    divView.setSource(
      DivViewSource(
        kind: .json(data),
        cardId: "DivViewCard"
      ),
      debugParams: DebugParams(),
      shouldResetPreviousCardData: true
    )
  }


  func _alignDivViewToSafeArea() {
    divView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      divView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      divView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
      divView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
      divView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
    ])
  }
}

Final Steps

After running the code, the UI described above will be displayed as expected. No additional coding is required, and the best part is that the JSON defining the UI can be modified on the server to include changes or new features without updating the app itself.

This example showcases the basics of server-driven UI. For more information on creating and managing complex UIs with DivKit, you can dive deeper into the documentation and examples.

Happy coding! 😁

Reference:

Yandex

Other Links:
Here is the link to Android Implementation:

Server-Driven UI Android Implementation

Reach out to me:
https://www.linkedin.com/in/sanjay-kumawat-221875122