42

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?

0

5 Answers 5

56

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.

8
  • 22
    So you basically asked a question so just you could answer it yourself?
    – dentemm
    Commented Jan 28, 2019 at 12:21
  • 27
    This is recommended by Stackoverflow to share your knowledge. And they even added button in the "Ask a question" page to do so. See stackoverflow.blog/2011/07/01/… Commented Jan 28, 2019 at 12:24
  • 8
    a few hours ago i've asked same question and some of the peoples does down vote on it :>) Commented Jan 28, 2019 at 12:26
  • 2
    "What's the difference between Flutter and React Native" is such a common question that it makes sense to have it documented somewhere instead of closing this one down. Commented Jan 28, 2019 at 15:44
  • 1
    @RémiRousselet I have No knowledge of React Native but you can use your React Native project to run on web using React Native Web github.com/necolas/react-native-web or using Microsoft's ReactXP. I may be wrong on this one, do correct me Commented Jan 29, 2019 at 3:05
38

Remi already has a couple good points. I have one more.

Interpreted with bridges - vs. native and no bridges

Despite what the name might imply, React Native apps are not compiled to native code. React Native apps interpret Javascript code during runtime, and component updates in a React Native app go through a bridge to the native view counterpart. This might slow things down a little bit and be a bottleneck.

On the contrary, Flutter apps (on release mode) are compiled to native code and don't require a bridge for manipulating the UI. This in turn, at least in theory, will be more performant - there's no need to do roundtrips to the native land to make simple UI changes. Not to mention that release Flutter code is natively compiled and there are no interpreters involved.

Dance monkey, dance

Now that we know that release mode Flutter apps don't have an interpreter or the need for bridges for UI manipulations, let's see what those two things actually are in the first place.

We'll do this with a highly hypothetical example app. Our React Native app has a button that makes a monkey dance on the screen. In React Native, our button and the dancing monkey components are written in Javascript and React.

Interpreters

Since Javascript is not a first class language on Android or iOS, your React Native app includes a Javascript interpreter that interprets your Javascript code in runtime. Without the interpreter, you wouldn't be able to write apps with Javascript at all - even a simple console.log('Hello World!') wouldn't work.

According to the React Native docs, in "most cases", the Javascript code will be interpreted with JavascriptCore.

Bridges

Under the hood, React Native uses the native Android Views and iOS UIViews for displaying UI components (such as dancing monkeys) on the screen. But since the UI parts of the Android and iOS SDKs don't use Javascript, you can't make the monkey dance by using Javascript alone.

This is where a bridge comes into play. On the other side of the bridge are your React Native components and logic, written in Javascript. On the opposite side, we have the host Android/iOS app that renders native views into the screen. From now on, let's call the two sides of the bridge as the Javascript land and the native land.

So, what happens when the user clicks on our "dance, monkey, dance!" button?

  1. The native Android/iOS view dispatches an onclick event, which goes over the bridge to the Javascript land.
  2. Our onclick listener written in Javascript gets invoked. It is a simple call that toggles a boolean inside the component. Something along the lines of setState(() {isMonkeyDancing = true}) or similar.
  3. React sees that something has changed. It comes up with an updated representation of UI elements that has a dancing monkey. The representation is just a tree of plain Javascript objects that describes the updated state of the UI.
  4. The Javascript object tree gets serialized and sent over the bridge to the native land.
  5. The host app receives the serialized object tree and deserializes it. Now it can update the native Android/iOS view to match the deserialized UI representation. Our monkey is now dancing and our user is eternally happy.

So in this example, one button click required going over the bridge two times.

Actually, it's three - just simply rendering a button initially is a call across the bridge itself. In an app that is more than just one button and a dancing monkey, you're likely to go over the bridge a lot more. And every time you do, it requires serializing data and sending it over from one side to the another.

This is slower than just coming up with the UI representation and updating the UI with that directly. Additionally, there's a cost of interpreting Javascript in runtime compared to having the code compiled ahead of time.

The bottom line

Since Flutter is essentially a portable rendering engine, Flutter doesn't need a bridge to do an UI update. And because of that, UI updates, at least in theory, are faster. That's one reason why building apps with complex animations or things like Flare, SpriteWidget, or even games would be more lucrative with Flutter compared to React Native.

And because Flutter on release mode is AOT compiled, Flutter doesn't need an interpreter either. That's the difference between Flutter and React Native.

3
  • @liroKrankka I have no knowledge of React Native but I think they are planning to remove bridge and replace with Javascript interfaces, correct me if I am wrong Commented Jan 29, 2019 at 3:03
  • What about when calling non-UI native APIs? I guess they both need a bridge then.
    – Buzzware
    Commented Jan 29, 2019 at 4:21
  • 2
    @Buzzware Correct - if you need to call Android / iOS native code, such as location APIs, Bluetooth, etc. then you need to go over the bridge. This is what Flutter calls "platform channels". But the difference to React Native is that Flutter doesn't need a bridge to just display something on a screen. Commented Jan 29, 2019 at 7:37
4

Flutter vs React Native: A Developer’s Perspective

React Native by Facebook and Flutter by Google – two hot cross-platform app development technologies creating a buzz. In this post, we will compare both of them in detail from a developer’s perspective.

What’s Flutter and React Native?

React Native is a project started by Facebook internally that they open-sourced in 2015. On the other side is Flutter, a project started by Google which they have been heavily promoting since I/O 2017. Both of these technologies help app developers build cross-platform apps faster by using a single programming language. React Native is already a mature tool and has a huge community, but Flutter also started seeing huge adoption rates since 2017. In this post, we will compare each of them using ten criteria:

  • Programming language
  • Technical architecture
  • Installation
  • Setup and project configuration
  • UI components and development API
  • Developer productivity
  • Community support
  • Testing support
  • Build & release automation support
  • DevOps and CI/CD support

Programming Language

The key benefit of using a cross-platform mobile app development technology is the ability to use a single programming language to develop apps for both iOS and Android.

  • React Native — JavaScript
  • Flutter — Dart

Installation

The installation method should be straightforward without having too many complicated steps so that it could be easily learned by developers that are just starting with it.

  • React Native - NPM
  • Flutter - Binary Download from Source

UI Components and Development API

  • React Native - Less Components
  • Flutter - Rich in Components

Conclusion

React Native and Flutter both have their pros and cons. Some of the industry experts have predicted that Flutter is the future of mobile app development. Considering the comparison above, it’s clear that Flutter has entered the cross-platform mobile development race very strongly. Let’s not predict the future but wait and watch!

2

If you learn both technology in deep. So, you will find big differences:

  1. Programming language- Java Script and Dart
  2. Technical architecture- Flex and Skia.
  3. UI components and development API: Widget in flutter but views in React native.
  4. Developer productivity: Debugging is very easy in Flutter.
  5. Community: Big Community support in React Native.
  6. Documentation & Toolkit: Flutter team have created simple duc for all widgets.
  7. Testing support: Flutter providing testing libs.
  8. DevOps and CI/CD: Flutter Providing CI/CD supports.

There are more difference between React Native and Flutter that you can read her.

0

Actually, React Native and Flutter are both popular frameworks for building cross-platform mobile applications. However, there are significant differences in their architecture, language, and technical approaches.

Programming Language

React Native

Uses JavaScript that is a dynamically typed language. It is widely used in web development. React Native developers often use JSX, a syntax extension that allows mixing HTML with JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript

Flutter

Uses Dart that is a statically typed language developed by Google. It is designed to be easy to learn for developers. Dart is an object-oriented programming language. It supports all the concepts of object-oriented programming such as classes, objects, inheritance and abstract classes. https://dart.dev/guides

Architecture

React Native

It has been based on the bridge concept. So React Native uses a JavaScript bridge to communicate with native modules. The JavaScript code is interpreted at runtime. So it can lead to performance overhead. With third-party libraries to additional functionalities and customizations.

React Native Architecture

Flutter

Flutter Uses the Skia C++ engine. That engine renders everything from scratch without relying on native UI components. Dart code is compiled to native ARM code. SO it improves performance by eliminating the JavaScript bridge. Flutter has a rich set of built-in widgets. Widgets allow to customization and consistency across platforms.

Flutter Architecture

Performance

React Native

Performance can be affected by the JavaScript bridge for highly interactive apps. Often, it requires optimization and native code for achieving the best performance.

Flutter

Normally, offers better performance because it compiles to native ARM code and it doesn’t rely on a bridge. The Skia rendering engine and direct compilation for native code contribute to smooth as well as high performance apps.

Differences

Additionally refer

https://flutter.dev/

https://reactnative.dev/

https://www.amarinfotech.com/flutter-vs-react-native-which-one-is-better.html

https://www.reddit.com/search/?q=react+native+vs+flutter&type=link&cId=8d44332c-1d0f-412b-9780-68e5feecc60a&iId=20275d8a-77bb-435f-8b67-b9fc21dc5473

Not the answer you're looking for? Browse other questions tagged or ask your own question.