React native vs Flutter

Programmers fall into a dilemma while choosing the right platform for product development. Nowadays, there are several different technologies available for App development. Among all, the most popular is Flutter and React native. Today we will be comparing these technologies in terms of various aspects given below.

  1. Learning curve
  2. Installation setup
  3. UI building
  4. State management
  5. Debugging
  6. Community support
  7. Performance
  8. Toolchain process
  9. Automation testing

Let’s compare them in detail.

React Native

Flutter

  1. Learning curve

React is based on Javascript and for React native you need basics of HTML, CSS & React(which itself is a javascript library).

When you have a senior developer with basic knowledge of HTML, CSS & javascript, then he only has to learn React. And he can start with the development.

In case of flutter, you only need to learn the Dart programming language and that’s it. You can start developing apps in Flutter.

If you have a fresh developer with no knowledge of front-end technologies, then Flutter will be the best choice as he only has to learn Dart.

  1. Installation setup

For React native installation you need to install (NPM) Node Package Manager Or Yarn. You can install React native as described here.

The most widely used IDE’s are VS Code & Atom.

Flutter installation is pretty easy than React native. Here we have to install Android Studio with dart and flutter plugin as described here.

The most widely used IDE’s are Android Studio & VS Code.

  1. UI building

React Native provides a number of built-in Core Components ready for you to use in your app with following categories.

  • Basic Components
  • User Interface
  • List Views
  • Android-specific
  • iOS-specific
  • Others

Along with that React Native has a community of thousands of developers and so various third party UI libraries that does something specific.

Everything in flutter consists of a widget including but not limited to Visible Screen(s), text(s), Button(s), Material Design(s), Application Bar(s), Layout(s).

A widget can define structural elements like a button, a menu, stylistic elements like font, color scheme, or even an aspect of layout like padding.

Flutter comes with a rich collection of the material library for Android and Cupertino widgets for iOS. It provides 200+ built-in widgets which can be customized as per your requirement.

  1. State management

Anything that changes over time is known as a state. Managing state is one of the difficult tasks when learning React Native, as there are multiple ways to do it.

In class components, managing state is easier than functional components. For functional components, we have to use hooks for using state.

React also has state management libraries such as Redux, and it also has libraries built on top of these state management libraries to simplify them, like Redux Easy.

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app.

The easiest way to trigger state change is by using the setState() method. Along with that, flutter has a lot of state management libraries. The following are most used.

  1. Debugging

React Native has a Developer menu for debugging their apps. It has the following options.

  • Reload
  • Debug JS Remotely (opens a channel to a JavaScript debugger)
  • Enable Live Reload (makes the app reload automatically on clicking Save)
  • Enable Hot Reloading (watches for changes accrued in a changed file)
  • Toggle Inspector (toggles an inspector interface)
  • Perf Monitor (Performance Monitor)

Using React Developer Tools you can inspect layout. It also has following features.

  • Built entirely with React, making it easier to develop and extend
  • More detail is shown in props in the component tree
  • Right-click any node and choose “Show Source” to jump to the render method in the Sources panel
  • Right-click any props or state value to make it available as $tmp from the console

Flutter has Dev tools that have an option for debugging. Along with that, Android studio & VS code is the most commonly used IDE’s for flutter development, having built-in native debugging tools. For debugging your code snippet you just need to put breakpoints on the line you wish to debug from and run the app in debug mode.

Using this tool you can,

  • Check frame calling stack
  • Inspect scope variables
  • View logs

For inspecting/debugging UI issues, Flutter has a UI inspector from dev tools.

It helps in diagnosing and debugging layout issues. It has a layout explorer where you can see a complete tree of the rendered widgets, and by clicking on the particular widget you can interchange its properties. Those changes are hot reloaded in the device to show how the updated widget will look. Then you can manually make the changes in the code.

  1. Community support

React native has over 96.4k Stars in github repository & 21k forks as on July 21.

React native was released in early 2015. Its reactive programming style attracted a large community of developers. Usually, a front-end developer who has a knowledge of javascript can easily start working on react & react native and so it has more numbers of libraries available as compared to flutter.

Flutter has over 124k Stars in github repository & 17.8k forks as on July 21.

Flutter was released its stable version in late 2018. Its simplicity and performance gained a large portion of the developer’s community in less time. As compared to react-native, it has fewer libraries available but the community is growing faster. Flutter has very good official documentation for developers’ understanding.

  1. Performance

React Native runs on top of JavaScript, so the framework interacts with a native platform through a bridge. RN app works on a single dedicated device thread. Still, React Native manages to achieve 60 frames per second and a native look and feel to apps.  

In some cases, long-running events on the JS side may block UI events, which may cause React Native apps to get slower and struggle with high-performance requirements.

React Native provides some guidelines to improve app performance like,

  • Optimizing lists by using <FlatList /> instead of <ScrollView>
  • Reduce Image size Avoiding Unnecessary Renders
  • Use NativeDriver for Animation
  • Enable the RAM format
  • Reduce Application Size

Flutter compiles in native ARM code for both Android and iOS, so it would never face performance issues for simple apps. You don’t need to optimize the app till you feel the need for it. E.g. for glitches when scrolling, the animation is not smooth, etc.

Flutter streamlines the process by avoiding the need for a bridge to interact with native components. It can reach animation runtime speeds of 120 frames per second. 

Flutter provides dev tools to increase performance. The Dev tools are written in flutter and it provides following tools.

  • UI Inspector
  • Timeline
  • Performance
  • Memory
  • Network
  • Debugger & Logging
  1. Toolchain process

React Native requires a JS bridge to convert JavaScript code to the Native code. That means it requires an intermediate between React native code and native platform for communicating and exchanging the data. Unfortunately, this bridge is an additional agent in the toolchain that requires extra time and resources for processing and converting the code.

Flutter compiles to x86 and ARM native libraries avoiding the need for a bridge resulting in high performance by consuming fewer resources. It also has high performing Skia rendering engine having the ability to quickly create and dispose the widgets. Flutter could do the operations quicker and more efficiently than other platforms on mobile devices.

  1. Automation testing

React Native does not have official support for UI level testing and Integration testing. There are only a few unit-level testing frameworks available to test RN apps.

Some of the libraries used for React native automation testing are Jest, Detox, Jasmin, Appium, etc.

Flutter framework provides comprehensive support for Automation Testing. It supports Unit testsWidget tests, and Integration tests.

Official libraries provided by flutter automation testing are test, flutter_test, & integration_test. Along with flutter has a lot of external libraries available.

Conclusion

To conclude, I will quickly go through all the points.

For learning curve – Flutter has a plus point because you only have to learn dart.

For Installation setup – Although everything is officially provided in both of them, the Flutter installation setup has tightly bound to the IDE’s like Android studio & VsCode and so it’s easier. So flutter has a plus point here.

For UI building – Flutter has a plus point because you need not have the special knowledge of CSS & HTML for building UI.

For State management – According to the discussion flutter state management is quite easier than the React native.

For Debugging – I think there is a tie as both of them have nice debugging support.

For Community support – As we know flutter is at its peak for growing their community, but for now we should not forget that react native has the largest community than flutter. So React native has a plus.

For Performance – Flutter wins here single-handedly by avoiding the need for JS bridge and giving animation speed of up to 120 FPS.

For Automation testing – Flutter has a plus because React native has to depend on 3rd party libraries for automation testing, and somewhere around some of the testing methods are not easier in React native due to the use of JS bridge.

In the Toolchain process also flutter has a plus as it avoids JS bridge as React native uses.

Looking at all of these we can say Flutter is the best choice for app development in 2021 when compared to others. Along with this you also should have a beginner’s level knowledge of the native platforms for native modules integration for Flutter as well as React native.

That’s all for today. Thanks for reading. 🙂 Happy development. 💻

Thanks to Josh (Flutter & React Native) team

2 thoughts on “React native vs Flutter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.