How Yuque Built a Cross‑Platform App with ReactNative, Electron, and mPaaS

1. Yuque Overview

1.1 Simple Introduction

Yuque is a note and document knowledge‑base tool launched by Ant Group, used daily by over 100,000 employees of Ant Group and Alibaba Group, and also offered as a service to external users.

It provides desktop clients for Mac and Windows built with Electron, a mini‑program for mobile work scenarios, and a mobile App released in February, with Android and iOS screenshots shown.

1.2 Overall Technical Selection

Internally named Skylark, Yuque lives in a large monorepo that contains server, desktop, and mobile code.

The backend uses Node.js, Egg.js, and some Java/Kotlin services; the PC side uses React, the desktop side uses React + Electron, and the mini‑program uses React with an H5 offline package. The whole stack is based on JavaScript/TypeScript.

The team works in a full‑stack manner, handling both backend and frontend for each feature, which laid the foundation for the mobile App development described later.

2. Yuque App Architecture Design

2.1 Alibaba Cloud mPaaS

The app is built on Alibaba Cloud's mPaaS, a stable mobile development framework that offers configuration switches, push services, long‑connection sync, H5 containers, offline packages, mobile analytics, and gateway capabilities.

2.2 Mobile Architecture Idea

Using mPaaS as the base, the native framework layer is kept lightweight and decoupled from business logic. Rendering is handled by a hybrid approach, selecting native or H5 components based on page requirements, and supporting cross‑platform (isomorphic) development.

2.3 Mobile Solution Comparison

Various mobile development frameworks are compared: pure H5/Hybrid solutions have slightly lower performance, while pure native offers high performance at higher development cost.

2.4 Yuque's Choice

Yuque aims for a fluid native‑like experience, single‑code‑base development, fast Web‑style iteration, and reusable modules, ultimately selecting ReactNative as the business‑layer framework.

2.5 Yuque App Architecture Diagram

The bottom layer is mPaaS infrastructure, followed by a native capability layer providing account management, resource handling, dynamic features, and bridges. Above that, ReactNative and H5 communicate via RCTBridge and JSBridge, with CI/CD, DevTools, and testing supporting the upper business layer.

2.6 Three‑Layer Architecture

The app follows a three‑layer structure: Native layer (Kotlin/Swift), ReactNative layer (TypeScript/isomorphic Web) for performance‑critical pages, and H5 layer (offline packages) for fast‑loading pages.

2.7 Common JSBridge Design

A shared JSBridge allows both H5 and ReactNative to call common native services, with consistent request/response handling across platforms.

2.8 ReactNative ↔ H5 Bidirectional Messaging

Pages embed WebView/WKWebView for rich editing, using postMessage/onMessage for two‑way communication and callback support.

3. Cross‑Platform Isomorphic Practices

3.1 ViewModel‑Based List Pages

Common list pages across Web, mini‑program, and App share a ViewModel that manages loading, data fetching, and user actions, allowing UI rendering to be platform‑specific while reusing business logic.

3.2 Isomorphic Request Layer

Define a universal request API using fetch/get/post, etc.

Implement platform‑specific fetch adapters (browser fetch, AlipayJSBridge, LarkRCTBridge).

Use build‑time aliasing to replace request.js per platform.

3.3 Message Notification Isomorphism

Over 70 message types are rendered via a common builder that produces server‑side strings, H5 DOM elements, or ReactNative Views, avoiding duplicated implementations.

4. Sub‑Application Design

For modules requiring rapid updates, a sub‑application architecture enables independent maintenance and on‑demand loading, with RN code either bundled or delivered via CDN.

5. Performance, Stability, and Delivery

5.1 Performance Optimizations

Startup time is improved by merging splash and main activities and using a pipeline approach. The note editor is pre‑packaged for instant launch, and WebView resources are pre‑loaded and reused.

5.2 WebView Pre‑Creation + Reuse

A pool of pre‑created off‑screen WebView skeletons serves high‑frequency pages, reducing average opening time by ~67% on Android and ~70% on iOS.

5.3 Stability Monitoring

mPaaS SDK collects metrics, feeding them into internal dashboards, DingTalk alerts, and real‑time error reporting via Yuque channels.

5.4 Development & Delivery Efficiency

Weekly internal builds and bi‑weekly releases enable rapid iteration; the three‑layer architecture keeps native code service‑focused while ReactNative handles UI, facilitating fast feature rollout.

5.5 Delivery Quality

Automated testing runs daily on the latest builds, generating reports that trigger immediate bug fixes.

6. Summary & Future Plans

The three‑layer design balances business needs, existing codebase, and team capabilities, achieving high code reuse and development efficiency. Future work includes upgrading to Hermes and Fabric, and continued performance tuning.