When we designed the home screen of the Zalando App, we faced three challenges. Firstly, the home screen consisted of several components developed and delivered by individual teams, without former native development experience. Secondly, we believe that the first impression for customers - our home screen - must have a premium look and feel, and therefore decided to build it in a truly native fashion. The last challenge was that the release cycle of our app is measured in weeks, and we would like to deliver content on a daily basis.

In this article we will describe our solution for these three challenges - Truly Native Apps (TNA). We start by introducing a UI language that is used to declare elements like scrollable lists, images and text, and the composition of such elements. Its JSON format is input for the Flexible Layout Kit. The Kit is an SDK available for Android, iOS, and Windows phones that renders the described elements as native views on the respective platforms. The JSON will be served by the Kit’s backend called the App Layout Service, which we are currently about to bring to production. This service will fetch content from several internal providers, for example, from our CMS or advertisements. The main use case of the service will be to aggregate individual content and serve it to the Flexible Layout Kits in the apps.

We will start this blog with a simplified version of Zalando’s home screen as an example. Based on this example we explain the JSON format and the views the Flexible Layout Kit will render. We proceed by explaining how the App Layout Service fetches and aggregates content from the content providers. Finally, we compare our solution with related technologies and conclude with a summary of the approach and a short outlook.

The Flexible Layout Kit

Swipeable lists, videos, carousels, product catalogs, and more - all of these elements are displayed with TNA on our home screen. For the sake of simplicity, we use a version of the screen which consists only of a teaser and an image (see left part of Figure 1 – an example home screen showing a teaser and an image).

Conceptually, we represent the home screen by a vertical list (see right part of Figure 1). Each item of this list is a slot for content. The slots’ content is described by a set of predefined elements that are part of the TNA language. In TNA, there are basic elements like text or images, and complex elements that are composed of these basic elements. For example, the first slot of the home screen is filled by a teaser. The teaser is composed of a background image and two areas of text, one for the title and one for the teaser’s subtitle. Thus it is a complex element. In the second slot we use a basic element, the image element.

The Flexible Layout Kit’s input is a JSON that declares the slots and elements of the home screen (see Listing 1). The JSON describes the elements by type and a set of attributes. The first element is the vertical list as the container of the screen. The vertical list is composed of a teaser element and an image as subelements. The element’s attributes are used to declare the details of the elements. Examples are image urls and sizes, or the font and color of a text.

{
    "element-type": "vertical-list",
    "subelements": [
        {
            "element-type": "teaser",
            "subelements": [
            {
                "element-type": "image",
                "attributes": { … }
                },
            {
                "element-type": "text",
                "attributes": { … }
            },
            {
                "element-type": "text",
                "attributes": { … }
            }]
        },
        {
            "element-type": "image",
            "attributes": { … }
        }
    ]
}

When the Zalando app is opened, we download the home screen’s content. The Flexible Layout Kit traverses the described vertical list and renders the individual slots and elements using native implementations from Android, iOS, or a Windows phone. The result is our simplified home screen - truly native and updateable from the server continuously.

The App Layout Service

The content of the home screen’s slots is produced by content providers (see Figure 2). Examples for providers are the CMS, Brand Shops, or Advertisements which serve editorial content, brand pages, and advertisements, respectively. The providers describe their content using the TNA JSON notation for an element. The basic idea is that the elements are placed into slots of a vertical list. The vertical list is served to the apps where the Flexible Layout Kit renders the list to produce the home screen.

The process of fetching and placing the content is implemented by the App Layout Service. The service is built based on the concept of Zalando’s open source project Tailor, i.e. we describe the canvas of our home screen statically and fill the screen with dynamic content which is fetched from microservices. In our setup, we use a template that contains a vertical list with its subelements as static part (see Figure 3 – a TNA template which references teasers and an ad image). References within this template point to content via a URL and define the dynamic part. For every reference, the App Layout Service fetches a TNA element from the content providers and places it into the list. This way, the slots of our vertical list are filled. The list is finally served to the devices’ Flexible Layout Kits which render the home screen.

Related Technologies

On each platform, the Flexible Layout Kit implements rendering using native platform components. Compared to React Native, the Flexible Layout Kit has a lightweight rendering engine which doesn’t require the JavaScript virtual machine. It gives app developers the freedom to choose how to implement views, neither restricting to a specific native framework nor prohibiting the use of any of them. This allows the tuning of UIs according to platform guidelines, performance optimizations, and easily extending a rich set of UI elements. Additionally, content providers do not have to learn about native technologies.

On the downside, we have to maintain the Flexible Layout Kits on all of our three platforms, and keep TNA as a protocol between our app team and content providers with all the alignment overhead.

Facebook’s Component Kit takes a very sophisticated, declarative component approach to building UIs. Unfortunately, the Kit is neither available for Android nor for Windows Phone. The iOS Component Kit is written in C++ and cannot be bridged to Swift. On top of that, Component Kit does not specify a JSON notation which is a cornerstone to the continuous update approach in our solution.

Summary and Outlook

The objective of TNA is to deliver real-time, personalized content to our mobile applications in a platform-agnostic and declarative language, while being rendered natively for a rich and premium user experience. The introduction of a language to express these user interfaces is an important step towards potentially unifying how content providers across Zalando express their intent to deliver content through our mobile channels. Truly Native Apps is bringing these user experiences to life across all three mobile platforms.

Our next steps are to take the App Layout Service live, which will help us include even more content on our home screen. We’re also looking to evaluate React Native as part of our solution. We will be sure to keep you updated on the outcome. Stay tuned!

We're hiring! Do you like working in an ever evolving organization such as Zalando? Consider joining our teams as a Frontend Engineer!