What is the difference between React Native and Flutter in-depth?

Technology CommunityCategory: FlutterWhat is the difference between React Native and Flutter in-depth?
VietMX Staff asked 3 years ago

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).

That 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.