Flutter vs. React Native

Posted on January 30th, 2022

Mobile development is a gold mine for developers. Its popularity has exploded as much as JavaScript has over the past two decades. With approximately 2.5 billion Android users and 1 billion iPhone users, building and shipping native mobile apps make sense. In addition to this, there is a myriad of tools and resources available for Android and iOS development.

Making the same mobile phone app twice is not the best use of a developer’s time. That’s two different platforms to maintain and manage. By requirement, Apple uses Swift. On the other side of the ring sits Android and its Java-based compilers.

This is where ‘bridging’ frameworks and libraries come in. Flutter and React Native are two popular bridging solutions that make it possible to code once and use multiple platforms. Flutter assumed that you build an app once, and it will work on any screen. React Native is a flavor of React that leverages the current implementation of its JavaScript UI library and makes it possible to run on any mobile device.

On the surface, these features sound great – but with every perk, there is a quirk. Before diving into them, we need to define React Native and Flutter.

What is Flutter?

Flutter is a cross-platform UI development SDK released by Google in 2017. So rather than having multiple codebases for various platforms, we only have to deal with one code set. This includes web, native desktop applications, and mobile for Android and iOS.

Through this idea of cross-platform support, developers can synchronize brand and visual assets, maintain consistency and reduce the number of tests required for the platforms that your app supports.

Flutter is based on Dart. In a nutshell, Dart took the learnings from JavaScript and C languages and created an object-oriented and class-based programming language that supports interfaces, mixins, abstract classes, reified generics, and type inference. Due to its JavaScript and C family influences, picking up Dart will feel familiar to many developers, making the task of being a Dart native an easy process.

What is React Native?

React Native started its existence as a Hackathon project in 2013. The preview for React Native was released in January 2015, and the official stable release was back in March 2018.

If age matters any then React Native is in the lead. React Native is older than Flutter on the timeline, resulting in a larger community and support group. It also leverages JavaScript, making it easier for current web developers to transition into native mobile application development.

React Native works by extending React.js, a library for constructing and coordinating UI. This means that React developers already have the groundwork and experience necessary to build React Native apps with minimal additional knowledge acquisition.

Perks and quirks of using React Native vs. Flutter

While both React Native and Flutter try to achieve the same outcome – code once and deploy everywhere – the generated results are not equal. Here is an overview of the similarities, differences, and cross-platform implementation against the assessment category.

Performance

Both React Native and Flutter are well-maintained libraries. They both come with built-in simulators that allow you to test on your desktop or natively on your phone. Hot reloading is available to React Native and Flutter, making the software development process faster.

To be truly “native,” the produced app needs to be written in the required language – Swift for iOS and Kotlin or Java for Android. This is different from using wrappers that merely put your JavaScript-based apps (like ones with Angular as the basis) on a mobile device.

React Native works at being native by compiling JavaScript code into the associated native components using platform-specific APIs and modules. JavaScript code outside the available API works through a bridge between the app and the target platform. This means that anything added to the available React Native module makes the app partially native. As a result, there may be delays in synchronicity between JavaScript code and the native platform.

Flutter doesn’t compile into an iOS or Android app as such – instead, it compiles down to C, the base language for both platforms. It uses either ARM or x86 native libraries, which contributes massively to its speed across both Android and iOS.

Developer Ecosystem

Flutter’s popularity with developers is growing. However, compared to React Native, the latter has a more extensive and stronger foothold with community support.

(Source: https://javascript.plainenglish.io/flutter-vs-react-native-which-is-the-best-choice-for-2021-e695e79c6707

This popularity, in part, is due to Dart being newer than Java and C#. Flutter is also brand new in age, with more miniature ecosystems, community support, and open-source. When presented with options like React Native, companies tend to be more conservative in their approach to native app building than be experimental with Flutter. React Native also offers relative stability due to its age and has proven itself with many commercial apps.

Despite this, Flutter’s popularity and advocacy have grown dramatically over the past few years, surpassing React Native on GitHub. As of May 2021, Flutter has 120k stars. Meanwhile, React Native has remained stable with approximately 95k stars.

Competitive advantage

With the announcement of Flutter 2 in March 2021, developers can use the same codebase to ship native apps to iOS, Android, Windows, macOS, Linux, and web experiences through browser web. In addition to this, Developers can embed Flutter in devices, appliances, and smart cars.

In contrast, React Native only supports iOS and Android. While it was revolutionary several years ago, businesses have since developed more ways to integrate software beyond mobile devices.

The time to market for both React Native and Flutter is approximately the same. They also allow developers to ship faster than the traditional native development approach. However, it is good to note that React Native uses both a bridge and native elements, which may require optimization for the different platforms due to how they are processed. This process can extend the time to market for React Native. In contrast, Flutter does not have this issue.

Flutter vs React Native in 2022 – Side-by-side comparison

FlutterReact Native
PerformanceBetter because it compiles down into truly native appsBeyond supported features, everything else is JavaScript, making it a pseudo native mobile app
Developer EcosystemExploding in size due to more interest and uptake by developers and businessesLarge due to React community accessibility and skills transferability from JavaScript and React.
Competitive AdvantageSupports more than just mobile. Aims to work on any platform, including web, screens, and non-mobile devicesLimited to just iOS and Android devices
Developer productivityMay need to learn Dart and unfamiliar territory may reduce productivity due  to inexperience No need to learn additional language if coming from web frameworks but still requires understanding of React.
CommunityGrowing community that is increasing in size to match React Native. Flutter’s GitHub star count overtook React Native in 2020.Established community, mostly by developers who are already JavaScript developers

 Which one is better? React Native or Flutter?

Both React Native and Flutter are great contenders for cross-platform native app development. But the big question is: which one should you choose? React Native or Flutter?

The answer to that depends on several factors. React Native has weak points and has issues with integrating Bluetooth technology. Flutter doesn’t support 3D touch.

React is much better with community support and developers who can support the app. Flutter, in contrast, can be harder to learn – especially by web developers without a background in Java or a C family. However, this perk includes the ability to be highly customizable, while React Native limits you by being a wrapper over native views.

The best apps are created when they leverage your current team’s strength. If your team is mostly Java developers, then Flutter may be the way to go. If your team consists mainly of frontend web experts, React Native will result in a superior app due to knowledge depth and community navigation.

Top 9 Flutter apps: The most popular apps built in Flutter

Posted on January 10th, 2022

What cross-platform development framework sends your heart aflutter? There’s a good chance it’s actually Google’s Flutter.

Flutter is quickly rising to the top of the charts for cross-platform framework popularity. In 2019 Flutter was used by 30% of polled developers. In 2021, Flutter has overtaken React Native with 42% to React’s 38%. If this trend continues, Flutter is set to become the dominant framework (with over 50% of polled developers making use of it) within the year.

Regardless of market trends, having a closer look at top Flutter apps can give you a good understanding of what you can achieve with this relatively new and shiny framework by Google.

What is Flutter?

Flutter is a free and open-source framework for cross-platform mobile app development created by Google in 2017. The two main components of Flutter are the SDK (Software Development Kit) and a library of reusable UI components.

Flutter uses the Dart programming language, also by Google. Dart is similar to JavaScript but is optimized for UI. If you’re familiar with any programming language, picking up Dart should be a simple transition.

The popular IDEs (Integrated Development Environments) for Flutter development are Android Studio and VS Code. Those are full-featured IDEs that support a wide range of extensions and plugins.

Why Choose Flutter?

There are several reasons why you should choose Flutter. Each feature individually can be found in other frameworks, but the complete package of Flutter is currently the best that software development has to offer. Even if you do not need all the features, Flutter is as good a choice as any other.

(Source: https://www.alibabacloud.com/blog/an-in-depth-understanding-of-flutter-compilation-principles-and-optimizations_597747 )

Cross-Platform development

If you’re looking to target Android, iOS, and web browsers, Flutter will provide a single code-based solution to your development needs. Google is a big proponent of “code once, run everywhere,” which shows in Flutter’s design.

Rapid Development

Flutter development is quick. You can get a minimal viable product (MVP) in a matter of weeks with a small team. And after your MVP, Flutter continues to be easy and fast to develop, producing fast time-to-market (TTM). In some cases, you might only need a single developer to build a usable app that runs on every platform. No other framework offers this kind of speed.
Still, it is essential to note that if your app is minimal, Flutter may be overkill.

Growing Community

Flutter has a rapidly growing community that is advantageous for future development and getting help. When you choose a framework, it is often best to go with market trends. Not only will you have a large community to rely on, but it will be easier to find developers familiar with the framework.

Who is Employing Flutter: The Top 9 Flutter Apps in Production

There are many apps developed with Flutter. It is virtually guaranteed that you’ve been using an app developed in Flutter. We’ll showcase some of the most popular apps, so you can get a feel of what you can do with Flutter.

Google Ads

It is only natural for Google to use their framework for app development, and one of the premier examples of Flutter apps is the Google Ads app. Google Ads lets users manage campaigns and get all the information they need in one place. The user interface is clean, functional, and modern.

Alibaba – Xianyu

Alibaba is one of the largest eCommerce markets in the world. In 2017 they set out to build an app to support their top stores. With a shortage of iOS app developers, they looked for a cross-platform solution. Flutter won out of React Native by being quick to learn, and the hot reload feature. Flutter’s feature list enabled Alibaba to quickly release one of the top eCommerce apps in the market.

eBay Motors app

In December 2019, eBay launched a new eCommerce platform for cars. eBay designed the platform to allow users to buy, sell, and discover vehicles and buy and sell car parts. eBay Motors app Incorporates smart AI photo analysis to quickly identify cards from pictures along with Flutter’s responsive UI to give users an excellent user experience.

Hamilton Musical

The official Hamilton Musical app is chock full of features, such as a camera and stickers, a ticket lottery, an in-app store, and even karaoke. This full-featured app would be very challenging if you needed to develop it natively on both iOS and Android. And you can’t afford only to have one with this kind of wide audience app. Flutter shows its true potential in this app, with features that would otherwise require native development to work well.

The New York Times – KenKen

The New York Times collaborated with Google to produce this beautiful puzzle app across multiple platforms. It was showcased in Google’s 2019 developer keynote. The app demonstrated cross-platform functionality with Windows, iOS, Android, and web applications from the same code-base.

BMW

The previous version of the My BMW app was primarily developed for iOS even though it had an Android version. The two versions were different enough to have BMW look into another solution. Flutter’s cross-platform development was vital for their choice and the quick time-to-market. BMW keeps pushing new versions quickly, maintaining a high turn-around of updates, building over 10,000 versions over a year.

Topline Abbey Road Studios

Abbey Road Studios launched an iOS only music studio app that became immensely popular over a short period. Soon, their social media was flooded with pleads for an Android and a worldwide app. Abbey Road Studios didn’t want to lose their momentum to a lengthy development process, so they had to come up with a quick cross-platform solution. Topline has some complex logic and OS interactions, so they also needed to make sure it could deliver on the technical front. According to Abbey Road Studios, Flutter was the ideal solution.

Sonos

Sonos is a music aggregator connecting to other services. The idea is to have all your music from different services play in one centralized app. The nature of the app requires cross-platform development, iOS and Android, and Windows, macOS, and even FireOS. After an initial, somewhat buggy release, Sonos turned to Flutter for rapid cross-platform development. The new version of Sonos is bug-free and available everywhere.

Google Pay

Google Pay is another example of Google using their framework for app development. Unlike other examples on this list, there is something to be said about a payment app being developed on Flutter. Payment apps need to be as secure, responsive, and bug-free as possible. A malfunctioning payment app can be a costly affair. Google Pay being written in Flutter may be the ultimate endorsement.

Is your Flutter app next on this list?

There are generally few reasons to go against the grain of new frameworks. Using the hot and coming technologies helps you stay relevant, your development team stays relevant and makes it easier to hire new staff. You might consider a different framework if the scope of your project doesn’t justify changing a technology stack from what you’re familiar with or if you’re making a minimal app that could be better built using quicker but less full-featured frameworks.

It is hard to predict the future, but all signs point to Flutter being the go-to choice for most developers when it comes to app development. Yes, that’s some flattery to Flutter.