As CTO of FullStack Labs, Mike Piccolo is constantly on top of the latest trends in software development technologies and their impact on the industry, which he accomplishes by interviewing developers on a daily basis. This time, the debate between React Native and Flutter for mobile development caught his eye. Here’s his take on this topic.
One of the main tasks I fulfill as FullStack Labs’ CTO is assessing the technical and cultural fit of new employees. My involvement normally begins at the final stages of our hiring process, where I can do my part in making sure FullStack Labs always hires the best candidates. But, beyond that, I’ve also found these moments are a great opportunity to learn more about the insights and interests of many different developers.
For example, most of my recent conversations with top cross-platform mobile developers have had one thing in common: an increasing level of excitement for Flutter when compared to React Native. Since React Native is one of the main technologies we use here at FSL, I got curious and started doing some research on the “flutter vs react native” dilemma. Naturally, I had to write an article about it, so let’s start with some of the basic concepts.
Flutter is an open-source mobile UI framework designed to help developers create native applications for mobile, web, and desktop using only one codebase. It was created and officially released by Google in 2018, and it’s arguably just starting to become a mature technology in the mobile development industry. From what I’ve seen, there are two things that make Flutter stand out to mobile developers:
Since then, Dart has certainly improved a lot and the growing popularity of Flutter is proof of it. Today, Dart is seen as a very powerful programming language, and Flutter developers especially appreciate its support for inheritance, interfaces, and asynchronous programming. In fact, I believe most people would agree that the grand majority of mobile developers (and even React Native developers) are choosing to learn Dart because of Flutter. If you’re interested, here’s what a Hello World app looks like using Dart and Flutter:
Finally, we can’t really talk about Flutter without talking about its widget-based system. The idea behind Flutter is to combine different widgets that provide developers with everything they would need to build an entire UI. As I briefly mentioned before, these widgets can be used to define almost any type of UI element, including structural (buttons, menus), stylistic (fonts, colors), layouts (padding, sizes), and many other types of elements.
Keep in mind that Flutter uses its own ready-made and native-looking widgets for this and it never uses OEM widgets, as some of the new people learning Flutter might think. Developers can also create their own custom widgets and use reactive-style views that compile Dart ahead of time into native code for multi-platform apps.
There’s a lot more to say about Flutter, but I feel this is enough to give you a rough idea of it. We can take a better look at it when we start comparing it to React Native, so let’s move on.
In essence, the working principles of React Native are almost identical to the ones of React. However, note that React Native does not manipulate the virtual DOM, and instead runs background processes directly on the native platform. Also, React Native does not use HTML or CSS. As Mark Zuckerberg famously said in 2012, HTML was never the path towards true native experiences.
In 2018, React Native had the 2nd highest number of contributors out of all repositories in GitHub and it remains one of the top ones to this day. Their community is as strong as it has ever been, and thousands of big-name companies have already rewritten their apps with React Native. Some of the most notable ones are Coinbase, Shopify, Uber, Erikson, Facebook, Instagram, Pinterest, Discord, SoundCloud, and Skype.
React Native has stood out as a unique cross-platform development solution because of its incredible code reusability, rapid cross-platform development, a large development community, and native-level performance. With all of that said, let’s move on to the actual comparison of Flutter vs React Native in 2021.
To start anecdotally, nearly all of the developers I have talked to or heard discussing cross-platform mobile technologies have been more excited about Flutter than React Native over the last year. This correlates with the data in Stack Overflow Trends, which shows that Flutter overtook React Native sometime in 2019. Since then, React Native has leveled out and Flutter is holding an upward trajectory.
But the correlation doesn’t stop there. Several other sites show that, when comparing the best cross-platform mobile app development technologies, Flutter is consistently trending up while React Native holds or slightly declines. For example:
I also posted some of my initial thoughts about Flutter vs React Native in this Twitter thread, starting with a quick survey that got the following results:
All of this data comes to show what you’ve probably realized already: Flutter is getting comfortably ahead of React Native. However, with only 13 thousand apps using Flutter at the moment (in comparison to React Native’s 31 thousand), React Native still has a significant dominance in mobile stores and we have yet to see how many more companies will ultimately choose Flutter for their upcoming projects.
It seems like React Native takes this round. Let’s move on.
According to the official Flutter documentation, Flutter’s architecture is designed as a layered, extensible system. In other words, it exists as a series of independent libraries that always depend on their underlying layers. No layer has privileged access to the layer below it, and every part of the framework level is designed to be optional and replaceable.
At the core of Flutter is the Flutter Engine, which is written in C++ and supports all the flutter primitives. Developers normally interact with Flutter through the Flutter Framework, which is the modern, reactive Dart framework we’re used to seeing. At this level, we can find the foundational classes, the rendering layer, the widgets layer, and the Material and Cupertino libraries. For further information, please refer to the documentation linked above.
React Native’s architecture is Flux, the application architecture that Facebook uses for building client-side web applications. It is based on the concept of Unidirectional Data Flow, and made of four individual components:
The Dispatcher is perhaps the most important component of the bunch. It differs from generic pub-sub systems in two ways: first, callbacks are not subscribed to particular events and, second, every payload is dispatched to every registered callback. Along with Node.js’s EventEmitter, Flux will use the Dispatcher to set up an event system that makes it easier to manage the application state. Further information can be found in their GitHub documentation.
With all of that said, determining who wins this round is a bit pointless from a general perspective. Both React Native and Flutter have great underlying architectures—otherwise, they wouldn't be as popular as they are. Choosing one or the other based on their architecture is mostly dependent on the particular requirements of the application, so I’ll leave this score to you.
When it comes to performance, Flutter takes a very different approach than React Native or even native development. In essence, the fact that the Flutter framework is compiled using ARM C++ allows it to get as close to machine code as possible and, consequently, allows for better performance in most scenarios. React Native, in contrast, compiles its UI components into their native equivalents, runs JS on a separate thread, and communicates directly with native modules using bridges to ensure all needed actions are fulfilled.
This means that Flutter’s widget-based system makes it a great option for performance-optimized applications that need to use as little CPU and memory as possible. React Native, on the other hand, often needs additional components to achieve UX targets, which naturally reduces performance just slightly enough to be considerable. All of this is illustrated with several examples on this benchmark.
Additionally, the Google team just released Flutter 2, which now supports Progressive Web Application (PWA) development using the same code base as mobile projects. Flutter 2 also provides support for high-performance 2D and 3D APIs and hardware acceleration, and companies like iRobot and Rive have recently released performance-driven web and mobile applications that leverage these features.
Based on this information, I believe that Flutter is better for performance-driven applications, so we’ve got to give it this round. However, there’s a lot that goes into measuring performance, so your mileage may vary.
Still, since many React Native and third-party components rely on native code to be rendered, Jest is forced to include a manual mocking system that can help to mock out the underlying implementation. Common third-party components like video can easily be mocked, often with just a few lines of code, but more complex manual mocks are required for forwarding prop types or static fields.
In Flutter development, unit testing is fairly simple, as developers only need to test Dart classes using the dart package. Then comes widget testing, which is analogous to component testing. Testing a widget involves multiple classes and requires a test environment that provides the appropriate widget lifecycle context, but everything is included in the flutter_test package, which ships with the Flutter SDK. These are the tools included:
Arguably, the widget testing tools provided by Flutter make testing an easier and faster job than testing in React Native. So we’ve got to give this one to Flutter.
Since they are designed for cross-platform development, both React Native and Flutter are great for development speed and can reduce traditional project delivery time by up to 50%. They also both have their own implementation of “Save, See, Repeat” iterations (Fast Refresh for React and Hot Reload for Flutter), and they both work extremely well. However, the final development time will always depend on two things: the knowledge of the development team in the technology and how many developers you can actually hire.
In contrast, Flutter hasn’t had as much time to attract as many mobile developers, even if it’s significantly trendier right now than React Native. This means that there aren’t as many developers with a lot of seniority in Flutter development, and it might be a bit harder to find the right people for the job.
Taking all of this into account, development speed is likely to be higher in React Native development projects. However, Flutter does provide many different IDE integrations that can really speed up development. Even on VIM, Flutter allows developers to use tools like IntelliSense, autocompletion, and validation. None of that is available on React Native unless you use TypeScript and the package supports types. So, in terms of potential, Flutter could be the faster development technology.
Popularity aside, both React Native and Flutter have amazing communities of developers behind them. And, contrary to what you may believe after reading the popularity section of this article, the numbers are fairly close. Here’s a quick glance at some relevant community stats for each technology:
As of the publication date of this article, the numbers in these tables show that the React Native and Flutter communities are very similar in size. However, Flutter has had three fewer years to build its community, so I find it quite amazing that it has managed to surpass React Native by significant margins in some of these metrics. With Flutter, it’s all been about its accelerated growth curve, as shown by this graph.
Beyond that, I think it is also valuable to take a look at some of the major apps using these technologies. On one side, some popular React Native apps are Facebook, Tesla, Bloomberg, Instagram, Coinbase, and Uber (we actually know a little bit about this last one, since FullStack Labs worked on a React Native project with Uber). On the other side, some popular Flutter projects are Google Assistant, Alibaba, BMW, Square, eBay, and Capital One.
There’s still one major difference to point out here, though—and that’s how the ecosystems of both these technologies compare. As the more mature technology, the React Native ecosystem is more stable and has a lot more packages available. That’s why it’s still the preferred cross-platform development technology for larger projects. Flutter, on the other hand, can’t be saved by its trendiness and is definitely not as mature as React Native. They just recently hit the stable milestone for their web version last March, and, unlike React Native, they still maintain beta versions of the software on their official site.
With all of that into play, I’ve got to give this one to React Native. Flutter comes very close and it will probably reach the “mature technology” category sooner than expected, but until then, it seems like React Native’s older and more stable community is the winner of this category.
Before finishing up, let’s take a look at all that we’ve learned in a comparative table.
Comparing React Native and Flutter in this article has been particularly difficult, but I hope that the information here can help you in some way or another. After all of this, I do agree with all of the developers I’ve talked to: Flutter is certainly a very interesting technology with a lot of potential, and I can see it growing more throughout the rest of the year.
Nonetheless, I still believe React Native has a place in cross-platform development and that’s not going to change anytime soon. The fact that it’s easier to find senior React Native developers than senior Flutter developers means that most large projects will probably still choose React Native in the near future. Maybe in a year (or less) Flutter will finally reach that “maturity” point and be easier to trust for tech leaders.
For now, I think it’s very exciting that so many people are jumping into the Flutter bandwagon and as CTO of FullStack Labs, I’m also looking forward to working on more Flutter projects with my team. React Native and Flutter are both amazing technologies and I am certain that the future of mobile and cross-platform development lies in them.
We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Engagements start at $50,000.