Flutter from JavaScript

Thanks for the tag @rhymes ..

Hey @droidmakk !

THE SHORT VERSION:

Flutter apps are compiled directly from Dart source (Flutter app) into native executables (ARM code). They achieve performant (60fps) screen refreshes for smoother animations/transitions by working directly with the GPU and bypassing Android/iOS widget libraries altogether.

React Native by comparison involves having a JavaScript layer (application-managed views) and the native widgets layer (OEM-managed views) where the latter is responsible for rendering to the actual screen. So for every screen update, you are going from JS<==>native<==>graphics in RN, while with Flutter, you get just native<==>graphics (no JS bridges).

THE LONG VERSION:

I'd done a lightning talk ( slides here for reference ) where I had talked about this briefly if useful - my slides are adapted from some made by the Flutter team but any misinterpretation is mine.

I made a merged version of three slides o help explain this better

The short answer is as follows:

React pioneered the approach of having a Virtual DOM (application-managed view) on which developers made updates; the framework compared the changes against the real DOM (browser-rendered view) and patched the latter efficiently, making reactive updates more performant.

React Native adapted the approach to native mobile development by similarly allowing developers to work with virtual widgets (JavaScript defined views); the framework compared the changes against equivalent platform widgets (native OEM views) and patched the latter for efficiency. However because the application uses JavaScript - while the native widgets use Android or iOS specific languages - this effectively requires updates to "cross the JS/native bridge" frequently, which has an associated cost as compared to purely compiled native widgets/apps.

Flutter is reactive like React Native - but the biggest difference is that it doesn't even bother with mapping onto native widgets. Rather, with Flutter, the widgets (views) are written in Dart but compiled directly into native code for deployment which makes them more efficient (no bridges). There are no OEM-created widgets - i.e., you are bypassing the default iOS widgets and Android widgets. Instead the Flutter team is taking on the burden of creating and maintaining Android (Material Components) and iOS (Cupertino) Flutter widget catalogs that will keep parity with the native widget collections but can be used by Flutter developers. Now, the rendering layer directly interacts with the GPU for efficient repainting of the screen.

And by defining the layered widget-based architecture they way they have and having clear stateful and stateless widget classes, they can be efficient about updating the render tree to trigger repainting of the screen. At some point I want to do a deep-dive write up about their rendering process but there is a nice Rendering Pipeline talk that provides a starting point, and a few more resources I can share later.

Hope that helped.

I don't know much about any of those technologies but I remember from @nitya 's presentation that there is no bridge between Dart and the native environment.

That is probably the reason why React Native is less efficient.