Transitioning to Appcraft: Evolution of Zalando’s Server-Driven UI Framework
Article Summary
Zalando powers 13 dynamic mobile pages without waiting for app store releases. Here's how they built a server-driven UI framework that ships changes same-day.
Zalando's mobile team evolved from their rigid TNA framework to Appcraft, a flexible server-driven UI system. The shift eliminated versioning headaches and enabled rapid iteration across iOS and Android using Elm architecture and Flexbox layout.
Key Takeaways
- Appcraft serves 13 dynamic pages including Zalando Stories with same-day deployment
- Elm architecture plus Flex unified iOS and Android layout paradigms
- Server-side versioning eliminated client coordination and backward compatibility issues
- Primitive components (Label, Button, Image) compose into complex UIs server-side
- Reduced MTTR during incidents and survived Cyber Week at scale
By moving UI logic server-side with primitives and Flex layout, Zalando ships mobile UI changes instantly without app releases or cross-platform coordination.
About This Article
Zalando's TNA framework required new app store releases whenever they made minor UI changes, like moving a button around. Keeping high-level composed components consistent across iOS and Android was difficult because of versioning conflicts and the constant stream of design variants.
Zalando built Appcraft using Elm architecture and a Flex layout system. They chose Texture for iOS and Litho for Android. This let them convert server-side Flex definitions into native UICollectionView on iOS and RecyclerView on Android.
Appcraft meant UI changes no longer required app releases. Engineering effort dropped during app redesigns compared to pages that weren't backend-driven. Incident response got faster too, since they could deploy fixes to the server the same day. The system handled Cyber Week traffic without issues.