过渡到Appcraft：Zalando服务器驱动的UI框架的演变

At the heart of Zalando's mobile content strategy lies the Appcraft platform, fueling 13 dynamic pages within the app. This framework is instrumental in delivering top-tier content formats, including the popular Zalando Stories. In this post we explain the origins and inner workings of the platform.

Zalando的移动内容策略的核心是Appcraft平台，为应用程序中的13个动态页面提供支持。该框架在提供顶级内容格式方面起着重要作用，包括流行的Zalando Stories。在本文中，我们将解释该平台的起源和内部工作原理。

The TNA Dilemma

TNA困境

The Flexible Layout Kit (formerly known as Truly Native Apps, TNA was a framework used in Zalando App to render content dynamically. This framework processed JSON input, which defines the slots and elements of a screen. These elements were characterised by their types and a set of attributes. The primary container of the screen was a vertical list type, which encapsulated a series of Composed Tiles within client-side Apps. While this system initially provided simplicity and a robust foundation for dynamic landing pages within our Apps, its fixed UI structure imposed constraints. Notably, maintaining the high-level composed UI components across both iOS and Android clients proved challenging, mainly due to versioning but also due to constant UI design changes and the introduction of multiple variants for a single Tile in order to support our different business logic and content formats. These limitations inhibited innovation and hindered the seamless integration of dynamic content.

灵活布局工具包（以前称为真正的原生应用程序，TNA）是Zalando应用程序中用于动态呈现内容的框架。该框架处理JSON输入，该输入定义了屏幕的插槽和元素。这些元素由其类型和一组属性来描述。屏幕的主要容器是一个垂直列表类型，它在客户端应用程序中封装了一系列组合瓷砖。虽然这个系统最初为我们的应用程序中的动态落地页提供了简单性和坚实的基础，但其固定的UI结构却带来了限制。特别是，在iOS和Android客户端之间保持高级组合UI组件的一致性证明是具有挑战性的，主要是由于版本控制的问题，同时还由于不断变化的UI设计和为了支持不同的业务逻辑和内容格式而引入的单个瓷砖的多个变体。这些限制阻碍了创新，并妨碍了动态内容的无缝集成。

Example of a component in TNA: These were the Showstopper Tile variants (C and D shown below) in TNA framework

TNA中一个组件的示例：这是TNA框架中的Showstopper Tile变体（下面显示的是C和D）

Version C	Version D

Version C	Version D

The json for Version D looked like below:

版本D的json如下所示：

{ "element-type": "tea...