Skima: A Server Driven UI framework

I’ve been hearing the idea of Server Driven UI (SDUI) for a while. I’ve read articles from people who work at companies like Spotify and Airbnb that are implementing it and, somedays at work, some teams brought it up on calls as something that would be nice to use.

As I learned about Server Drive UI, I became more interested. I’m iOS developer, and the idea of declaring the entire UI of an app in the server is a game changer for me. It allows us to fix bugs quickly, adapt the UI to the bussiness requirement without launching an update and also experiment with different types of UI without the complex task of managing different versions of your application.

But when I tried to find more information about SDUI I realized that it is not as abundant as I expected. When I search for a topic on the internet, I always get a lot of articles, Youtube videos, forums and projects about it, but that was not the case. I realized that in addition to not having as much information, several companies are using some kind of Server Driven UI, but they all develop their own internal project.

So, with the intention of standardizing the development of applications with SDUI and creating tools to facilitate the creation and maintenance of applications at any scale I created Skima Framework.

What I’m trying to solve

The purpose of Skima Framework is to: (1) standarize the way SDUI is declared, and (2) create tools to facilitate the development and maintenance of applications. Let’s talk about each one.

Standardization

The idea is to standardize the different components of an application and create models that can be served in a JSON to declare the UI, the behavior and to control the data of an application. With these three things we would be able to create all kinds of applications, well… not all, but many of them.

Tools

A lot of things can go wrong in this type of architecture and that’s the reason because I think that having the right tools is critical to maximizing the benefits and minimizing the drawbacks of SDUI, and to build amazing and robust apps which is what we all want to do.

Server Driven UI requires a strong level of syncrhonization between the server and the frontend. The models in both sides must be compatible. The frontend can’t asume that the data will be served, so it has to be preper for network failures and wrong data. With SDUI a lot of responsability will fall on the backend. The app will be 100% dependent on the internet connection. The dev teams will be more coupled than ever. In resume, it’s clear that we need tools to deal with all these problems.

Skima Framework

Skima establish two types of models: Widgets and Actions, and provides libraries in the frontend to easily develop both components. There are many more things like Constraints, Variables and Compose Widgets, but here I want to describe only the basic ones. To understand the full picture, I encourage you to read the documentation.

Widgets

Widgets are the basic building blocks of the User Interface. Labels, Images, Buttons, they are all Widgets. Each type of Widget has its own properties, which are useful data for building the component in the frontend. Skima itself does not provide any Widgets, it olny provides the way to create them. However, I’ve developed a standard library with basic Widgets to start developing quickly. The library is called SkimaStandardUI. Here is an example of the Label Widget:

{
    "type": "label",
    "props": {
        "text": "This is a label!",
        "text_alignment": "center",
        "text_color": "#FF0000",
        "font_size": 24
    }
}

Actions

The Actions represent a certain behavior to be executed in the frontend. They can be a navigation between screens, an API call, the creation of a timer, or whatever you need to do. As well as with Widgets, Skima does not have built-in Actions, but I’ve developed a library called SkimaStandardActions that contains, for example, actions to navigate between screens. Here is an example:

{
    "type": "navigation",
    "data": {
        "type": "deep_link",
        "value": "skima://home"
    }
}

More things…

Along with Widgets and Actions there are other framework components. Contraints are useful to drawing the Widgets in the right place, Variables allow us to manage data in the frontend, Compose Widget is a powerful way of create complex Widgets using simpler ones. And more is coming.

Current state of the project

Skima Framework is still in development. The project is open source and you can find it on GitHub.

I’m working in the whole spectrum of tools to develop SDUI apps, including the backend. But I decided to start launching my work progressively to get feedback and new ideas, so I started with the iOS part of Skima.

It’s completely under development so the most likely scenario is that a lot of things will change. I’m totally open to any comments and thoughts on this project.

Here’s a screenshot of a demo application that I’m developing using Skima:

Finally, I leave here the links to the Github and Documentation of the project and thanks for reading!

Read on Medium