I don't think Flutter is better than React Native

The author | Jamon Holmgren

The translator | nuclear Coke

Editor| Yanshan

Jamon Holmgren is the founder and CTO of a software development company with over 25 years of programming experience and a core member of React Native, maintaining several open source libraries. In this article, he tries to discuss the advantages and disadvantages of Flutter and React Native in as many ways as possible. This article represents only his personal views and hopes to bring benefits to the reader.

As the most popular multi-platform mobile app framework at present, Flutter and React Native are inseparable. The controversy over which of the two is better has never stopped... Developers are taking sides, and application delivery is only one of them. So, who is stronger?

The clever answer is, "It depends on the situation." There are advantages and disadvantages to each of the two, and who to choose and who not to choose depends on the specific trade-offs. ”

But such an answer is equivalent to not saying. Nonsense literature can not solve the problem, and the front-line is the scene that the masses like to hear. So, let's talk about which is stronger, The Whole Point is direct and exciting, and we're going to talk about Who is stronger, Flutter or React Native.

1

Is this topic important?

It's not important, but not important doesn't mean it's not interesting: performance, developer experience, Dart and JavaScript, native integration, standard libraries, and so on are all interesting topics that are worth talking about.

Some friends may think that this article is a bit of a title party, don't worry, I will delve into the details behind the discussion in a more subtle way later in the article.

Now let's get to the point: Is this topic important?

To say that it is important, for a company that intends to develop new applications, the following questions are unavoidable practical considerations:

recruit

Now, recruiting developers can be difficult. Wages for technical jobs are rising, but the market supply is quite limited. People who want to come can't see it, and people who look up to it don't want to come, which is very rare.

The group characteristics of Flutter developers can be summarized by enthusiasm and excellence, and also reflect the overall tendencies of the entire technical community. The problem is that there aren't a lot of developers like Dart. Therefore, we can only continue to train within the enterprise to guide everyone to master Flutter.

React Native developers, on the other hand, are quite large, backed by the highly established JavaScript community. JavaScript (and its variant, TypeScript) is currently the most popular programming language in the world, and the number of participants is still growing rapidly. React .js with React Native is arguably one of the largest coding frameworks in the world, or even one of them. So, while recruiting is also difficult, the number of developers to choose from is certainly much larger than Flutter. In addition, React developers can easily transform into react Native developers.

Share code, knowledge, and developers

In addition to hiring, another important factor in determining who is stronger is The code, knowledge, and developer scale is shared.

What's more important in software development than good code? That's less code. One of the best ways to cut down on code work is to share existing code artifacts between applications. This not only shortens the initial development cycle, but also helps to simplify the long-term maintenance process.

Maybe your company is using React .js in websites, web applications, or servers, or at least JavaScript. This ability to share code between React.js applications, Node servers, and more is react Native's proudest asset — Flutter is significantly weaker in comparison.

In addition to sharing code, React Native enables knowledge sharing between web, backend, iOS, and Android teams. Tutorials on React Native, React, and JavaScript are also available online, not counting technical blog posts, StackOverflow Q&A, and other complementary content.

In addition, developers can also "jump back and forth" between projects, and can quickly devote themselves to key projects with tight time and heavy tasks without much secondary training.

So in the binary between React Native and Flutter, it's hard to ignore the above basic facts.

2

So, what about other factors?

Yes, performance, developer experience, accessibility, and third-party library ecosystems are also important.

In these aspects, Flutter and React Native are basically spelled out. Flutter wins in some ways, and React Native has its own specific advantages. So in addition to being able to share code with the Web, the two are evenly matched in other specific ways.

Developer experience

The Flutter team (and Google as a whole) is really good at designing the developer experience.

Flutter's development environment is generally less difficult to set up than React Native. Flutter's hot reload is also a bit better than React Native's fast refresh. It provides excellent tools for part debug, analysis, and inspection, and the built-in end-to-end testing capabilities are much better than React Native's Detox. Flutter's CLI is among the best in the industry — I particularly like the flutter doctor command, which allows developers to manage their simulators and emulators directly through the CLI.

Flutter's upgrade experience is also better, we run Flutter create directly in the existing application, it can rebuild everything according to the new version.

In contrast, many of React Native's tools are not as elegant and well-rounded as Flutter. One of the most uncomfortable is the upgrade experience, which friends who have used React Native in recent years should feel the same way.

Of course, the situation is gradually improving. Several of Microsoft's biggest names discussed ideas for improving React Native tools and the developer experience in previous interviews.

Expo has also dramatically improved the developer experience in React Native. With Expo services, you will not only be able to implement all the features in the original React Native, but also get a better upgrade experience and integration tools. If you don't plan to use custom native code, Expo Go is a great way to quickly share builds with others without compiling. Anyway, if you're using React Native, don't miss Expo!

Bottom line: Flutter's developer experience has clear advantages; React Native is catching up, but it's still a long way off — but the advent of Expo has been a powerful boost.

performance

The performance differences of software frameworks are actually difficult to compare, let alone highly complex framework scenarios like Flutter and React Native. In most cases, both Flutter and React Native are "fast enough," and if developers have the ability to do a little performance optimization, it's even more problematic.

Historically, though, Flutter's out-of-the-box performance has consistently outperformed React Native. Of course, the anti-bar statement: We've all seen extremely poor Flutter apps and excellent React Native apps, and that's just the overall trend.

The performance difference between the two is mainly due to the asynchronous React Native bridge. But with the introduction of the new architecture this spring, it will be replaced by concurrent communication between native and JS code. In addition, the Hermes JS engine takes many key performance indicators to the next level. Finally, Skia is now added to the React Native Family Bucket, which means that you can use the same renderer as Flutter in React Native – only where smooth performance is required, of course.

Summary: Flutter is temporarily a small lead in performance, but the introduction of React Native's new architecture is expected to quickly close the gap.

Unified UI experience

Flutter uses Skia for UI rendering and provides a uniform look and feel on all platforms. This allows developers to optimize performance, customize the UI, and effectively get rid of the influence of the platform's natural features.

React Native, on the other hand, uses UIKit on iOS, the Android layout system on Android, and the DOM on the web. This means that while we can try to emphasize similarities when building application appearances, actually running on different platforms is often influenced by specific interpretation methods.

There have been complaints about Flutter, criticizing it for reinventing problems that have been solved by the platform itself, including accessibility features, font scaling, and so on. To be fair, Flutter's scheme works well (using a lower-level built-in platform hook), but it's a two-pronged effort; React Native, by contrast, always relies more or less on the primitives provided by the platform.

It is also worth mentioning that Google developers have said that they will no longer take the unified experience as a core goal. This doesn't seem to match Flutter's route.

Summary: If people think that better matching user experiences on different platforms is more important than providing a unified cross-platform experience, react Native still wins slightly.

Native integration

Flutter compiles dart code into native code and uses its own so-called Platform Channels to incorporate native code into a cool integration model. It allows synchronous native calls and also allows developers to write code using Swift and Kotlin. Flutter's documentation is also of high quality and offers a variety of tools, including out-of-the-box testing and simulation. Whichever platform you choose, there are plenty of templates available here and best-in-class threading support with Isolates.

On the React Native side, native integration has a certain threshold for entry. In addition, we had to struggle with react Native bridging limitations, and the native integration documentation was not satisfactory.

It is worth noting that the new generation of React Native architecture directly last year to the bridge, fully introducing the advantages of native synchronous integration. So after the upgrade, the disadvantages of React Native are not much.

Summary: Both platforms have full native integration capabilities, but Flutter's native integration tools are better.

International level

Internationalization / localization (i18n) is of course important. Flutter has built-in i18n support, so it doesn't rely on other third parties. React Native lacks built-in support, but third-party i18n support is getting better.

Summary: There is no win or loss – both platforms perform well in terms of internationalization, but each has some limitations.

Built-in navigation (and more)

Flutter is more thoughtful in design than React Native, and the most typical manifestation is that it comes with its own navigation/routing solution.

Navigation is a module that is particularly well suited for integration into the core framework because it is very important to most applications. Imagine Next .js without a routing program... That would be basically scrapped.

React Native takes a more flexible route, allowing developers to introduce their familiar navigation solutions at will. There are plenty of options, but the best support for the React Navigation and React Native Navigation libraries (a bit of a shame).

Flutter also offers features like built-in theme support. On the other hand, as a boilerplate option on React Native, Ignite also has its own theme support feature, the only difference being that these themes are not built-in themes for React Native.

The benefit of Flutter's built-in route allows developers to adjust the functionality to match the framework features of each version. But the built-in route also has the disadvantage that once a better paradigm emerges, developers can only pray that the official support team can replace those newer and better solutions as soon as possible.

Small summary: Flutter has certain advantages. Having a built-in navigation module isn't a bad thing, but the React Native community also offers a number of great options.

Web support

Flutter 2 announced that it will support the web and other platforms.

But the web approach they chose could only be said to be "allowing developers to draw on the canvas" rather than using the native DOM.

This will definitely bring accessibility and SEO issues. And that's not all... In conclusion, to be euphemistic, developing web applications with Flutter should not be the preferred option.

It is worth mentioning that Flutter does provide HTML/CSS/DOM versions, but it does not use as much as the canvas renderer. But even so, it simply can't compete with React .js in this regard.

On the other hand, React Native can share code directly, whether you're developing web applications with React Native or choosing React .js directly. JavaScript/Typescript shared services and modules enable developers to easily share large amounts of business logic, data models, and more, and split and share UI components directly in web applications. In short, React .js is designed for the Web, and everything is designed with Web development as the goal, which is different from Flutter for Web.

Summary: React Native has a clear advantage. While Flutter 2 is also moving in this direction, React Native already has a huge first-mover advantage in the web space. It's hard to close the gap.

Third-party libraries

In a typical React Native application, we use a number of libraries and tools originally designed specifically for JavaScript or React, including axios, mobx, redux, lodash, ramda, eslint, babel, jest, prettier, react-devtools, typescript, npm, yarn, etc.

These are common libraries used by web and Node developers. So after the community merges, these tools will be contributed and improved in both ways, and the atmosphere of knowledge sharing and mutual help will be better.

Flutter, on the other hand, mainly uses tailor-made libraries. While there are some third-party Dart libraries available, the community is far less large than JavaScript.

Having said that, Dart comes with a unified formatter, test, compiler, parser /linter, package manager, and is also a type-safe and null-safe language. So when using Flutter and Dart, developers may rarely need to use any third-party libraries.

Summary: Both Flutter and Dart provide a lot of high-quality built-in tools, but React Native has a significant third-party ecological scale advantage. And it's important to admit that isolated communities like Dart/Flutter are unlikely to recreate a strong ecosystem like JavaScript/React.

Companies that use React Native and Flutter

React Native's growth is inseparable from the unremitting efforts of many enterprises. In addition to Meta/Facebook, Microsoft is also investing heavily in react Native project development. The core team of the project has been working with Microsoft developers on all aspects, and microsoft has also rewritten many applications using React Native and built a number of tools and libraries for them. In fact, Microsoft even recently announced that even some of the main Settings apps in Windows are written in React Native!

In addition to Meta (Facebook vs. Instagram) and Microsoft, React Native is widely used by large organizations such as Coinbase, Shopify, Mercari, Discord, Pinterest, Tesla, Walmart, Wix, Salesforce, NFL, MLS, and Uber Eats.

Flutter's support mainly comes from Google, and throughout the development process, Google's support for the project can only be said to be mixed. Others are also using Flutter, including Toyota, eBay and Alibaba, but most of the development is driven by Google itself.

That being said, Flutter does a great job of openness, full open source, ongoing community engagement, and feedback-driven development. React Native, by contrast, feels a bit self-centered, generally prioritizing the actual needs of Meta/Facebook and then pushing the results outward. But the React Native core team has been working hard to steer the project towards community-driven.

Small summary: React Native is dominant. This problem is more complicated, involving many small differences, and I will not dwell on it here.

Dynamic updates (code push, etc.)

Many projects don't actually need dynamic updates, but many enterprise customers like React Native because of this because it can dynamically update applications, thus avoiding the complex approval process of the App Store and Play Store. There is no similar design on The Flutter side, and it is not mentioned in the roadmap for future development.

Small summary: Advantages in React Native.

3

So, should we use React Native or Flutter?

It depends on the situation. There are pros and cons to both, who to choose and who not to choose, depending on the specific trade-offs... Although there is always a lot of debate on the Internet about this question, there is really no definite answer, and the difference between the two is really not obvious.

As mentioned earlier, the technical talent pool in the market directly determines the difficulty of recruitment, which may be the primary consideration when making a specific choice. If you already have web and back-end development talent using JavaScript/TypeScript, especially React, React Native is definitely a better answer.

If you're on the Java or Android team (developers with Java/Kotlin can easily get started with Dart) and/or need a more unified, fluid UI, flutter's advantages are there. While hiring may be more difficult, Flutter at least offers a better developer experience and performance.

In short, after putting aside the "right nonsense", now everyone has a little more material to guide weighing and thinking.

4

Write at the end

This topic is really sensitive, and if you are not careful, you will be scolded, so I have to say a few more disclaimers. First of all, this is just my personal opinion. I'm a React Native consulting business and I'm working with the react Native core team, so I won't say how objective and unbiased my views are. But I did a lot of research, taking into account the current state of business cooperation between the two platforms, and also took into account the changes from several Flutter developers when writing. They may disagree with my views and conclusions, but I do have to seriously consider their feedback. In conclusion, I hope to discuss this issue as fairly as possible in the article.

I also don't pay attention to the aesthetic, elegant aspects of the problem, such as the syntax of Dart and TypeScript, or who is better in the functional structure of JSX and Dart. These are matters of personal preference, and there will be no definite conclusions and no essential impact on the usability of the framework. There is certainly a difference between Dart and JavaScript/TypeScript, but this is another topic that is beyond the scope of this article.

Finally, readers who agree with or disagree with the views of this article may wish to chat about their views in the comments.