Picasso: Meituan's High‑Performance Cross‑Platform Dynamic UI Framework

Background – Picasso is a self‑developed high‑performance cross‑platform dynamic framework created by the Meituan/Dianping mobile R&D team. After more than two years of evolution, it is already deployed at large scale across multiple business groups.

Picasso originates from a re‑thinking of the "big front‑end" practice. It aims for concise, efficient architecture to achieve high‑performance page rendering. The framework can even be used to migrate native code to Picasso as a performance‑optimization technique, and it has made breakthrough progress in unifying Android, iOS, H5 and WeChat Mini‑Program development.

Problems of the static client development model

The traditional static development model brings several pain points for large‑scale mobile apps:

Excessive compilation time as code complexity grows.

Rapid growth of the app package size.

Severe runtime coupling – crashes or memory leaks in any component affect the whole app.

High integration difficulty due to tangled business, framework and base‑service layers.

From a temporal perspective, every bug fix or new feature requires a full release or hot‑fix, which is costly and slows down agile iteration.

Industry trends

Early solutions used Web technologies to achieve dynamic updates, but they sacrifice performance and interaction quality. React Native introduced a "standard Web browser" on native platforms, yet it suffers from compatibility, stability and performance issues.

Picasso offers a different answer: a high‑performance dynamic framework that keeps the rendering speed of native code while providing the flexibility of dynamic pages.

Picasso dynamic principle

Developers write layout logic using a general‑purpose programming language‑based DSL. The DSL computes a PModel – a data structure containing layout, view hierarchy, text and image URLs – based on screen size and business data. The rendering engine then recursively builds a native view tree from the PModel, without a separate layout‑calculation step ("expression = calculation").

Typical development flow:

Write Picasso app code in TypeScript within VSCode.

CI performs linting, packaging and gray‑release.

The app is delivered as a JavaScript bundle to the client.

The Picasso SDK interprets the bundle, enabling dynamic business logic on the device.

Picasso Layout DSL

The DSL is built on a general‑purpose language and supports an anchor concept, allowing developers to describe relationships such as "B is to the right of A with a margin of 10, top‑aligned". This reduces the semantic gap between design intent and implementation.

Typical anchor‑based layout examples (code is kept intact):

<code style="line-height: 18px; font-size: 14px; font-family: Consolas, Inconsolata, Courier, monospace; color: rgb(169, 183, 198); padding: 0.5em; display: block !important">    view.centerX = bgView.width / 2
    view.centerY = bgView.height /2
</code>

Right‑aligned:

<code style="line-height: 18px; font-size: 14px; font-family: Consolas, Inconsolata, Courier, monospace; color: rgb(169, 183, 198); padding: 0.5em; display: block !important">    view.right = bgView.width - 10
    view.centerY = bgView.height / 2
</code>

Relative arrangement:

<code style="line-height: 18px; font-size: 14px; font-family: Consolas, Inconsolata, Courier, monospace; color: rgb(169, 183, 198); padding: 0.5em; display: block !important">    viewB.top = viewA.top
    viewB.left = viewA.right + 10
</code>

Complex layout can be expressed concisely with helper functions such as hlayout:

<code style="line-height: 18px; font-size: 14px; font-family: Consolas, Inconsolata, Courier, monospace; color: rgb(169, 183, 198); padding: 0.5em; display: block !important">    hlayout([v1, v2, v3, v4], { top: 10, left: 10, divideSpace: 10 })
</code>

Performance advantages

Layout expression and calculation happen simultaneously, eliminating redundant layout passes.

Flat view hierarchy – no extra layers introduced for layout logic.

Pre‑computation can be off‑loaded to background threads.

These characteristics give Picasso near‑native rendering speed, even surpassing native implementations in complex scenarios.

Internal adoption at Meituan

Since its internal release, Picasso has been adopted by more than 80% of business development teams within Meituan. It powers a growing ecosystem of animation, dynamic modules, Web‑to‑native bridges, and shared components. The team maintains the SDK, CI system, VSCode debugging tools, and a unified distribution platform.

Future outlook

Picasso is extending its support to Web and Mini‑Program platforms, aiming for a unified four‑terminal (Android, iOS, Web, Mini‑Program) big‑front‑end practice. Although not open‑source yet, interested developers are invited to join the Meituan/Dianping family.

Author bios

Xiaoyan – Lead of the Picasso core SDK team, 8 years of mobile development experience, joined Meituan in 2012.

Dawei – Project lead of Picasso, responsible for Meituan’s mobile platform and continuous delivery.