Thresh: Enhancing Mobile App Performance with Flutter-Based Dynamicization and JSI Integration

Thresh is a Flutter-based cross-platform dynamic solution open-sourced by Manbang, targeting frontend developers to provide a native app experience through a simple, efficient framework with rich components and APIs.

It introduces an independent JavaScript runtime, allowing developers to write business logic in familiar JavaScript while achieving performance close to native applications.

The article first outlines the role of JavaScript engines in cross-platform systems, describing typical engines such as V8, JavaScriptCore, Hermes, and SpiderMonkey, and explains their execution flow from parsing to bytecode interpretation and JIT compilation.

It discusses common optimization strategies for JavaScript engines, including code caching, ahead-of-time (AOT) compilation, just-in-time (JIT) compilation, and code snapshots, highlighting how these techniques balance performance, memory usage, and startup time, especially on mobile devices.

It then explains the JavaScript Engine Interface (JSI) as an abstraction layer that shields differences between JavaScript engines, enabling engine switching without recompiling bindings, and notes its adoption in React Native, Node.js, and independent JS workers.

In the Manbang Thresh framework, the original communication path involved three language transitions (C++/Java/Dart) and three thread switches, with serialization and deserialization of JSON data across the JavaScript bridge, Flutter channel, and Dart side.

By implementing JSI-based C++ bindings, Thresh accesses JavaScript thread JSON data directly via shared memory, allowing the Dart thread to read from shared memory and build widgets, eliminating multiple language conversions, serialization steps, and thread scheduling, thus moving communication off the main thread and improving UI smoothness.

Performance tests on low‑end (Google Pixel 3) and mid‑high‑end (Huawei Mate 40) devices showed offline static list rendering performance improved by nearly 60%, and gray‑scale release reduced primary frame rendering time by about 25% on low‑end devices and close to 10% on high‑end devices for the Huochebang driver app short‑order page.

The article concludes with future work: building a unified JavaScript runtime to allow switching between V8, Hermes, or QuickJS based on device constraints, exploring JS‑Dart thread merging, generating render objects directly from rendering instructions, and integrating React Native ecosystems to lower developer learning costs.