This is certainly a big question in mobile app development domain. Many native mobile developers & web developers who are willing to learn cross-platform mobile app development do think about this.

 

 

React Native vs Flutter? Being a native Android developer, when I thought to learn new mobile technology, this was certainly a question. But as React Native is a bit older & more popular than Flutter, I started with React Native first. After learning from the documentation provided, I checked with some demo codes & tried very basic screens. Not to mention I have not really worked on JavaScript before but had little experience of it & CSS.

When I started and saw it working I really liked it. Just create components & CSS like the styling and you are done. At the simplest code level, you can put everything in one place. Most mesmerizing for me was the live reload, you just save it & bang… you see the updates on your phone (or emulator).

I tried some basic features which are required for a mobile app, like user inputs, clicking on buttons, navigating to other screens, making network calls & showing a list view. Then I started working on some bug fixing & other minor updates on the already developed project.

This experience with React Native gave me good vibes about it then I tried to learn more about this. Till now for me React Native was like magic, it is easier to start & create your mobile app for both major platforms available iOS & Android.

What else do you need? You can learn only one language & start coding and as a result, you will get an app for both iOS & Android. This sentence made me curious about such technologies so I thought to explore others as well.

The second obvious choice I had was Flutter. So I started for Flutter, installed everything required & tried my first Flutter project. To be very honest it didn’t look good to me, the code structure looked messy & complex, there were so many things & hard to understand the flow of it. This might have happened because I was very new to Dart language & hardly had seen it’s code before. Also, there are classes one for StatelessWidget another is StatefulWidget then you have a class for State. The syntax is also the mix of C & JavaScript styles. Probably these were the reasons which gave me my immediate thought ‘it doesn’t look good’.

But one should never judge a book by its cover, so I started checking more on this & I tried basic things like user inputs, button clicks, navigation & etc. Again if I compare this first interaction with Flutter with my first interaction with React Native then I would say later one is easy. It is difficult to start with Flutter as compare to React Native. Till now my impression was React Native is better, but still, I started exploring more on these two. Before we can conclude anything, let’s go to some background of cross-platform development.

Hybrid apps

Before React Native & Flutter there were (& still, are) platforms available for creating hybrid apps like PhoneGap, Ionic & others. These platforms use web technologies like HTML, JavaScript & CSS. Basically, it creates a website which eventually runs on a native WebView component, so actually, it is a web page running on a mobile web browser, it works like a native app & the user doesn’t understand the difference. Using these platforms you can create app faster if you are a web developer.

Though you can develop app faster & no doubt it is a big advantage, but with this, there are some shortcomings in using hybrid app development platforms.

Few are like:

• Your app may be slow as it loads on a WebView component. Performance of a WebView may differ platform to platform, it may also lead to inconsistent behavior across many devices available.
• Using native hardware features can be a tedious task. Not everything can be used in a smoother way.
• If there is any new feature or update on the native platform, it may not be easily (or even) available early. You will have to wait for the support plugins you can get to access those new features/updates.
• One more point can be about UI, it may not look & feel the same as native ones.

I am sure these hybrid app development platforms are improving. They are trying their best to match the performance of their app with an app developed through the native process.

The above segment has slightly taken the focus away from our main topic i.e. Flutter vs React Native? But the segment was necessary because it will help us understand why React Native & Flutter are different. What advantages these have over hybrid app development and ultimately we can compare both & try to find which is better.

The biggest difference between hybrid apps & the apps developed through React Native or Flutter is that compilation to native code. As mentioned before the hybrid one is actually a website which is packaged as a mobile application & on the other hand React Native & Flutter create apps which are compiled to native code. The components or widgets you use are compiled to their native equivalent. Then it becomes obvious that it will work faster as compare to a website running on a WebView.

From this, we can say the this ‘compiling to native code’ way is better than ‘creating a website & use it as a mobile app’ way, at least in terms of performance. You may develop an app bit faster with hybrid platforms but performance is important.

Now I think we can move to our original topic.

 

The Real Question

The first parameter for comparison we can take is ‘compiling to native code’

For React Native we can say the app is developed as a web app (because it uses JavaScript) but compiled to the mobile app. In React Native the JavaScript code is not compiled to native code but it runs on a separate thread which communicates with the native part. Actually, the UI components are compiled to native code by React Native tools.

The JavaScript uses a bridge to communicate with the native part, a native section where all the platform services & widgets are available. This bridge dependency makes it slow & can cause performance issues. Especially if you have a task like rendering UI because in this case, you need frequent communications with native.

The Dart code written in Flutter is compiled to the ARM C/C++ library, which is close to the native code. There is no Dart code running on any thread which communicates with native code. Actually, the compiled library is consumed by native code and that is why it is faster & has better performance. For rendering like tasks it doesn’t go to OS, it uses library & renders on screen.

Now the second parameter can be pre-built widgets or components library.

Here the Flutter provides number widgets or UI components compared to React Native. But the widgets here don’t adapt to OS platform automatically, on the other hand, React Native comes with some partly adaptive components. By adaptation means it can change it’s style automatically to platform it is running on. In Flutter, you can manually check the platform & use widget according to that platform.

As React Native comes with fewer components compared to Flutter, so you have to create custom styles if you want more. In Flutter also you can create custom widgets.

The third parameter is available to support.

As React Native is older than the Flutter so it has more support available, it has a bigger community than Flutter. You can find a lot more libraries & resources for React Native. But not to forget both Flutter & Dart are developed by Google, so it will definitely grow.

One more parameter can be ‘ease of learning’.

From my experience, I can say React Native is easy to start but later it all depends on the third party libraries available that can make things difficult in the long run.

Flutter is difficult to start, as it is complicated, you will have to spend more time in learning but sure, in the long run, it will reduce the efforts.

So this was my exploration of both technologies available. I am still digging more into these two. From the above points, I can say Flutter has some advantages over React Native in terms of performance at least. Rest you can decide.

I hope you liked this article & learned something useful.

Happy Learning!!!