Mobile Development 12 min read

Introducing JDFlutter: A New Cross‑Platform Development Framework for JD.com

JDFlutter is JD.com’s next‑generation cross‑platform framework that integrates Flutter into existing Android/iOS projects, offering a rich UI component library, native API bridges, debugging tools, data statistics, and a roadmap for future multi‑engine development alongside JDReact.

JD Tech
JD Tech
JD Tech
Introducing JDFlutter: A New Cross‑Platform Development Framework for JD.com

JDFlutter, launched by JD.com’s Mall Shared Technology Department, is a new cross‑platform development framework that can be quickly integrated into existing Android and iOS projects, enabling developers to build Flutter‑based business features using a comprehensive UI component library and rich native APIs.

Flutter, originally released by Google in 2018, is an open‑source SDK that supports high‑performance, high‑fidelity apps on Android and iOS, offering Material and Cupertino design systems and a Skia‑based rendering engine that ensures consistent cross‑platform experience.

When choosing between JDReact and Flutter, JDReact is preferred for scenarios requiring hot‑fixes or dynamic updates, while Flutter is suitable for features without such requirements.

The integration process involves creating a Flutter module, adding it as a dependency to the host app, and configuring a lightweight compilation script that does not affect the existing build pipeline.

JDFlutter’s architecture consists of three layers: a bottom layer providing gray‑release, downgrade, and data‑statistics functions; a core layer (JDFlutter‑core‑widgets) offering UI components that follow JD’s design standards and support both Material and Cupertino styles; and a top integration layer handling business‑level integration for Android and iOS.

To reuse JDReact’s extensive native API set, JDFlutter adopts a unified interface approach: native code implements both JDReact and Flutter adapters, JDReact exposes APIs via JSBridge, and JDFlutter uses MethodChannel to expose the same APIs to Dart, with secondary wrappers on both sides for seamless business development.

Business integration is organized under a single lib directory, with each feature isolated in its own sub‑directory and shared assets placed in an assets folder, enabling independent development and online deployment.

Debugging is facilitated through the MarsWorks backend, which provides a JDFlutter debugging UI; developers can launch debugging on a connected device, make code changes, and trigger hot‑reload directly from the IDE.

A demo showcases the JDFlutter‑based sign‑in leaderboard page, which matches the performance and user experience of the original JDReact implementation.

Data statistics are built into JDFlutter, supporting both business metrics (DAU, UV, PV) and exception monitoring. Three data‑collection strategies are offered: instrumentation at native entry points, page‑level Flutter entry points, and in‑page Flutter widgets, with JDFlutter already implementing the first two.

Exception monitoring captures various crash types, enriches reports with business names and navigation parameters, and enables targeted downgrade handling when error rates spike.

JDFlutter also includes a downgrade‑and‑disaster‑recovery mechanism that falls back to JDReact or an H5 page based on availability, ensuring service continuity.

Looking ahead, JDReact remains the primary cross‑platform solution for JD’s apps, but JDFlutter will continue to grow, eventually forming a dual‑engine ARES platform that supports both ReactNative and Flutter.

The article concludes with a glossary of key terms such as JSX, JSBridge, Skia, Widget, bridge, sub‑package mechanism, native API capability, and Plugin.

DebuggingFlutterMobile DevelopmentCross-PlatformIntegrationData AnalyticsJDFlutter
JD Tech
Written by

JD Tech

Official JD technology sharing platform. All the cutting‑edge JD tech, innovative insights, and open‑source solutions you’re looking for, all in one place.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.