Flutter vs React Native

mobile Jul 14, 2020

React Native by Facebook and Flutter by Google – two hot cross-platform app development technologies creating a buzz.Traditional native development entails developing two codebases; one for iOS and one for Android. This means creating different codes for different platforms, which usually results in higher development costs. Hallelujah for cross-platform development frameworks! Developers only develop and maintain one code base. This one code base can be further packaged into an iOS native app or an Android native app or could even be used to target web or IoT

What is the Flutter?

Flutter is an open-source cross-platform mobile development framework developed by Google. It was first announced in 2017 at Google’s I/O developers conference. The stable version was then released in July 2019. The Flutter framework, unlike a lot of cross-platform frameworks, isn’t built with Javascript, but Dart — a C-style statically typed object-oriented language developed by Google as well. So how do these two compare with each other?

Infrastructure
Flutter is the only mobile SDK that offers reactive views without requiring a JavaScript bridge. Since it contains almost all native libraries, it does not need a separate structure to communicate with the native system. Dart code is faster than the JavaScript V8 engine thanks to its compilation according to the local machine code. In this way, it offers a better native performance.

What is the React Native?

React Native is a cross-platform mobile development framework that was developed by Jordan Walke — a software engineer at Facebook. React Native and was later open-sourced in 2015. React Native makes use of the popular Javascript library — React.js and Javascript to build apps for both the Android and iOS platform.

Infrastructure
Since React Native is based on the JavaScript infrastructure and converted to native, it is absolutely necessary to access it via JS bridge to interact with native components. This includes animations, page transitions, screen touches, etc. causes a decrease in performance due to the bridge in transactions.

Why Flutter or React Native?

The ability to implement hot reloading functionality, over-the-air updates, build variants and decompilation.

Flutter

✔ Stateful hot reload

(In flutter, very save on the app and just as you do on the web just hit a refresh and your codes also refresh)

✔ Supports editing product flavors resulting in multiple build variants

✔ Its cross-platform and Android specific code can be obfuscated

– Has not yet supported over-the-air updates

– Does not provide option for the obfuscation of iOS code

React Native

✔ Supports editing product flavors resulting in multiple build variants

✔ Its cross-platform and Android specific code can be obfuscated

– Only supports standard hot reloading

– Does not provide option for the obfuscation of iOS code

Expressive + Flexible UI


Flutter

✔ Offline access

✔ Can be white labelled by taking advantage of different product flavors

✔ The UI is built out of different widget styles for the iOS and Android app

✔ Comes with standard motion effects and a collection of  animations and motion widgets

React Native

✔ Offline access

✔ The node package MajoraJS can be added to the project in order to develop (multiple) white label versions of an app

– Provides only two animation systems by default

– The UI does not provide enough components which causes developers to use third party component

Other than the common iOS/ Android mobile app, can more platforms be targeted?

Flutter

✔ Using BLoC pattern for code sharing with Flutter applications

– Does not support wearable, IoT or TV

– Does not officially support instant apps

React Native

✔ Share code with React (for web) and Flutter with AngularDart (for web)

✔ Officially supports Apple TV as well as Android TV

– Does not officially support instant apps


Flutter

✔ Has a better hot reload function which persists state better, thus more pleasant to work with.

✔ The UI is built out of different widget styles for the iOS and Android app, which is beter than the UI of app using React Native

✔ It comes with more out of the box animation options

✔ The BLoC pattern for sharing code between mobile and web is well thought out

✔ Fast development

✔ High Performance

✔ Reduce the Third Parties

✔ API. The Flutter API is very consistent

React Native

✔ Supports over-the-air updates which enable developers to make quick changes to an app in response to app store reviews for example. Flutter has not yet supported over-the-air-updates.

✔ Officially supports Apple TV as well as Android TV while Flutter does not

Future

In the future, Flutter will most likely be further developed to support more platforms. Project Hummingbird will bring Flutter apps to the web and most likely the next step will be to bring Flutter apps to either wearables, TV or other IoT.

Popularity

In Conclusion

Having worked with both Flutter and React Native, we can say that even though Flutter is a younger framework, it does not lag behind on React Native. Both frameworks have their advantages:Weighing the pros and cons Flutter would slightly gain the upper hand but React Native is a sound alternative.For a project, it would be wise to consider the specific needs of the project and if the frameworks will be able to support them

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.