Flutter rendering illustration

The central difference between Flutter and RN/Weex is that Flutter owns the rendering foundation. Flutter code passes through the Flutter engine and is rendered directly to the screen. RN/Weex code first runs through a Native layer, and that Native layer then renders it. The first path is clearly more efficient.

The Native component approach also creates a maintenance burden. Native components and APIs can be added, removed, or changed as systems upgrade, so RN/Weex need a large amount of glue code to adapt to different platform versions and different Native component sets. Flutter does not have this problem. The trade-off is that Flutter cannot directly use the rich components and properties exposed by Native in the way RN/Weex can. Instead, it relies on low-level APIs exposed by the Flutter engine and builds its own abstractions on top:

  • To offer Flex layout, it needs a Flex engine that understands Flex syntax from the upper layer.
  • To use a React-style DSL, the upper layer must implement a React-like framework that connects to the rendering API provided by the Flutter engine.
  • To support rounded corners, shadows, and similar effects, it must add rendering strategies for those effects.

Fortunately, the Flutter community has implemented separate widget sets for Android and iOS that match the style of each system and look like Native components. If those widgets do not meet a developer's needs, defining a new widget is relatively easy. This is friendly to developers: low-level APIs are available for building whatever effect is needed, and performance remains high.

Above the Flutter engine sits Dart. It provides the Flex layout capability, React-like DSL capability, animations, CSS rules, and more described above. These are implemented using the lower-level APIs that the Flutter engine exposes for rendering directly on the GPU.

Could someone write Flutter code using Vue's DSL? It is possible, but someone would need to build a Vue framework that interfaces with the rendering API exposed by the Flutter engine. The Flutter engine acts like a driver layer: it ensures rendering consistency across platforms, while developers build their own framework abstractions and component abstractions above that driver.

There may be some imprecision in this explanation, but that is the basic picture.