Skip to content

CONCEPT Cited by 1 source

Flexbox as cross-platform layout primitive

Definition

Flexbox (CSS Flexible Box Layout) is a web layout model — flex-direction / justify-content / align-items / flex / flex-wrap / … — for arranging items along a single axis with optional wrapping and proportional sizing. Originally a CSS spec, it has been re-implemented on mobile (iOS + Android + React Native via Meta's C++ Yoga engine) and is widely used as a platform-neutral layout description that web, iOS, and Android can all render.

When an architecture adopts Flex as the layout language between a server and multiple clients (web, iOS, Android), Flex becomes a cross-domain lingua franca: a single layout-spec vocabulary that any consumer can interpret without learning a platform-specific layout engine.

Why it's useful for server-driven UI

An SDUI system has one authoring surface (the server) and N rendering surfaces (web + iOS + Android + anything else). Layout needs to be expressible in a language that:

  • Is familiar to web developers (who typically author SDUI screens).
  • Is cheap for native clients to implement — ideally via an off-the-shelf library.
  • Is semantically identical across platforms, so a layout authored once matches the designer's intent everywhere.

Flex meets all three — web devs know it natively, Yoga + the Flex semantics are available as libraries for iOS + Android, and the spec is tight enough that cross-platform parity is achievable.

Zalando Appcraft's adoption

Appcraft adopts Flex as its single layout language (Source: sources/2024-05-15-zalando-transitioning-to-appcraft-evolution-of-zalandos-server-driven-ui-framework):

"Flex was key in helping to build a common understanding of layout concepts for mobile clients, which web developers could also grasp without the need to learn the individual mechanisms each platform uses to lay out views on a screen. It offers flexibility for dynamic and responsive designs across platforms, streamlines development, fosters cross- platform compatibility, and benefits from a large community of developers."

Appcraft sends Flex specifications in the flex field of each component tree node. On the client:

  • iOS: a Flex library on top of Texture translates the Flex spec into a Texture node tree that renders as a UICollectionView etc.
  • Android: a Flex library on top of Litho (which internally uses Meta's Yoga C++ Flex engine) does the same, producing a RecyclerView.

The post notes that most of the Appcraft team's iOS/Android layout work went into "translating the Flex definitions from the server into the Flex library APIs for each platform and comparing them to ensure consistent results between both" — i.e. cross-platform parity is earned, not free.

Precedent

  • React Native — uses Yoga to port Flex to native iOS/Android; this is arguably the canonical precedent for "Flex on mobile".
  • Flutter — ships a Flex-inspired layout API (Flex, Row, Column).
  • SwiftUI — adopts Flex-ish semantics on stacks (HStack, VStack).
  • Jetpack Compose — same.

Appcraft is the SDUI variant: Flex as the wire format between a server and native clients, not just the authoring API inside a framework.

Trade-off: expressiveness vs parity

Flex is not a full layout language. It does not natively handle:

  • Grid layouts (need CSS Grid or explicit stacking).
  • Complex overlapping / Z-indexed positioning.
  • Parent-size-dependent absolute positioning.

An SDUI that uses Flex exclusively is making the trade — the layout vocabulary is narrower but platform parity is easier to achieve.

Seen in

Last updated · 550 distilled / 1,221 read