Flutter VS React Native
There is a revolution happening in the mobile development space and should I use Flutter or React Native is one of the most commonly asked questions since hybrid development came into being.
Hybrid app development has many benefits over native development such as:
- Reduced cost of development
- Reduced time of development
- Extremely useful for startups with low budget who want to test out an MVP
But, although hybrid app promises many benefits, it still has a long way to go, before it can match the quality of native apps. Behemoths such as Google, Facebook develop their apps on native platform. In an interview earlier, a spokesperson from Facebook said that developing a hybrid app was their biggest blunder in Facebook’s history. Facebook took it down and built a native solution from scratch.
But, let’s not diverge, the debate today is about the two best hybrid solutions available in the market today: Flutter and React Native.
I’ll be focusing on the following points today:
- Language Stack
- Architecture
- UI Components
- Performance
- Learning Curve
1. Language Stack :
Flutter (DART):
Say what DART !!
That’s the reaction of most of the people when they first hear about DART. DART is a general-purpose programming language developed by google in 2011. It is a client optimized language used to build beautiful mobile and web applications.
Developers at Google and elsewhere use Dart to create high-quality, mission-critical apps for iOS, Android, and the web. With features aimed at client-side development, Dart is a great fit for both mobile and web apps.
The apps built using DART are real native apps whose code compiles down to JAVA byte code, so at the machine level, it is indistinguishable from real native apps. How’s that !!
React Native (JavaScript):
Now most of you have heard about JavaScript for sure, the thing I want to focus is on React Native. React is a JavaScript framework built by Facebook for designing beautiful web interfaces. But it can do much more, React Native uses the same design as React, letting you compose a rich mobile UI from declarative components.
The apps built using react native are not HTML5 apps or hybrid apps, they are real native apps that use building blocks of regular iOS and Android Apps. You just put those building blocks together using JavaScript and React.
2. Architecture:
Flutter (DART):
The Flutter framework follows a layered architecture with each layer building upon the previous one.
The Upper layers are more frequently used than the below layers. As you can see, the Material and Cupertino widgets are composed from the widget layer (everything is a widget in flutter). You can use the ready made widgets that flutter provides or create your own custom widgets, using the techniques that the Flutter team used to build the framework.
Flutter framework is open sourced so you can view all the code at Flutter’s GitHub repository.
React Native (JavaScript):
Currently React Native uses a single “BRIDGE” between JavaScript and native that is asynchronous, serializable and batched. Just like it’s parent React, React native was designed to return a single Json messages that lists the tasks to perform like changing attributes, creating views etc…
3. UI Components:
Flutter (DART):
Everything in flutter is a widget. Even the application itself is a widget, the colors, the typography, the screens are all widgets in flutter. At first it’s difficult to wrap your head around everything being a widget, but once you get a hang of it, you’ll realize the beauty of this approach. Whenever you want to update a part of the UI, just update a widget.
Flutter widgets are built using a modern react-style framework, which takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.
When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
React Native (JavaScript):
React Native requires to use third-party libraries since React Native does not have a UI Components library of its own. Some popular libraries are React Native Material Design and Shoutem.
While comparing user Interfaces between React Native vs flutter, React Native is like similar to using HTML without any CSS framework. It is based more on the native components both for Android and iOS also better User Experience (UX) when a user taps into the Operating System.
Three main libraries for UI are :
- Shoutem UI Components
- React Native Elements
- Native Base Components
4. Performance React Native vs Flutter:
Talking of app performance, Flutter takes the crown. It is much faster than its React Native Development counterpart. Since, there is no JavaScript bridge for initiating interactions with the device native components, the speed of development and running time gets expedited drastically.
But Native App trumps both the React Native and Flutter apps by a big margin when talking about performance. There’s nothing like it. Talking of a native app, the CPU usage is half when compared to flutter app.
On basis of CPU Usage : Native > Flutter > React Native
On basis of Memory Usage : Native > React Native > Flutter
While React Native is marginally more memory hungry than Native, Flutter consumes almost 50% more memory than a native app. On the other hand, Flutter app came much closer to matching the native app’s CPU usage, whereas the React Native app used more than 30% of the CPU.
5. Learning Curve:
Having developed an app in both Flutter as well as React Native I believe I can answer this question adequately.
People coming from Native Android background i.e. Java/Kotlin would feel much more comfortable with Flutter as compared to React Native. If you are experienced in Java/Objective-C then you would easily pickup DART in a couple of weeks and would develop a functional app within 3 weeks.
Whereas someone coming from a web development background, or an Ionic Cordova background would find React Native much easier to learn as they must already be familiar with JavaScript and some of its frameworks.
So, in the end it depends. Java people would love flutter whereas JavaScript people would prefer React Native.
In terms of the learning curve, I believe DART being a new language and with a smaller community support has a steeper learning curve than React Native.
6. Conclusion:
To be really honest, I don’t think either of Flutter or React Native can beat a Native app in terms of performance, memory usage and functionality. Native apps are on a whole other level. But if we were to compare Flutter and React Native I personally believe that Flutter takes the crown here!!
Flutter has in-built components, its code directly compiles to JAVA Bytecode, so there is no performance overhead, it has better animations and transitions due to SKIA engine and has a better performance as compared to React Native when compared on Android Studio’s CPU Profiler.
Also, there’s something called Fuschia OS by Google. It is a new operating system developed by google and is rumored to be around the corner and can be released into production in 3-4 years. But those are just speculations and there hasn’t been any official statement from google as of yet. Although the interesting thing is that all the apps for Fuschia OS will be built using the Flutter SDK and so it can be said to be future proof. So, in conclusion :
Flutter > React Native
Like what you read ? Don’t forget to share this post as much as possible on Facebook, Whatsapp and LinkedIn. You can follow me on LinkedIn and GitHub.