How Zhihu Accelerated Mobile Ad Updates with the Morph DSL Native+ Solution

Background and Business Pain Points

In early 2018 Zhihu’s commercialization accelerated, creating strong demands for better product experience, faster iteration, and effect verification. Mobile user‑reach efficiency became a focus, and the commercial mobile team set OKRs of “empower” and “efficiency” to address three pain points: low efficiency of mobile demand reach and slow rollout of new product styles; coarse‑grained ad style experiments with complex code management; and poor performance and conversion of ad landing pages.

Morph Dynamic Solution Overview

From April 2018 the team built a mobile dynamic foundation called “Morph”, enabling step‑by‑step dynamic development and rollout of ad cards throughout the app.

Technical Selection

We needed a solution that supports cross‑platform hot updates, so we evaluated three directions: Web+ (WebView‑based), Native+ (GPL and DSL sub‑directions), and chose DSL Native+ based on Flexbox.

Web+: WebView implementation, fast iteration but limited performance.

GPL (Native+): Uses general‑purpose languages (e.g., JavaScript, Dart) with layout systems; offers flexibility but higher integration and learning costs.

DSL (Native+): Domain‑specific language that sacrifices some flexibility for performance, smaller framework size, and lower learning cost.

New dynamic solutions must satisfy “cross‑platform” and “hot‑update” requirements; therefore Android plugin‑based approaches were not considered.

Why Flexbox?

Flexbox provides maximum flexibility for box models, is cross‑platform, matches Zhihu’s existing ComponentKit stack, and has mature open‑source implementations (Yoga on iOS, FlexboxLayout on Android).

Why JSON?

JSON is already used for client‑server data exchange; switching to another format would add extra work, so we kept JSON to describe layout styles.

Architecture of Morph

We define a “style” as a JSON‑organized view‑tree description. The core flow is: write style → upload to server → cloud delivery → app parses and displays the ad.

Three endpoints are involved: ad request, style delivery, and a style‑management platform for CRUD operations.

Core Dynamic Capabilities (4 Parts)

This section discusses the core ideas behind Morph’s dynamic foundation, which was launched in June 2018 and has been iterated continuously.

1. DSL Definition

The Morph DSL is built on three pillars: Flexbox layout, JSON description, and a “type” attribute to distinguish component types. It defines six attribute groups: layout, view, data, interaction, condition, and container.

Layout attributes: Define the view‑tree structure and Flexbox properties.

View attributes: UI styles such as background color, opacity, corner radius.

Data attributes: Bind nodes to data fields.

Interaction attributes: Describe click or other events via ViewAction.

Condition attributes: Enable logical checks (or, and, not, notEmpty, empty, valueOf) to control visibility.

Container attributes: Root node must be a container with a children array.

2. Dynamic View Management

Style files are stored in a cloud style database and delivered incrementally based on the client’s supported style versions, minimizing transmission cost and ensuring compatibility.

3. View Construction

Each UI component has a dedicated parser. The parser uses the “type” field to instantiate the appropriate native view, bind data, and assemble the view tree recursively.

4. Data Binding

Data attributes reference JSON data using the <?…?> syntax. During binding, the parser resolves these references and sets the corresponding view properties (e.g., image URLs).

Conclusion

Since its launch in June 2018, Morph has supported 72 styles, 493 style iterations, and 50 releases, reducing the average dynamic‑update time from eight days to one day and saving an estimated 350 days of development effort. The solution integrates seamlessly with Zhihu’s existing stack, has minimal impact on app package size, and continues to evolve with new capabilities.