React native Vs. Flutter: Which Framework To Go with?

React Native

Flutter

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.

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.

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.

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.

• Provider
• InheritedWidget and InhertedModel
• Flutter Redux
• Fish-Redux
• bloc

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.

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.

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

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.

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 tests, Widget 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.