Sijil Salim
Live By The Code

Live By The Code

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

Photo by Olaf Val on Unsplash

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

Sijil Salim's photo
Sijil Salim
·Jun 10, 2022·

4 min read

In this 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.

 
Share this