How to send UI via API

There is a technique that allows you to imagine working with user interfaces (UI) in a completely new way. You can transfer UI to the client through various APIs – this is how server-driven user interfaces are obtained. This method allows you to reach a new level of flexibility and dynamism, transforming traditional UI development paradigms.

Server-driven UIs don’t just exist in theory. They are being implemented by some of the biggest players in the tech industry. Examples include Lyft And Airbnb. They actively use server-driven UIs to serve millions of users around the world dynamic content and quickly provide updates.

But what exactly are server-driven UIs? How do they work and why are they so important in modern JavaScript development? In this post we will try to answer these questions and take an in-depth look at server-driven UIs, their advantages, and how you can implement such an interface in your own project.

The concept of server-driven UI

Server-driven UI is a new approach to developing user interfaces. They provide a dynamic and flexible approach to generating UI on the server and then sending the UI to the client via the appropriate APIs. This approach allows you to speed up iterations when working and promotes personalization when working with a resource.

While the approach poses significant challenges—for example, how to combine it with the rules of the mobile app markets and how to manage the interface without an Internet connection—overall, it opens up exciting prospects for UI development.

So, in this case, the UIs are dynamically generated on the server and sent to the client via the API. The server sends a JSON representation of the UI, which the client then renders. This way, the UI can be updated on the server side without requiring any changes on the client.

The UI gains flexibility, thanks to which it can be changed in real time, based on various factors, such as user behavior, A/B testing results, and the rollout of new features. For example, site Builder.io uses this approach in different SDKs of its framework: it provides a component that can accept JSON as input and display interfaces assembled as a visual constructor:

import { BuilderComponent } from "@builder.io/react";

export default async function MyPage({ params }) {
  const builderJSON = await builder
    // Get the page content JSON from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (params?.page?.join("/") || ""),
      },
    })
 return (
   <>
     <YourHeader />
     <BuilderComponent content={builderJSON} model="page" />
     <YourFooter />
   </>
 );
}

This approach has several advantages over traditional UI development. Firstly, it helps speed up iterations, since changes can be made on the server side – and they will immediately be reflected on the client. In addition, with this approach, backend developers can participate in the development of the client, since they define both the structure and behavior of the UI on the server.

True, not everything is so smooth with server-driven UIs. They require a special eye for UI design, and they also require consideration of technical factors – such as how to handle actions and ensure a smooth experience. But, if everything is carefully planned and implemented, then all these problems can be overcome.

The role of server-managed UIs using the example of Instagram (the organization is prohibited in the Russian Federation)

The way server-driven UIs are implemented on Instagram is a case study that demonstrates this innovative approach in action. This giant social network has developed a technology called “blocks” that heavily uses the concept of server-driven UIs to serve dynamic content and provide updates.

In Instagram’s implementation, the server sends a tree structure of blocks to the client. Each block is a UI element; it contains information about which component to render and what props to pass to that component. The client then traverses this tree structure and displays these components in the order they appear in the blocks.

Thanks to this approach, Instagram can instantly update the UI without having to roll out a new version of the application. For example, if a bug is found in a particular UI component, the server can simply stop sending blocks that display that component. In this case, the bug is actually eliminated for all users at once.

Advantages of server-driven UIs

By adopting server-driven UIs, you gain many benefits that can greatly improve the entire development process, as well as delight the end user.

Immediate bug fixes and faster iterations: As illustrated by Instagram, one of the biggest benefits comes from quickly fixing bugs and turning around iterations. Changes to the UI are made on the server side and are immediately reflected on the client. Users are not required to update their apps, and developers are spared the lengthy review process in app markets.

Backend specialists participate in frontend development: Server-driven UIs also partially blur the line between client-side and server-side development. Backenders can determine the structure and behavior of the UI directly on the server, thus directly participating in the development of the frontend. This way you can achieve more efficient use of resources and improve teamwork.

Dynamic and personalized user interactions: When working with a server-driven UI, the process of interacting with the application dynamically adapts to the specific user based on a number of factors. For example, the server can send different UI options to the user depending on his behavior, preferences, or even the results of A/B testing. Therefore, working with such an interface can be more personalized and exciting.

Simplification of the client side: By moving most of the logic that serves the UI to the server, this paradigm makes it possible to significantly simplify the client. The client is lighter and faster, resulting in increased productivity and a smoother experience.

Creating Server-Driven UIs: A How-To Guide

At first glance, creating such user interfaces may seem like a tedious job. But, if you clearly understand the whole process and its main stages, then this activity will turn out to be quite rewarding and rewarding work. Here’s a step-by-step guide to building server-driven UIs:

Create a tree structure: The first step is to create a tree structure that represents your UI. Each node in this tree corresponds to a UI component and contains information about which component to display and what props to pass to that component.

Processing actions: In a server-driven UI, you need to handle actions, in particular those performed by the user. To do this, you can include action handlers in your components that send requests to the server. Next, the server can respond with a new UI tree, rebuilt taking into account the completed action.

Using JSON format: The UI tree is usually represented in JSON format, and information in this format can be easily passed through the API and then parsed on the client.

Let’s implement the rendering engine: On the client side, we need a rendering engine that can traverse the UI tree and display components exactly as they are specified in the tree.

Testing and iteration: As with any development, testing and iteration remain key. Be sure to thoroughly test your server-driven UIs and make changes based on what you discover.

Remember that building server-driven UIs requires learning to look at things differently than traditional UI development. It’s not just about programming, but also about preparing the architecture of your UI in such a way that it can be dynamically generated and updated on the server side.

How to deal with the complexities inherent in server-side UI development

While there are new possibilities when developing server-driven UIs, there are also some serious challenges to keep in mind:

Rules applicable to application markets: In app markets, rules (guidelines) are established and must be followed. Make sure your server-driven UI complies with them. When submitting your application for review, transparently describe your approach to UI development – this will make it easier to avoid many potential problems.

Offline work with the application: Since server-driven UIs depend on communication with the server, it can be very difficult to ensure they function properly when there is no network. Strategies such as caching help maintain a familiar application experience even without a network connection.

Performance Aspects: While server-driven UIs offer dynamic capabilities, when working with them you need to consider how they will impact performance. Efficient network requests and optimized rendering techniques help ensure a smooth user experience with the interface.

Additional difficulty: When implementing server-driven UIs during the development process, an extra layer of complexity can be added since the interface is controlled on both the server and the client. But, if you structure your approach to work well, and clearly divide areas of responsibility, this complexity can be effectively managed.

While these considerations come with their own challenges, they also open up new opportunities for problem solving and innovation. If you plan well and think through how to do everything, server-driven UIs can be an important addition to your developer arsenal.

Conclusion

When programming server-driven UIs, where UI elements are passed through APIs, the overall UI development landscape changes dramatically. By moving a significant amount of UI logic to the server, we achieve such dynamism and flexibility that we can try to completely reimagine the entire industry.

As mentioned above, this approach has many advantages: from immediate bug fixes to the participation of backenders in front-end development. In addition, server-side UI management helps to personalize the user’s experience with the application, making the experience more fun, and simultaneously improving client productivity while simplifying the experience.

In the world of advanced JavaScript development, server-driven UIs are not only a theoretical concept, but also a practical approach already used on major platforms. Server-driven UIs continue to push the boundaries of what’s possible in client-side development, and the more interesting this direction becomes.