Picasso: A Cross‑Platform Dynamic Layout Framework for iOS

Client layout is a fundamental and critical practice in mobile development; it accounts for about 80% of business development effort in well‑architected teams. Deep thinking and unified best‑practice guidelines are essential for boosting productivity.

While solutions like React Native and Weex aim to retain web‑style layout principles and improve performance via native rendering, the article argues that web‑centric layouts are not the only or best path for mobile.

The article introduces the "Crafted Layout" (匠心布局) practice from the Meituan‑Dianping iOS team and the cross‑platform dynamic layout framework named Picasso, which extends this practice.

Essence of Layout Logic

Layout fundamentally involves:

1. Specifying a view’s size and position
2. Responding to changes by re‑specifying size and position

Sources of change are divided into internal (content, internationalization, dynamic fonts) and external (multi‑screen adaptation, call‑record prompts, device rotation).

Traditional iOS development relied on Auto Layout, but pure code layout offers greater flexibility. The "anchor" concept (left, right, top, bottom, centerX, centerY, width, height) bridges the gap between design intent and implementation, allowing concise expressions such as:

view.centerX = bgView.width / 2
view.centerY = bgView.height / 2

and alignment examples:

view2.left = view1.left
view2.bottom = view1.bottom

These anchor‑based statements make layout code readable and maintainable.

Development Efficiency

Key factors for efficiency are instant feedback environments and expressive semantics. Tools like Interface Builder, Playground, Live Reload, and IntelliSense provide immediate visual results and step‑by‑step feedback.

The article highlights that front‑end developers benefit from rapid feedback loops, and similar principles can be applied to native mobile development via JavaScript‑driven frameworks.

Picasso Framework

Picasso implements the crafted‑layout philosophy. It executes layout logic written in JavaScript (via JavaScriptCore) to produce an intermediate model (PicassoModel), which is then rendered into native view trees on each platform. The framework supports:

100% unit‑test coverage for engine stability

Open, uniform extension mechanisms for custom controls

Live Reload development experience (VSCode + TypeScript + Babel)

Background thread layout computation for performance

Picasso also offers server‑side tooling for scaffolding, hot deployment, and best‑practice aggregation, dramatically improving developer productivity.

In summary, the crafted‑layout approach, anchored expressions, and the Picasso framework together provide a powerful, maintainable, and efficient solution for iOS and cross‑platform UI development.