If you are building a mobile app in 2024, you are probably familiar with Flutter and React Native. Both are popular open-source UI frameworks that build for iOS and Android from one codebase. In the past, multiple platforms meant multiple codebases and specialized developers. Many of us remember the cost overruns, inefficiencies and sheer headache of keeping everything in sync.
Fortunately things have changed. Flutter and React Native have delivered on the promise of “multiple platforms, one codebase,” at least as far as mobile is concerned. But since the future is now, can we extend that promise? Can we build products for iOS, Android and the web from a single codebase? How about other platforms like macOS, Windows and Linux? If so, how do you decide which framework is right for your product? Most importantly, does either framework give your product a competitive advantage in 2024?
At Red Foundry, we strongly believe React Native offers specific advantages over Flutter in the majority of our clients’ use cases. Before elaborating on how to frame product requirements when selecting a UI framework, let’s take a high-level look at both frameworks and the big difference between the two.
React Native
React Native is the older of the two frameworks. Launched in March 2015 by Meta, it is currently in use by millions of developers worldwide. Companies like Instagram, Walmart, AirBnB, and Skype rely on apps built with React Native.
React Native allows developers to use native iOS and Android components by writing JavaScript or TypeScript code. This means the look and feel of your app will be familiar to iOS and Android users. Though mobile development is its own skillset, it also means that your app’s code will be understandable by experienced React developers. React is far and away the most popular frontend UI library for web development in use today. React Native is built upon many of the same principles and concepts as React, so it stands to reason React Native apps will be maintainable well into the future given the total mass of the React ecosystem.
As far as developer experience is concerned, React Native has a very large, vibrant and growing community. Companies like AWS and OpenAI maintain JavaScript/TypeScript software development kits (SDK’s) that expedite development when integrating their services into React Native apps. The React Native community also produces and maintains thousands of open-source libraries almost as quickly as new technologies arise. Tools for debugging applications are good, but not as integrated and functional as they could be.
Out of the box, React Native builds for iOS and Android. However with a little help from a library called React Native for Web, it can be made to build for web browsers to good effect. Frameworks also exist to build React Native apps on macOS and Windows.
Flutter
Flutter is React Native’s younger cousin. Released by Google in May 2017, it has quickly become one of the most popular UI frameworks for mobile development. According to a recent GitHub report, Flutter is third on their list of top open source projects by contributors in 2023, beaten only by Home Assistant and VSCode. Companies like Alibaba, Tencent, BMW, eBay and Google all rely on apps built with Flutter.
Unlike React Native, Flutter doesn’t talk to native iOS or Android components. Flutter uses a programming language called Dart to define components that make up your interface. It turns your Dart code into low-level instructions your device can use to actually draw components on the screen. In theory you can customize your components to your heart’s content, but in practice you will most likely use the many Material components Flutter includes. MaterialUI is a design language used by Google. While Flutter doesn’t lock you into it, it certainly makes it more efficient to do things the MaterialUI way. Components and interfaces are still very customizable in Flutter, but this may be a constraint to account for if your brand or design guidelines are very specific.
Flutter is backed by a vibrant open-source community, albeit much smaller than the React Native community. Few companies support Dart SDK’s, but there are plenty of high-quality open-source Dart libraries that address common problems and tasks. Because of the smaller community size and fewer large companies developing specifically for Flutter, we have found that the Dart community is slower at incorporating bleeding-edge technologies into its open-source libraries. This can make integrating the latest offerings from, for example, OpenAI more time consuming than in React Native. However developer tooling with Flutter is very good, making it almost as easy as possible to debug apps.
Out of the box, Dart builds for iOS, Android, web, macOS, Windows and Linux. Different design concerns may apply to each which we will cover more below.
The Big Difference
It sounds like both frameworks do similar things. Other than the programming language, what is the big difference between the two? It comes down to the technical architecture of each framework.
React Native translates between JavaScript or TypeScript and native iOS or Android code using a bridge and 2 separate threads (processes). Communicating across the bridge happens asynchronously so that what happens on one side does not block what happens on the other. In medium to large-scale data-intensive applications that use lots of hardware, this means performance can be slow at times, but it is often not.
Flutter compiles Dart code into native machine code and uses a graphics engine to draw pixels on the screen. Because Flutter speaks directly to your device’s hardware rather than translating across a bridge, its performance can be very fast. But larger screen sizes (think web browsers) mean the graphics engine must paint a bigger canvas which can negatively impact performance. Flutter also includes its graphics engine in your app bundle, meaning a larger bundle size.
Your Product’s Edge
Both frameworks achieve similar ends through different means. Both can build for multiple platforms. Both can perform blazingly fast at times and noticeably slow at others. Both also have vibrant, growing communities and deliver good developer experiences. So why do we believe React Native is still the right choice in 2024?
One question stands out to us when considering UI frameworks: is a native user experience important to you? By “native user experience” we mean more than whether or not your app looks and feels like other apps on the same platform. A native user experience takes thoughtful designs and leverages the best available software to integrate device-specific hardware into a cohesive whole. Most importantly, it should do so within your business constraints. In this respect, we think React Native makes it possible to do more with less and with fewer trade-offs than Flutter. The efficiencies granted by the React Native community and the broader React ecosystem are too great to ignore, especially when it comes to delivering the latest and greatest features to your users within the constraints you set.
Taking your product’s future into account, another important concern is how easy it will be to find qualified developers to maintain it. According to a January 2024 report on hiring trends, posts searching for React Native roles outpaced those searching for Flutter roles. This trend holds historically, indicating the pool of React Native developers is larger than the pool of Flutter developers. The similarities between React and React Native and the popularity of JavaScript/TypeScript also increase your chances of finding experienced talent to keep your product at the top of its class.
Using Flutter to build apps for the web also gives us pause. Flutter’s large bundle size can lead to longer loading times, especially for mobile web users with spotty internet connections. There is also the above-mentioned performance concern when rendering resource-intensive Flutter web apps on machines with older hardware. While much more commonly a concern with static websites than web apps, Flutter’s support for search engine optimization (SEO) is sketchy at best.
Another concern we have deals with Flutter’s future and the “Google Graveyard.” Google is notorious for killing support for its products and frameworks with little notice. Look no further back than September 2023 when Google Domains found itself 6 feet under. 10 million registered domain names suddenly found themselves under new management. We also wonder what Kotlin Multiplatform means for Flutter’s future. Much more so than Dart, Kotlin is an enormously popular programming language for developing native Android applications. If a framework surges in popularity that allows Kotlin developers to build for multiple platforms from one code base, will Google continue to devote resources to Flutter?
A broader conversation about the costs and benefits of “one codebase, multiple platforms” may be useful given the specifics of your product. Obviously the less code to manage the better, but does it fit your use case? Are you offering similar user experiences on web and mobile, or do they differ enough to warrant separate codebases? Does it make sense to build your app with only one framework, or are different hardware and software requirements better managed by two, say React and React Native? These are the questions we want to help you answer to position your product for success.
At Red Foundry, we focus as much on your product’s business goals as we do on the technology that goes into it. Your product’s UI framework should work in service of those goals, not the other way around. In the vast majority of today’s use cases, we think React Native still offers efficiencies Flutter cannot. Our experience shows that React Native gives our clients’ products the feature-richness and long-term stability they need while minimizing development time and the risk of accruing costly technical debt. This is not to say we think Flutter does not have a lot of potential–quite to the contrary. It is to say your product should be built with the best tools available, and we would love to start a conversation about how Red Foundry can put them to work for you in 2024.
Flutter Pros:
- Performance: Flutter performs well due to its direct communication with the native components without the need for a JavaScript bridge.
- UI Consistency: Flutter uses its own widgets for UI which guarantees consistency regardless of the OS version.
- Excellent documentation: Flutter has detailed and well-structured documentation that can speed up the learning and development process.
Flutter Cons:
- A comparatively smaller community: Not as mature or as large as React Native's which means fewer third-party plugins and libraries.
- Fewer Experienced Developers: Flutter is newer and there are fewer experienced Flutter developers compared to React Native.
- Not as many apps in production: It’s still a newer framework and not as battle-tested as React Native.
- Larger App Size: Flutter apps can be larger than React Native apps which can limit its use for companies that require smaller-sized applications.
React Native Pros:
- Reusability and Code Sharing: Easy to reutilize the same code for deployment on different platforms.
- Large Community Support: Since it's been around longer, React Native has a large, mature community that has created numerous third-party plugins and libraries.
- Experience of JavaScript Developers: React Native uses JavaScript – a language that many developers are already familiar with.
- Quick to Support New Technologies. Given its large and vibrant ecosystem and the experience of JavaScript developers, React Native is quick to support new technologies.
React Native Cons:
- Development complexity: It is rare in practice, but for complex functionalities, developers might need to write native code in Swift, Objective-C, or Java.
- Dependence on Third Party Libraries: Most advanced features in React Native will require third-party libraries, which are sometimes, but often not, of subpar quality.
