Thresh: A Custom Flutter Dynamic Framework for Cross‑Platform Mobile Development

Since the birth of mobile front‑end stacks, developers have struggled with high dual‑platform development costs and slow release cycles. The article reviews three evolutionary stages—H5/WebView, RN/Weex, and Flutter—highlighting their benefits and limitations.

Manbang’s front‑end team, seeking better dynamic update capabilities, built a custom dynamic Flutter framework called Thresh and open‑sourced it in 2020.

1. Dynamic Thinking

The core goal is to give Flutter dynamic update ability while leveraging its high‑performance rendering and cross‑platform consistency, aiming to surpass React Native as a more suitable dynamic cross‑platform solution with low learning cost.

Common dynamic approaches are discussed, including Flutter binary replacement, component‑based assembly, custom Dart conversion, and custom DSL + JS engine execution, each with trade‑offs.

2. Thresh’s Choice

Considering Manbang’s need for Android and iOS dynamic updates, binary replacement alone is insufficient. Component‑based assembly lacks complex interaction support, and custom Dart descriptions impose learning overhead. Therefore, Thresh adopts a custom JS‑described UI with a JS engine, using a React‑like syntax and supporting JavaScript/TypeScript.

3. Implementation Principles

Flutter’s UI is built from Widgets forming a WidgetTree, which generates an ElementTree and a RenderObjectTree. Thresh reconstructs the first tree (WidgetTree) via JavaScript, mapping JS components to Flutter widgets.

Key steps include:

Flutter initialization (via main() ), establishing MethodChannel with native code.

Generating a WidgetTree from JS‑written JSX (React‑style).

Bidirectional communication between JS, native, and Flutter using method channels.

Half‑duplex message flow with identifier‑based callbacks for cases requiring feedback.

When a JS event triggers, its ID, page name, and node ID are sent to Flutter, which creates a corresponding Flutter event function. The event propagates back to JS, where the appropriate handler executes.

Component updates follow a diff‑like algorithm: custom JS components are queued, de‑duplicated, and merged into parent updates, then transformed into Flutter StatefulWidget updates.

4. Engineering and Tooling

Thresh’s ecosystem includes CI/CD, X‑RAY gray‑release system, hot‑reload, debugging panels, and plugin‑based project templates, enabling rapid development, debugging, and deployment.

Performance metrics (FPS, bundle load time, render time, communication latency) show average first‑paint times around 400 ms for a 1 MB bundle, meeting Manbang’s requirements.

5. Real‑World Adoption

Thresh powers eight Manbang driver and shipper apps, covering over 20 pages and serving more than ten million daily page views with a JS error rate below 0.001%.

6. Conclusion and Outlook

The team plans to refactor the DSL to align with the React ecosystem, enhance infrastructure (APM, containerization), and further optimize communication and engine startup performance.