How JD Finance’s Dynamic Cross‑Platform Solution Slashes Development Costs

Introduction

Dynamic‑Cross‑Platform (Dynamic) is a self‑developed one‑code solution that runs on iOS, Android, H5 and HarmonyOS, reducing development manpower, enabling real‑time and A/B targeting, and ensuring excellent user experience.

Background

Current app development uses either native (high performance but low dynamism, long release cycles, no cross‑platform) or H5 (dynamic, instant release, multi‑platform but poorer experience and limited native capability). The article evaluates these approaches on business efficiency, user experience, and development cost.

Business efficiency suffers because native releases are tied to app store review cycles, limiting timely user reach. User experience degrades when page load exceeds 3 seconds, with high abandonment rates, and WebView suffers from rendering and JS performance issues. Development cost is high when four separate codebases (H5, Android, iOS, Harmony) are required.

Solution Overview

Existing cross‑platform frameworks (React Native, Weex, Mini‑Programs, Taro, Flutter, ArkUI‑X) aim to balance user experience with low manpower and fast delivery. The article compares them on development efficiency, performance, dynamism, rendering method, core language, learning curve, and package size, concluding that each has trade‑offs.

Dynamic combines the strengths of these frameworks and adds innovations such as card‑level dynamic rendering, high‑performance list, seamless framework upgrades, native‑like package splitting, and distributed real‑time preview.

Implementation Details

Source Code

The runtime consists of a JSEngine and business code (Hello.jue). JSEngine manages instance lifecycle, tasks, virtual DOM, diffing, rendering, and event dispatch. Business code follows a Vue‑like structure with template, script, and style, and extends tags for high‑performance list and waterfall components.

CLI

The CLI automates project scaffolding, compiles business code and JSEngine via a custom compiler loader, supports ES6 via Babel, handles image Base64 conversion, ZIP compression, hot reload, and runs builds in a cloud environment for security.

Artifact Management

Built artifacts are uploaded to a resource management backend offering encryption, gray release, long‑connection push, and A/B testing capabilities.

Runtime

On iOS the engine uses JavaScriptCore, on Android V8, and on Web WebKit. The engine loads early in the app, then decrypts and executes business JS files, creating instances managed by JSEngine.

Unified Interface Declaration

A common API defines instance lifecycle, element CRUD, bidirectional JS‑native communication, and hot‑reload, allowing platform‑specific adapters (e.g., Huawei Harmony) to implement the same contract.

Interface Implementation

Implementations create component trees, layout via a layout engine, render UI, and handle user interactions through the unified bridge, enabling any JS‑expressible business logic.

Application Scenarios

Card Scenario

Dynamic was first used in JD Finance’s app to enable modular card‑level updates without full app releases, achieving native‑like rendering speed and seamless integration with internal analytics.

Page Scenario

Extended to full pages, providing list, waterfall, pull‑to‑refresh components, hybrid routing, immersive navigation, and non‑intrusive automatic analytics and exposure tracking.

Future Scenarios

The framework can be expanded to power entire applications.

Future Plans

Explore extracting Flutter’s SKIA engine as the rendering backend to improve speed and consistency across platforms. Enhance DSL support based on Vue 3 virtual DOM separation and React Native’s rendering architecture, enabling projects built with Vue 3 or React to leverage Dynamic’s native rendering.

Conclusion

Dynamic is a comprehensive solution spanning JavaScript, iOS, Android, Java, Harmony, Vue, Node, and Webpack. The team invites feedback and encourages readers to like and bookmark the article.