Cross‑Platform Reuse Framework in Meituan Homestay: Design, Implementation, and Practice

From the PC era, through the mobile era, to the IoT era, the increasing diversity of terminal devices has driven the need for cross‑platform code reuse. Early solutions such as hybrid packages, JSC bridges, and React/ Vue based native containers (React Native, Weex) evolved into standardized mini‑program containers, spawning many multi‑platform frameworks (Taro, uni‑app, Rax, Remax).

Meituan Homestay, as a large‑scale business, has explored and iterated its own cross‑platform reuse framework to address business pain points. The article shares the background, design, and practical experience of this framework.

1. Background

1.1 Meituan Homestay Business Overview

Meituan Homestay provides a wide range of accommodation services (homestays, hotels, apartments, short‑term rentals, etc.). Rapid growth has led to increasingly complex supply‑side data, recommendation logic, and UI presentation, requiring a flexible front‑end architecture.

1.2 Current Mobile Architecture

The client evolved from a single‑platform native app to a multi‑app (Homestay App, Meituan App, Dianping App) native reuse solution based on React Native (RN), while the mini‑program side grew alongside WeChat mini‑programs, forming a separate mini‑program architecture.

Figure 1 shows the original mobile architecture: the RN layer sits above the native iOS/Android layers, exposing a standardized RN container that hides host‑app differences. The mini‑program side has its own simplified architecture with a multi‑platform adaptation layer.

Although RN already achieves iOS/Android reuse, maintaining separate codebases for the mini‑program still incurs double development effort. The key question is whether a single codebase can serve iOS, Android, and mini‑programs.

2. Cross‑Platform Reuse Framework Design

2.1 Industry Status

Various multi‑platform frameworks (Taro, uni‑app, Rax, Remax) compile DSL (React or Vue) into target platforms (mini‑programs, RN, H5). However, Meituan Homestay’s primary traffic comes from the app, so the solution must prioritize RN performance while also supporting mini‑programs. Existing frameworks do not satisfy the RN‑to‑mini‑program reuse requirement, prompting a custom solution.

2.2 Overall Solution Architecture

The architecture consists of a compilation phase and a runtime phase, both leveraging an MP‑Renderer (a React reconciler for mini‑programs).

Compilation Phase : Transforms RN source code into reusable artifacts:

Runtime Phase :

The merged template reduces the size of TreeData by up to 60 % by statically compiling and merging static nodes, while dynamic nodes remain handled at runtime.

Figure 2 illustrates the RN‑to‑mini‑program technical scheme.

3. Practical Experience

3.1 Issues in Cross‑Platform Scenarios

Product‑level differences (lightweight mini‑program vs. full‑featured app) create challenges for feature parity.

Quality risks due to compatibility, interface changes, and testing/monitoring gaps.

Process and governance complexities (branch management, code standards).

3.2 Application Architecture

The architecture is layered from bottom to top:

System Layer : iOS, Android, and mini‑program as separate system modules.

Base Service Layer : Company‑wide native and mini‑program infrastructure, including the MP‑Renderer.

Infrastructure Layer : MRN‑style base services, a unified mini‑program adaptation library (Mapping), and the React‑reconciler core.

Reuse Layer : Reusable components extracted from existing RN code, exposed via a unified interface. 3.3 跨端复用方式设计 Business Layer : Page containers that assemble reusable components according to platform‑specific needs.

3.3 Reuse Modes Design

Three reuse patterns are offered:

Page Reuse Mode : Entire page (logic, network, UI) is converted, achieving >90 % code reuse but with lower flexibility and higher bundle size.

Component Reuse Mode : Only business components are reused; page logic and network remain separate. This yields higher flexibility, better performance, and controllable bundle size, but lower overall reuse ratio.

Component + Logic Reuse Mode : Extends component reuse by also sharing the Redux‑based logic layer (state, network, reducers, sagas). This balances flexibility and reuse, reducing bundle size while keeping performance high.

3.4 Process Standards

A set of standards governs requirement evaluation, dependency analysis, RN component adaptation, mini‑program integration, testing, and release. Key steps include:

Assess whether a requirement needs cross‑platform synchronization.

Identify dependency chains and decide on joint or staggered delivery.

Define adaptation strategy (component vs. page mode).

Develop and test RN adaptation, then hand over NPM packages and documentation to the mini‑program team.

Perform dual‑side testing (RN and mini‑program) with coverage >90 % before release.

3.5 Quality Assurance

Measures include component interface maintenance, dependency management, double‑layer testing, unified exception monitoring, a dual‑side incident SOP, and strict process governance. These practices have prevented any production incidents for the Homestay cross‑platform reuse project.

3.6 Results

Metrics show significant improvements:

Code Reuse Rate : Up to 90 % for page mode, 76 % for component mode.

Productivity Gain : Up to 52 % reduction in initialization time and 80 % reduction in data‑loading time compared with the pre‑optimization baseline; performance comparable to or better than Taro 3.0.

4. Conclusion

The Meituan Homestay front‑end team built a custom RN‑to‑mini‑program reuse framework that addresses performance bottlenecks, reduces development effort, and ensures high quality through rigorous process and monitoring. The framework continues to evolve, aiming for further efficiency gains and broader applicability across Meituan’s product ecosystem.