What is the technical 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

I'm not asking what the best is, but wondering how they differ on the technological level.

 


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:

1. Language

Flutter uses Dart, a typed language that offers both JIT and AOT compilation and natively included tree-shaking.

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

Both Dart and Flutter are open source and maintained by Google, which means that Dart evolves to make Flutter's experience smoother.


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

The strength of Javascript is not in its features/performances, but its community. There are thousands of javascript packages available. And multiple languages can compile to Javascript (including Dart).

2. Architecture

React native is built on the top of native.

We can consider React as a common language to manipulate both Android and iOS. But both platforms ultimately stays different.

Which means that depending on the platform, the behavior of the application may change slightly. Be it visual (Material/Cupertino design), performance wise, or functional.

It means that the application is not truly in a 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 what's rendered on that window using Dart and Skia (it's c++ graphics engine).

It has two implications:

  • Android and IOS run strictly the same code, to the point where we can have Cupertino design on Android. This makes a Flutter application very consistent between platforms.

  • All of the UI had to be reimplemented from scratch. Be it Material design/Cupertino, but also scroll, pointers events, ...

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

It's very powerful but has a drawback: interoperability with native elements is difficult. Flutter currently offer limited support for maps/webviews.

On the other hand, it also allows Flutter to have an unrivaled layout system.

3. Misc

React-Native can partially share code with the web, using ReactJS. While it's not possible to share the whole application, a good chunk of it can be reused.

Similarly, Flutter can reuse code with a dart web-app (such as AngularDart). But it's not possible to share "widgets" entirely.

It's worth noting that Flutter announced Hummingbird. Humminbird is a work in progress port of Flutter's engine to the web. It means that once finished, a Flutter app could be deployed to the web with little to no change. No HTML/CSS needed.

Comment

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