BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Reddit Adopts Server-Driven UI for Its New Feed Architecture across Mobile Apps

Reddit Adopts Server-Driven UI for Its New Feed Architecture across Mobile Apps

This item in japanese

Reddit reworked its feeds functionality in the iOS mobile app and introduced it to the Android app. In both cases, they used the Server-Driven UI (SDUI) as their communication approach, which allows localized content layout changes without mobile app releases.

In 2022, the company committed to making Reddit easier to use, and since then, several improvements have been made, including better posting experience, searchable comments, and updated moderator tools. This year's main focus is on new and improved feeds with better user experience. The team has taken on building a new feeds platform from scratch. The move was primarily dictated by the pains of working with previous feeds architecture.

Kirill Dobryakov, senior software engineer at Reddit, summarises the challenges with previous feeds implementation:

Last year, our feeds were pretty slow. [...] our feeds code had grown into something of a maintenance nightmare. The current codebase was started around 2017 when the company was considerably smaller than it is today. Many engineers and features have passed through the 6-year-old codebase with minimal architectural oversight. Increasingly, it’s been a challenge for us to iterate quickly as we try new product features in this space.

Feeds are the core part of Reddit’s functionality. The team wanted to ensure that the new platform enables better feature velocity, offers much better performance, and provides consistency across different devices and surfaces.

On the backend side, the team retained GraphQL but reworked its API response object structure. Instead of serving large post objects containing all available attributes across many post types, the team adopted Server-Driven UI (SDUI) and sent the exact UI elements the client app would render. The new response structure organizes UI components into groups of generic cells. That way, the backend can control much of the layout and quickly introduce new content elements. Mobile apps focus on rendering elements described in the API responses without knowing how to display different post types and other content.

API responses before and after adopting SDUI (Source: Reddit Engineering Blog)

As part of the project, the team replaced one of the oldest parts of the iOS app, primarily written in Objective-C, that wasn’t actively maintained, with a new implementation written in Swift. The previously used UI engine, Texture, which caused hard-to-debug crashes, was replaced with SliceKit, and the new code also utilizes the Combine framework.

The team made sure to modularize the new codebase, which helped reduce the build time and improve testability and test coverage. They also leveraged the new components library, implementing a standardized design system to achieve visual consistency across all feeds. The updated tech stack resulted in a safer and quicker-to-develop codebase while removing unnecessary data from API responses reduced latency, making the home feed 12% faster to load.

iOS Architecture (Source: Reddit Engineering Blog)

The feed architecture consists of chainable data source services, converters for the parallel transformation of data models into view models, and a diffing engine (part of SliceKit) that can work out how to apply changes between previous and new view model snapshots.

About the Author

Rate this Article

Adoption
Style

BT