React Native has been around for a long time, without any competition—until last year when Google introduced Flutter. Both of these frameworks rose to fame because of how efficient hybrid mobile app development is—Write once and deploy to both iOS and Android. And with these frameworks, you can even get near-native app performance!
In reality, a great app can be built with either of these two platforms. However, there are slight nuances in performance, code maintainability and community support that could nudge you towards one over the other. Let’s look at those differences in detail.
React Native
React Native is a JavaScript framework for writing natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces—but instead of targeting the browser, it targets mobile platforms.
React Native started out as an internal hackathon project at Facebook in the summer of 2013, and has since become one of the most popular mobile frameworks. In March of 2015, Facebook announced at F8 that React Native is open and available on GitHub.
With React Native, applications are written using a mixture of JavaScript and JSX (XML-esque markup). Under the hood, the React Native “bridge” invokes native rendering APIs in Objective-C (for iOS) or Java (for Android). This allows for your app to render using real mobile UI components, and not webviews, making it look and feel like any other native mobile application.
Flutter
Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android. It was released in 2017, and has since gained tremendous support from the developer community.
Flutter does not need a JavaScript bridge to talk to native mobile components, as it uses a compiled programming language, called Dart. It is a general-purpose programming language which, was developed by Google in 2011. Developers at Google and others use Dart to create high-quality, mission-critical apps for iOS, Android, and the Web. Dart is compiled “ahead of time” (AOT) into native code for multiple platforms. With the Dart bridge, even as the application size gets bigger, it performs much faster.
Differences
Now that we have the intros out of the way, let’s look at the key differences with React Native and Flutter.
1. User Interface
Flutter
Flutter uses built-in UI elements called widgets in place of native ones. A widget in Flutter represents an object of the user interface—All graphics, including text, shapes, and animations are created using widgets.
There are two sets of widgets which conform to specific design languages. In other words, you can use Material Design widgets in your Android apps and Cupertino widgets for iOS apps. Each widget can easily be customized.
However, there is limited support and a limited community for building and maintaining these widgets. As the framework matures, widgets will be the way to quickly iterate and build Flutter apps.
React Native
React Native’s UI experience is similar to using HTML without any CSS framework. While that sounds bad, it actually lets you build on the native components both for Android and iOS, which provides a better user experience (UX).
There is also tons of community support, and there are third-party libraries that let you get off the ground in no time.
2. Community Support
Flutter
Flutter has only been around for a year, so significant community support is lacking. However, early blog posts have been positive towards the use of Flutter.
Dart, thus far, is not receiving much love on Stack Overflow.
Though community support for Flutter is minimal, support provided by the Flutter Team at Google is really good. Their documentation is also amazing. (It’s written by the Google team, after all!)
React Native
React Native’s community support exceeds Flutter’s—React Native is currently the most popular framework on Stack Overflow, with community support as proof. Though their documentation is all over the place, primarily because it’s maintained completely open source, there are many forums to help.
3. Code Structure
Flutter
Flutter doesn’t separate data, style, and templates. While this may sound like you’re going to end up with spaghetti code, this construct is quickly gaining followers, since no extra templating languages like JSX, XML, or special visual tools are needed to build a layout using Flutter. However, it’s a huge time suck when creating large applications, since almost everything is maintained inline.
React Native
React Native does a fantastic job in segregating logic, navigation and design. This allows you to build out complex mobile applications without getting lost in documentation. There’s a great article by Spencer Carli on Medium that talks about the accepted code structure.
4. Development Time
Flutter
Flutter’s Hot Reload (the ability to fix bugs in “real time” without the need to recompile) is blazing fast, putting React Native’s own ability to shame.
Though it allows for quick development, Flutter requires you to add separate code files for Android and iOS when using complex UI elements like Carousels or Models. This means you will need to write specific rules that correspond to each environment. Further, Flutter is built upon the lesser-known Dart language, which will require your developers to spend time on it first before jumping to Flutter.
React Native
Though React Native’s Hot Reload is not fast, it does not require you to write separate files for complex UI support for both Android and iOS. It has many different third-party libraries, such as Calendar, Carousel, and Modal, and ready-to-use components which improve the speed of cross-platform app development.
5. Performance
Flutter
Flutter wins this hands-down. It has the advantage of Dart where there is no need for a “bridge” to interact with a device’s native components. This greatly accelerates performance on devices. It’s this architecture that enables you to build fast-performing, native-looking apps with animations at 60 frames per second, a clear sign of its high performance.
React Native
With the need for the JavaScript bridge, apps built with React Native sometimes have issues with rendering large datasets. However, there are libraries that enable it to reach 60 fps animation speed. (For most typical applications, though, this specific performance issue is barely felt by the user.)
Conclusion
Flutter has great potential as part of the future of mobile app development. The combination of Flutter, Dart and a large community base could be a recipe for success. The only thing that’s stopping me from using it is Google’s well-known move of shutting down open source and acquired products.
React Native currently has steady growth, great support, amazing code structure and a really good adoption base.
To the Flutter team—If Google doesn’t kill the project, please solve the 3,892 open issues that are on GitHub right now. (Thank you.)
