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.
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.
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.
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’
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.