Okay SDUI ! Part – 1

SDUI is a very popular term these days in the mobile community. With the ever-changing, demanding needs of business, one cannot keep pushing new releases and wait for it to go through review, rollout, and user adoption.

React Native has done a great job of making our lives easier with respect to frequent changes without app releases. However, there is a significant number of native mobile developers who would not opt for React Native due to the overhead and performance reasons. One can arguably disagree with me here!

Every large-scale company focuses on releasing features as quickly as possible, but without compromising on the quality and performance. Performance and quality are closely tied!

Native mobile developers are pretty confident with the performance as their code is closest to the platform. Now, let’s try to bind the picture. Quick releases & performance are the core of a server-driven user interface. SDUI!

Let’s see the basic components of an SDUI framework-

1. UI elements – Text, Button, Input, Box, ScrollableBox, etc
2. Events – InputChange, Submit, Close

You can set up a backend to create a ui like below, very close to how composable functions in Compose are written. By creating base classes – UIElement<*>, Event<*> and atoms – Text, Submit etc in the backend shareable infrastructure.

ClientFormService.kt

fun sendNameForm(): SDUIResponse{
  ScrollableBox(style = "vertical") {
    Text(text = "Enter Name")
    Input(hint = "vivek.."
    Button(text = "Save", event = SubmitAction}
  }
} 

FormResponse.json

{ "sdui" : {
    "node-type":"Scrollable"
    "node-style":"Vertical"
    "children": [
      {
        "node-type":"Text"
        "node-value":"Enter Name"
      },
      {
        "node-type":"Input"
        "node-value":"vivek..."
      },
      {
        "node-type":"Button"
        "node-action":"Submit"
      }, 
    ]
  } 
}

Then, on your clients, you would parse the response above into respective domain objects and pass it over to the next layer, where the renderer on screen that takes care of threading, lifecycle, diffing, etc.

Future Topics

• Part 2 shall discuss more on client side SDUI management.
• Part 3 shall discuss making the SDUI framework easier to onboard new engineers/verticals across the organisation.
• Part 4 shall discuss type safety and performance aspects of SDUI.