Flutter vs. React-Native: A Beginner’s perspective

In the COVID-19 lockdown period, I decided to pick up a new skill -and, yes it is app development. But how do I start? Should it be Native app development for Android or iOS alone? I did not want to restrict myself to one single platform. Then, what to do? Google, Google and more Google and finally got my answer: Cross platform frameworks, React Native and Flutter. But which one?
After further rounds of thinking and Googling, I knew i had to try
both. This article is all about my experience with both the frameworks
from a newbie’s perspective.

Philosophy

React Native is an offering from Facebook. It is an extension to
React web framework but for the mobile world. Those who are already
working on React projects will find it easier to use React Native, since
the same philosophy is followed in both the worlds. This also
facilitates reusing the Javascript code from the React web project to
the React Native app.

Flutter is Google’s answer to React Native. Flutter offers a fresh
philosophy. In Flutter, everything is a widget, and every widget is
essentially a class. We can customize every widget with key-value pairs.
We can also embed widgets within widgets, although, this can lead to
widget-within-widget-within-widget situations which sometimes might not
offer a smooth experience.

Language used

React Native framework is built upon Javascript where Flutter uses
Dart, also from Google. Javascript has been in the market for decades
now and has been embraced by enterprises and startups and has huge
community support. Dart, on the other hand, is a new kid on the block.
Even so, anyone one with a fair understanding of programming concepts,
can easily pick up the language in a matter of days. Why Dart?
Dart is not just used for developing mobile apps. It is used to build
desktop, server and web applications as well. Google is already in the
works of bringing out its new OS, Fuchsia OS and guess what? Fuchsia’s
user interfaces and apps are built with Dart. So for someone who keeps
an eye on the future trends and opportunities in technology, embracing
Dart now might be a good option. Also, someone who is new to the
programming world, might feel overwhelmed with the thought that there
are already Javascript heavyweights out there, how can he/she stand out
in such a crowd. Well, there is no such problem with Dart. Since its
fairly new in the market, the crowd is not that huge yet.

Effort and outcome

Flutter already uses material design out-of-the-box and most of the
commonly used material design components can be implemented with the
call of a single keyword. React Native, on the other hand, follows a
bare bone approach. Creating attractive materials design components
requires a comparitively higher effort and time for someone new to this
framework, since not much components, other than the basic ones, are
available with React Native as with Flutter.

React Native has a high dependancy on third party libraries even for
basic functionalities like navigation, toasts, etc. Flutter comes
bundled with all the necessary libraries and hence there is almost no
need for other third party libraries.

The flutter SDK brings many features to the IDE, such as the actions
menu, which combined with its IntelliSense enables the developer to
write a whole page of code with mostly mouse clicks and fewer keyboard
strokes.

Rating and Community Support

React Native released in 2015, currently holds 86k github stars
whereas Flutter, released in 2017, is at 90k stars now. These figures
indicate that both the frameworks boasts a strong community support. The
fact that Flutter has seen an exponential rise in support in a short
span of time is noteworthy.

Performance

Flutter code is directly compiled into native code and hence has greater speed and performance.

React native’s JSX components will be compiled to native code but the
framework also maintains a Javascript layer where the business logic
resides and this layer communicates with the native code via a bridge.
This brings in additional overhead and thereby reduced performance.

Conclusion

React Native and Flutter is going head to head but it seems Flutter
has a slight upper hand, as of now. Let’s see how this race is going to
end.