Skip to content

SYSTEM Cited by 1 source

Zalando Truly Native Apps (TNA)

What it was

Truly Native Apps (TNA) was Zalando's first-generation server-driven UI framework for the Zalando mobile app. Also referred to as the "Flexible Layout Kit", it was introduced in 2016 and retired in favour of Appcraft starting 2018 (Source: sources/2024-05-15-zalando-transitioning-to-appcraft-evolution-of-zalandos-server-driven-ui-framework).

TNA is documented in Zalando's 2016-07 "An introduction to Truly Native Apps" post (referenced but not re-ingested) and summarised in the 2024 Appcraft retrospective as the system Appcraft replaced.

Shape

  • JSON input defining slots + elements of a screen.
  • Elements characterised by type + attributes.
  • Outermost container: a vertical list type, encapsulating a series of Composed Tiles.
  • Composed Tiles were high-level UI components shipped as whole units by the client — e.g. a "Showstopper Tile" with named variants (Version C, Version D). A Version D tile shipped a specific schema with subelements teaser → image
  • text + … + use-voucher + show-info.

Example from the post:

{
  "element-type": "teaser",
  "attributes": {
    "trackingParameters": {},
    "saleBoxColor": "#FF0000",
    "teaserVersion": "VERSION_D"
  },
  "subelements": [
    { "attributes": { }, "element-type": "image" },
    { "attributes": { }, "element-type": "text" },
    { "attributes": { }, "element-type": "use-voucher" },
    { "attributes": { }, "element-type": "show-info" }
  ]
}

Why it was retired

Three structural failure modes, per the 2024 retrospective (Source: sources/2024-05-15-zalando-transitioning-to-appcraft-evolution-of-zalandos-server-driven-ui-framework):

  1. Small UI changes required a client release. Moving a button or adding a design variant meant a new Tile version, a client-side code change, and App-Store submissions on both iOS and Android.
  2. Business-logic changes forced triple-coordinated schema updates. A price-format change meant updating the price component contract on server and both clients.
  3. Backward-compat + versioning bugs caused incidents. iOS and Android app release versions were not always synchronised; coordinating which Tile versions each client supported caused production issues.

The decoupling cost was high enough that Zalando chose to decommission TNA rather than maintain its backend, and simultaneously rethink the client architecture. The result was Appcraft's three-decision replacement: Elm architecture + Flex + primitives instead of Composed Tiles.

Contrast with Appcraft

Dimension TNA (2016) Appcraft (2018+)
Container Vertical list of Composed Tiles Arbitrary Flex tree of primitives
Schema units Whole tiles (high-level UI) Primitives (Label, Button, …)
Version negotiation Server + both clients Server only
New screen Client release Server config + deep-link route
New UI variant Client release Server deploy
New primitive Client release Client release (still required)
Backend maintenance Decommissioned Active

Seen in

Last updated · 550 distilled / 1,221 read