How JavaScript Powers a High‑Performance Dynamic Flutter Framework

Introduction

In October 2018 the QQ mobile team tried to integrate Flutter into an iOS product and quickly discovered that the lack of runtime dynamic updates was a major obstacle. To achieve dynamic updates without relying on Google’s limited solutions, they built a complete dynamic solution called MXFlutter (Matrix Flutter).

Core Idea

MXFlutter moves the first of Flutter’s three rendering trees into JavaScript, fully implementing the widget layer in JS. Developers write Flutter‑style UI in JavaScript, which generates a UI description passed to the Dart engine to create real Flutter widgets, achieving full dynamic updates on iOS.

Architecture Overview

The framework consists of a lightweight JavaScript runtime (JavaScriptCore), a JS‑implemented widget tree, and a bridge to the native Dart engine. The JS side creates MXJSWidget subclasses, which produce a MXWidgetTree that the Dart side renders.

class JSPestoPage extends MXJSWidget {
  constructor() {
    super("JSPestoPage");
    this.recipes = recipeList;
  }
  build(context) {
    let statusBarHeight = 24;
    let mq = MediaQuery.of(context);
    if (mq) { statusBarHeight = mq.padding.top; }
    let w = new Scaffold({
      appBar: new AppBar({ title: new Text("Pesto Demo") }),
      floatingActionButton: new FloatingActionButton({
        child: new Icon(new IconData(0xe3c9)),
        onPressed: this.createCallbackID(function () { })
      }),
      body: new CustomScrollView({
        semanticChildCount: this.recipes.length,
        slivers: [ this.buildBody(context, statusBarHeight) ]
      })
    });
    return w;
  }
  // ...buildAppBar, buildBody omitted for brevity
}

Dynamic Rendering Strategies

Two main approaches were explored:

Static Dart parsing to generate JSON UI descriptions – rejected because it cannot express logic or functions.

Running Dart code at runtime to produce UI descriptions – also problematic due to large binary size when embedding a Dart VM.

Final Solution: JavaScriptCore Replacement

Replacing the Dart VM with JavaScriptCore provides a lightweight runtime that does not increase the app package size, offers fast execution (≈3× Dart VM), and shares a similar syntax with Dart, making conversion straightforward.

Performance Benefits

No additional package size on iOS.

JS execution is three times faster than Dart VM for generating a 1 MB JSON.

Native‑JS interop is simpler than Dart‑Native.

Rendering Optimizations

MXFlutter implements several optimizations:

Local refresh via explicit diffing controlled by developers.

Separate dynamic and static sub‑trees using MXStatelessWidget to cache unchanged parts.

Efficient list rendering by pre‑building children in JS and mapping them to native Flutter widgets.

preBuild(jsWidget, buildContext) {
  if (this.builder) {
    for (let i = 0; i < this.childCount; ++i) {
      let w = this.builder(buildContext, i);
      this.children.push(w);
    }
    delete this.builder;
  }
  super.preBuild(jsWidget, buildContext);
}

Memory and Threading

Object lifetimes are managed primarily by the Flutter layer, with weak references in the JS VM to avoid retain cycles. The VM runs on a dedicated background thread, but a custom FlutterEngine can route calls directly on the UI thread to reduce thread switches.

Developer Experience

MXFlutter aims to let developers write idiomatic Flutter code in JavaScript, supporting the same widget classes, state management, callbacks, and list builders. The framework automatically generates callback IDs and binds this for event handling.

Conclusion

MXFlutter demonstrates that a JavaScript‑based runtime can provide high‑performance, fully dynamic Flutter UI on iOS without inflating the binary size. The project is open‑source on GitHub, and the team invites contributions to address remaining bugs and extend capabilities.