Flutter vs React Native Development: A Business Perspective

There’s a new player in the multiplatform mobile development town: Flutter. Here’s how it stacks up against Facebook’s React Native from a business perspective.

Category
Mobile
Web

It’s easy to get the appeal of cross-platform mobile development, whether you’re a business executive or a developer. Instead of having ‘two of everything’, that is, separate apps for iOS and Android, you get one team, predominantly one technological stack, shared and reused code between the platforms, and a drastically shortened development time.

Saving time and resources sounds great, but which of the many popular frameworks to choose? There are Xamarin, Qt, Ionic, and many others, all with their own pros and cons.

Today, we’re comparing one of the dominant frameworks in the cross-platform mobile development world—React Native, and a rising star on its way to peak hype—Flutter. Learn what’s common and what’s different between the two, as well as their selling points and bottlenecks, and decide which one will work best for your future multiplatform mobile app.

The Showcase: React Native vs Flutter

Here’s a brief overview of the technologies and companies behind React Native and Flutter:

To multiplatform or not multiplatform? #Flutter's strengths and shortcomings, compared to #ReactNative—a review from a business perspective.
Tweet

React Native

The framework was created by Facebook and officially rolled out in 2015. It is for building cross-platform applications with JavaScript, and is based on React (Facebook’s own component library for UI development).

Well-established, reliable, and popular with developers and enterprises alike, React Native has been used to create the current versions of Facebook and Instagram for iOS/Android, as well as Uber, Pinterest, Skype, Salesforce, Walmart, Wix, and many other cross-platform mobile apps.

It should be mentioned though, that some high-profile enterprise users, like AirBnB and Udontry, have been moving away from React Native in recent years, opting for native app development instead.

Flutter

This one is a relative newcomer among multiplatform development toolsets, yet is already considered by many to be one of the best. Flutter apps are written in the Dart programming language.

After a year-long beta testing, the framework was officially released by Google in December 2018, quickly becoming extremely popular as the new ‘it’ thing with developers.

As of late 2019, the commercial portfolio of the framework is a work in progress. Still, less than a year since the first stable release, and Flutter has already got the apps for Alibaba, Tencent, Nissan, the University of Toronto, Reflectly, and others under its belt. Some of Google’s own apps, like Ads and Greentea, have migrated to Flutter, as well.

Meet your new crossplatform mobile development team

How Many Platforms Are We Talking Though?

On paper, Flutter and React Native come surprisingly close in the ‘multi’ aspect of the multiplatform development. In addition to the two dominant mobile platforms, Flutter also covers development for Windows, Linux, macOS, web, and the soon-to-be-unveiled Fuchsia. React Native is just a little behind, with React Native for Windows already announced in May 2019, along with established plans to expand to macOS in the near future.

However, if you’re looking to cover ground beyond iOS and Android apps right now, React Native is still likely to be the better choice. Why? Let’s examine the current state of both frameworks, platform-wise, a little closer:

Flutter

  • Stable Android and iOS support
  • Relatively stable macOS support
  • Support of web, Windows, and Linux either at the preview and development stages still

React Native

  • Stable shared development for mobile and web 
  • A long history of successful commercial projects, with additional platform- and hardware-specific options coming soon

Currently, React Native stably covers mobile (Android, iOS) and web (although there are some gaps and limitations still), which means everything that’s able to run a browser. All the while Flutter is just gearing up to do the same, with many developers considering it not being production-ready just yet. The state of things will likely change in a couple of years, but right now if you’re looking to realize your own project in enterprise mobile application development, React Native is the way to go.

On paper, Flutter's getting a lot of ground covered: development for Android, iOS, the upcoming Fuchsia, with Windows, Linux, macOS, and web app support coming soon. Right now though, React Native's still a better all-rounder.
Tweet

Entry Threshold for Developers. Learning Possibilities. Community

React Native, as an extremely popular framework, has been existing for the respectable four years, while React Library goes even further back to 2013. For both the framework and its programming language (JavaScript), there are extensive documentation, massive online presence, and countless learning opportunities.

All of the above means a relatively low threshold for new adopters, toolsets for any occasion, and ease of development thanks to a massive corpus of already solved problems. For employers, it also means vast ‘hunting grounds’ allowing them to quickly hire complete teams of seasoned professionals.

How does Flutter fare in comparison? Both the framework and its language (Dart) are much younger and less popular technologies. Despite the substantial push from Google, its fast growth in 2019, and generally positive reviews from the adopters, Flutter hasn’t yet been around enough to provide for all things React Native has figured out. Flutter’s highly comprehensive documentation and shallow learning curve are impressive though, even if they’re yet to fill many gaps to become truly universal.

As of now, finding a team of tried and tested Flutter developers, especially with any sort of related enterprise experience, can pose a problem. Things can change, and sooner rather than later, but in 2019 React Native wins over Flutter, if by a narrow margin.

Dart vs JavaScript

React Native is based on JavaScript, the most widely used programming language as of 2019. In a survey by JetBrains, 69% of respondents were practicing JavaScript, with an additional 5% planning to adopt it soon.

Created in 1995, the language has a long and rich history, countless supported frameworks, ‘enhancements’ (like TypeScript and Flow), and an active community of devoted users. Because of the vast accumulated knowledge, innumerable courses, how-tos and tutorials available, learning and using JavaScript is considered relatively easy and, to a degree, a must-do for developers.

It’s safe to say that prior to the release of Flutter, there was almost no commercial incentive for developers to learn Dart, due to its ‘a solution in search of a problem’ status. It is not nearly as widespread as JavaScript; it’s also almost two decades younger and can be hard to learn for new programmers, despite its admittedly top-notch documentation.

The Dart tutorials and courses are sparse, although new ones are added by the day. Knowing JavaScript prior to approaching Dart can also help, since the latter’s syntax borrows elements from JavaScript yet stays unique overall. For seasoned developers with prior experience, however, learning the language should not pose a considerable problem.

Of the two languages, Dart is considered the faster one. Compared to the interpretable JavaScript, it can be compiled ahead of time (AOT) and just in time (JIT), utilizing the strengths of both methods for better process optimization and faster development.

When choosing between open-source cross-platform development frameworks, the tech-stack considerations should still be a priority, including a comparison of programming languages and such factors as the ease of finding existing developers and training new ones.

Testing Support

QA and testing are huge parts of any software development cycle. Both Flutter and React Native offer testing options, yet this is where Flutter outshines the competition: it has baked-in features to both run app tests on various levels (unit/widget/integration) and automate them, as well as options to test UI widgets. Google’s Flutter testing documentation is extensive and of a very good quality.

While there are several unit-level testing frameworks and other options for testing in the React Native world, the support is lackluster in comparison to Flutter. There are no officially supported integration and UI testing tools, and much less care and thought put into testing processes and opportunities.

All in all, this round’s clear winner is Flutter.

App Architecture and Prototyping. UI Controls & GUI Elements

Both React Native and Flutter position themselves as frameworks to create natively compiled apps, and there is much truth in it. But their approach to building UI is fundamentally different.

To build interfaces, React Native uses system UI components, while Flutter has its own widgets for it. Where React Native provides a “wrapper” for native, platform-specific UI components of Android and iOS, Flutter essentially creates the elements itself, using the third-party 2D graphics library Skia for drawing them from scratch each time.

The advantages of Flutter’s approach are in the details: developers have two sets of widgets for Android and iOS—named “Material” and “Cupertino” respectively—and can create custom widgets as well as customize the existing ones.

It also means that Flutter avoids one of the main limitations of React Native (and of many other native-component GUI builders for that matter). Namely, the problem of using platform-specific native GUI components of iOS or Android when there are no direct analogs to these components in other platforms.

Where React Native has to either work around such elements or abandon them completely, Flutter just creates the 100% same thing for iOS and Android with no hassle. While this potentially can lead to some inconsistencies in the overall style (like iOS-looking elements in Android apps), it still means less UI testing is necessary, since this is where Flutter’s got you covered.

Flutter was created by Google, so, naturally, Android components are very well-supported and prioritized. However, iOS widgets can be somewhat lacking, especially when it comes down to legacy design, staying behind iOS updates, guideline compliance, and visual consistency.

New iterations of iOS and Android roll out every year, which means UI changes. Flutter’s GUI building will inevitably have to play catch-up or risk making the apps created with it look dated. Striving for a native look as much as possible will come at a cost in terms of more complex code and additional development time, while the results might still not be 100% on the money in the end.

Still, Flutter shows great capabilities in quick prototyping and showcasing, and like React Native, it has the hot reload functionality. Allowing to quickly evaluate the impact of code changes visually, hot reload dramatically speeds up UI testing, which would otherwise take much longer.

In short: if having 100% native UI elements is crucial for your cross-platform development project, React Native is the right choice. If a lot of flexibility at the expense of some ‘nativeness’ is preferable, Flutter is the better option.

The individual pros and cons of #Flutter's and #ReactNative's approaches to GUI building. Which one is better for crossplatform enterprise mobile development?
Tweet

In conclusion

When talking about enterprise cross-platform app development, there’s always a choice to be made. Is native always preferable when budget allows it? AirBnB, Udontry, and Dropbox executives clearly think so. Is it better to use a somewhat limited but well-established and solidly backed framework? Facebook would urge you to say yes. Are you willing to make an investment in a still less developed but rapidly improving new star kid on the mobile software development block? Then Flutter might be just right for you.

At the end of the day, it’s always a good choice to carefully evaluate your project specifics, priorities and roadmap for the future to compare the pros and cons of each framework.

Contact us