What is the difference between React Native and Flutter?

  • A+
Category:Languages

What is the difference between React-native and Flutter technically?

Both technologies seem to do relatively the same thing, and Flutter even admits that it takes inspiration from React: faq

This is even more obvious when they list the same features and have almost the same syntax (StatefulWidget vs Component class).

Similarly to AngularDart being a Dart implementation of Angular; is it right to assume that Flutter is a Dart implementation of React?

 


Architecturally, React Native (RN) and Flutter are very similar.

What Flutter calls a "Widget" is the strict equivalent to React's "Component". That's what Flutter means when it says its inspired from React.

The difference between them lies in the other aspects of the frameworks:

Interpreted Javascript VS Compiled Dart

Flutter uses Dart, a typed language that offers both "Just in time" (JIT) and "Ahead of time" (AOT) compilation (with tree-shaking included)

In development, Flutter uses JIT compilation to empower hot-reload. And for production builds, it uses AOT compilation for better performances.


React-Native uses Javascript enhanced by some syntax sugar called JSX.

JSX being a different language, it compiles to JS, then evaluated at runtime.

Bridge to native VS Complete rewrite

React native is built on the top of native.

When using a button or a text in React Native, you are manipulating the official object used for native Android/iOS apps.

We can consider React as a common language between Android/iOS to declare layouts – but fundamentally the applications are different with potential inconsistencies.

It's is not true cross-platform. But at the same time, it allows better interoperability with native elements.


Flutter is the opposite. The goal of Flutter is to use as few native elements as possible.

Flutter requests to the OS a window, and then entirely manage its content using Dart and Skia (it's c++ graphics engine).

It has a few implications:

  • All the UI logic had to be reimplemented by Flutter. Be it scroll, touch events, animations, ...
  • The application is written entirely in Dart, even deep into the lower layers. It means that whatever the platform is, it's always the same code that is executed.
  • Potentially anything that can run Dart code and create a window can run Flutter and apps should work with little to no change. As such, web is in progress ( Hummingbird) and basic support of desktops is available.

To some extent, we can compare Flutter to a webview/game engine, but optimized for casual applications.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: