Evaluation of Flutter Dynamic Frameworks: Fair 2.0, Kraken, and MXFlutter

This article evaluates three Flutter dynamic frameworks—Fair 2.0, Kraken, and MXFlutter—by comparing their architecture, developer experience, and performance metrics (package size, startup time, frame rate, memory usage) through a series of hands‑on experiments.

1. Preparation

All tests were performed on a fresh Flutter project created with Android Studio, using the default Counting example. Kraken was tested on Flutter 2.2, while MXFlutter and Fair were tested on Flutter 1.22 (the highest version each supports).

2. Initial Experience

Sample code for each framework is shown below.

Kraken (React‑style)

import React, {useState} from 'react';
const style = {
    app: {
        backgroundColor: '#ffffff',
        height: '100vh',
    },
    ...
};
const Home = () => {
    ...
    return (
动态界面 Home
...
);
};
export default Home;

MXFlutter (TypeScript/JS)

class MyHomePage extends MXJSStatefulWidget {
  public title: string;
  public constructor(title: string) {
    super('MyHomePage');
    this.title = title;
  }
  public createState() {
    return new _MyHomePageState();
  }
}

class _MyHomePageState extends MXJSWidgetState {
  public counter: number;
  public widget: MyHomePage;
  public constructor() {
    super();
    this.counter = 0;
  }
  public build(context: MXJSBuildContext) {
    return new Scaffold({
      appBar: new AppBar({title: new Text(this.widget.title)}),
      body: new Center({
        child: new Column({
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text('You have pushed the button this many times:'),
            new Text(`${this.counter}`, {style: Theme.of(context).textTheme.headline4}),
          ],
        }),
      }),
    });
  }
  public incrementCounter() {
    this.setState(() => { this.counter += 1; });
  }
}

Fair requires no code changes; the original Dart Counting code is transformed by the Fair Compiler into a layout DSL and a logic‑JS file, enabling dynamic updates without developer intervention.

3. Architectural Differences

All three frameworks use JSCore for dynamic logic, but their approaches differ: Kraken and MXFlutter drive UI and logic entirely with JavaScript, while Fair uses a DSL for layout and only minimal JavaScript for logic, keeping most work in native Dart.

4. Performance Comparison

4.1 Package Size

Fair produces the smallest package (≈13 MB) on both Android and iOS, while MXFlutter’s APK is 2–3 times larger than the others.

4.2 Startup Time

First‑frame rendering times are comparable across the three frameworks on both Android and iOS.

4.3 Frame Rate

Kraken shows stable frame rates on Android (120 Hz device) but lower rates on iOS; MXFlutter and Fair have similar, consistent frame rates.

4.4 Memory Usage

Kraken and Fair exhibit stable and lower memory consumption compared with MXFlutter.

5. Summary

From a user‑experience perspective, Kraken targets front‑end developers, MXFlutter suits developers familiar with both front‑end and native Flutter, and Fair offers the lowest integration cost for pure Flutter developers by leveraging a compiler‑based transformation pipeline.