How Meituan’s Hybrid Architecture Accelerates Mobile App Updates

Introduction

Last weekend Wu Zhuo, iOS lead of Meituan’s travel business, shared Meituan’s hybrid construction for the hotel and travel domain at the T‑Salon. The talk focuses on why hybrid is used, the overall design, communication mechanisms, resource preloading, and comparisons with other solutions.

Why Adopt Hybrid?

Two main pain points drive the hybrid strategy: a long client release cycle, especially due to App Store review, and a severe shortage of front‑end resources.

Hybrid Design

Meituan adopts a strong mixing model of native and H5 pages.

Both native and H5 components coexist in the same flow, e.g., buying a train ticket involves native pages, H5 pages, and mixed components.

Key Challenges

Inconsistent release timing between H5 and native pages.

Bidirectional communication between H5 and native.

Closing the experience gap of H5 pages compared to native.

Solution to Timing Mismatch

Dynamic routing is achieved by extending URL parameters so that H5 pages can be launched without a new client release. Backend configuration can push routing updates to the app.

When a new product cannot be supported by the current native version, an H5 detail page and order creation page are added, allowing both new and existing users to access the latest product without a client update.

Bridge Protocol for Communication

The bridge protocol defines a two‑way communication channel. Three implementation options were evaluated:

URL interception : H5 triggers a custom scheme URL that the client intercepts.

Active polling : H5 stores messages as JSON; the client periodically polls for them.

JSContext : Direct method calls from H5 to native (supported on iOS 7+).

The chosen approach combines modular bridge definitions with a scalable registration system, allowing each business unit to plug in its own protocol.

Development & Debugging Workflow

Front‑end developers create a demo H5 page implementing the new bridge; native developers integrate the bridge in the client and provide a simulator build for the front‑end to test, enabling parallel development.

Improving H5 Experience

Two main gaps are rendering performance and resource loading speed. Meituan employs resource pre‑loading:

Leverage WebView’s built‑in cache and warm‑up a hidden WebView at app launch to fetch frequently used assets.

Maintain a custom offline package containing JS/CSS. The client intercepts resource requests, serves them from the local package, and updates them securely when needed.

Pre‑loading reduces load time dramatically, as shown by comparative charts where pages with offline resources load much faster than those without.

前置筛选页->车次列表页->车次详情页

Other Solutions Compared

React: low platform differences on Android but stability and talent acquisition issues.

Weex: explored internally but also limited by manpower.

Dynamic templating: ongoing research to deliver modular UI via backend configuration.

Q&A Highlights

• JS‑to‑Native can use URL interception, polling, or JSContext; each has trade‑offs in latency, concurrency, and OS support.

• Hybrid pages are used for fast‑iteration features such as international flight selection, train tickets (now mostly native), and ship tickets.

• Future direction favors native where possible; hybrid is kept for rapid iteration and non‑core flows.

• Updates are delivered via incremental offline packages to minimize download size and preserve security.