Sean Rucker

Server-Driven UI — Everything Old Is New Again

Over the years, client-server architecture has gone back and forth between thin and thick — from the thin clients of the mainframe era, to the birth of the personal computer, to the emergence of the internet and web browser. We’ve now settled in on a thick client again, with native mobile apps on iOS and Android. However, a new technique called server-driven UI is potentially steering us back in the other direction. Let’s take a brief tour of history and decide if we’re ready for the pendulum to swing back.

The Mainframe Era

In the 1960s and 70s, computers were big, expensive, and used mostly by large organizations. The impracticality of each user having their own bedroom-sized computer led to the development of mainframe technology, which allowed a single computer to be shared by many users. Each user accessed the shared computer, “the mainframe,” through a terminal that consisted mainly of a monitor and keyboard. Terminals could issue commands to the mainframe but contained very little computational capability on their own. Mainframes implemented a time-sharing system, allocating unused memory and CPU cycles to individual users as needed. The results from terminal commands were computed centrally and used to generate the user interface (UI), which was then sent back to the terminals to be displayed. Although the term wouldn’t be coined until 1993, these terminals were the very first thin clients — so named for their very basic computational capability and reliance on an external machine to generate the UI.

judo - design and build tool for SwiftUI apps

The Birth of the PC

The emergence of the microprocessor in the late 70s brought the cost and size of computers down significantly, and the personal computer (PC) was born. Now everyone had their own computers at their desks with their own processors and hard drives. The era of the PC brought about the advent of applications (software), which were installed and run on each user’s computer individually. This approach significantly improved the performance and user experience over that of the thin client terminals. Terminals relied on the mainframe to generate the UI for them and the computing resources were shared among all users. But the PC was a computer all on its own, and the applications installed on each user’s computer contained everything needed to display the UI. In contrast to the thin client terminals, these full autonomous PCs were the very first thick clients.

The Emergence of the Internet

The improved performance and user experience of the PC was a significant advantage over the mainframe, but the thick client approach came with its own set of problems. As organizations purchased computers for users, over time, the internal computing characteristics of each device began to diverge. Different computers were capable of running different versions of software, in turn introducing compatibility and maintenance headaches. Sharing data among users was also more complicated. Each computer was connected to a local network, and data was synchronized across individual hard drives. This was a step backward from the centralized data storage and simple maintenance offered by the mainframe.

In the 1990s, the internet become readily available to organizations, and as a result, websites accessed from a web browser brought back many of the advantages of the thin client. Computing resources were centralized on specialized machines called servers that were accessible to anyone with a web browser and an internet connection. The servers generated the UI and sent it to a user’s web browser using a standardized markup language called HTML. Web browsers still had to be installed on each user’s computer, but their performance requirements were minimal and solved many of the software compatibility issues faced by an organization. More importantly, the internet made software accessible across physical locations. The advantages of the internet and websites were so great that by the end of the 90s, they had overtaken installed applications as the primary way of using software — we had reentered the era of the thin client.

The Mobile Phone

In the 2000s, mobile phones started to become more sophisticated and capable of running software on their own. As a result, users now had computers with them everywhere they went. At the outset, the ability of phones to run software was limited, but they did contain basic web browsers capable of accessing the same websites as desktop computers. In turn, website publishers began adapting their UIs to accommodate the smaller screen sizes of mobile phones.

Accessing websites from a mobile phone was using the device as a thin client: The server had to send the entire UI to the user’s phone over the internet, the same as it did for desktop computers. But at this point in time, cell networks were slow and coverage was spotty. Browsing websites was a frustrating experience.

In 2007, the iPhone launched and changed what was possible with a mobile device. Instead of relying on websites to access software, the iPhone came with a comprehensive suite of installed applications, just like the original PCs of the 90s. In 2008, Apple brought the App Store to the iPhone and opened the development of installed applications to third parties. Shortly after, Android followed suit with the Google Play Store. These apps offered a significantly better user experience — everything needed to display the UI was contained within the installed application and didn’t require an internet connection to function. At the time of writing this post, the App Store has 1.96 million apps available for installation, and the Play Store has 2.87 million. The thick client is once again reigning supreme.

Server-Driven UI

Over the past four decades, software delivery has oscillated between thin and thick clients, with thick clients dominating on mobile in the form of native apps. The same problems of software updates and compatibility issues we experienced in the 90s with the PC are still prevalent on mobile devices. App developers have to accommodate a user base on both iOS and Android, with varying versions of each operating system installed. Delivering updated versions of their apps to their users requires a review process and for each user to opt in to the updated version.

The connectivity issues that hampered mobile devices in the past are largely solved at this point. We can now safely rely on users having access to a reliable internet connection. Is it time for the thick-versus-thin client pendulum to swing back in the other direction?A new technique called server-driven UI (SDUI) has started to gain momentum with mobile app developers. Server-driven UI brings some of the benefits of the thin client to native apps. With an SDUI approach, parts of a native app’s UI can be driven by the server and delivered to users’ devices over the internet. This allows the UI within a native app to be updated instantly without requiring a new version of the app to be installed, thus alleviating the need for the developer to release a new version through the app store review process. All users see the latest version of the UI at the same time on both iOS and Android, regardless of which version of the app or operating system they’re running.

A Hybrid Approach

Native apps on mobile are capable of exceptional user experiences and truly powerful functionality. As such, converting apps to a thin client where the entire UI is driven by a server would have significant drawbacks. But developers can combine the best of both the thin and thick client approaches by utilizing SDUI for the parts of an app that need to update often and utilizing the traditional app development approach for the more complex parts.

Airbnb uses server-driven UI to iterate on and test different versions of its listing screen. Before SDUI, the company had to release a new version of its app each time developers wanted to try something different on the listing screen. With each new release, some users would update right away, some would take their time, and some wouldn’t update at all. This led to a fragmented user experience, with users seeing different versions of the listing screen depending on when they updated last.

Lyft has carved out a portion of its app’s main screen to be powered by server-driven UI. This space is used to display time-sensitive information to users. This allows developers to insert completely customizable messages when needed and ensure that all users will see the same message immediately, regardless of which version of the Lyft app they have installed. This proved incredibly valuable at the onset of COVID-19 when the company urgently needed to inform its users about driver scarcity due to the ongoing pandemic.Yelp provides a consistent experience across all its apps by using server-driven UI.

Yelp has both a consumer-facing app and an app for the businesses that list on its platform. Each of these apps has both an iOS and Android version, and portions of the UI in all four apps are the same. By powering parts of these apps with server-driven UI, Yelp can deliver a consistent experience that’s updated in real time for all users.

Conclusion

There are benefits to both thick and thin clients. Changes in processors and connectivity over time have led to both techniques being favored at a given time. With native mobile apps, software developers have been using a thick client approach for more than a decade, but perhaps server-driven UI can let us have our cake and eat it too.

We’re still in the early days of server-driven UI, but many companies are using it successfully on a large scale today. If you’re an app developer and have experienced the need to update instantly, iterate more frequently, and deliver a consistent user experience, you might want to explore SDUI further.

However, there are also other ways to drive these efficiency gains. At Judo, we've built a visual build tool that empowers designers and developers to design and iterate on native UI in a fraction of the time. Try it for free here.