Introduction

When I was a student, I created my first mobile application with ionic 3 and Angular.

Then I joined BAM, a mobile agency based in Paris, as a software developer, and worked a year and a half with React-native. I loved It. There are so many things that make this technology awesome, and I still recommend using it.

Today, I'm still a developer at BAM, but now, I'm working with Flutter.

So, do I like it?

Yes.

Do I think it's awesome?

Yes.

Do I recommend using it?

Yes.

Do I think Flutter is better than react-native?

Well, no.

Both technologies achieve the same purpose: building premium cross-platform applications.

How do we choose the technology to build our apps?

I don't think there is a universal answer. There are a lot of articles explaining how the technologies work, or matrices of comparison out there. Let's try another approach, what problems do you want to solve with your app? What are the key features? What are the technical requirements of your app?

If you want to build a mobile application, this decision will help you chose the right technology.

Decision tree

Explaining

Let's explain.

Does the app run and android and iOS?

If your app needs to be deployed on iOS and android, you should consider using cross-platform technology.

If you like working with hot reload, choose Flutter or React-Native.

If not, then to solve a problem, use the right tool. Kotlin or Swift might be the best solution.

IS the most important use of your app the web?

Flutter web works. But it has some flaws:

• The application is rendered in a canvas, not with HTML and CSS.
• It's not SEO-friendly.
• Apps have a big bundle size.
• It's always client-side rendering.

On another hand, React-native web is more close to web conventions. It's easier to use all web technologies and libraries.

You can definitely use Flutter web to use deploy your Flutter app on the web. But React-native web might be a better choice if the web is the main platform of your app. Or maybe another technology that is web-based.

Does the app run on smart objects?

"Write once, run anywhere" doesn't only apply to Java, but also to Flutter.

With native support of iOS, android, web, macOS, windows, linux, Fuchsia, and smart object, Flutter is the clear winner of platform integration.

Toyota's infotainment systems will be powered by Flutter. (Is Flutter the leanest framework ?)

Google Nest Hub, start to implement fuchsia, therefore Flutter.

If your app needs to run on an IoT device, go Flutter.

Does your app have a lot of computational business logic?

Your app may need to do a lot of computation. Dart is faster than JavaScript.

React-native is single-threaded, Flutter is multi-threaded.

Some benchmarks show that Flutter apps run calculation algorithms as fast as natives apps.

To build the fastest cross-platform application, choose Flutter.

Does your app have a lot of animations?

If you want to put a lot of animations in your app, choose Flutter.

• Flutter apps can run at 120fps, React-Native apps are limited to 60fps.
• Flutter has a lot of widgets to do implicit animations.
• Creating animation can be handy with React-native, Flutter makes it easy.
• Skia, the graphic engine used by Flutter, is very powerful.

Is your app of type CRUD?

Create, Read, Update, and Delete data. If you're building a crud application, you might not need fancy animations or impressive performances. What you might need, is an easy and fast way to do API calls and store data.

React-Native and React have been around for a while, the community had time to build a very efficient state-management library. The Flutter community is younger, and there is no consensus on how to handle state management, especially to handle server-state.

With React-Native, you will be able to develop an application faster, using tools like Apollo or React-Query.

Does your app need instantaneous updates?

Unlike a web application, which can be deployed in a few minutes, to reach more users a mobile app must be deployed and distribute by proprietary stores. Like App Store and Google Play.

That means:

• Slow deployment process.
• You need another company (apple and google) approval to publish your app.
• Users won't always have the latest version of your app.

So how do you do when you have a critical bug in production, and you want to deploy an immediate fix to all users?

With a Flutter or a native app, you can't.

But with React-Native, you can update your app without the stores, by using CodePush.

If you need instantaneous updates of your app, choose react-Native.

At this point, if you haven't decided what technology to use, it probably means that you can build a great app with either React-Native or Flutter.

We are trying to compare the two champions of cross-platform development, both technologies are awesome, both technologies can answer most business problems.

How to choose, then? Well, there are still arguments that can help you make a decision.

By the way, I recommend you to read this article by Andrei Calazans. It takes the matrix approach to answer this question.

What are your team strengths?

The skills of your teams' members must be a primary driver of your decision.

• Is your team experienced with web development, with TypeScript, or with functional paradigms?

👉 The developers will be more comfortable with React-Native.

• Is your team experienced with Dart, object-oriented programming, native development?

👉 Your team will have an easier time working with Flutter.

What is the key feature of the application?

Which ecosystem best integrates this functionality (ADR)?

Your app has a key feature. It could be an audio player, direct messaging, or collecting data from the device's sensors.

You should write an Architecture Decision Record, that will help you find what technology is best suited for the features that bring the most value to your users.

Conclusion

I had a great time working with React-Native and Flutter. I chose to work with Flutter for all the cool opportunities that come with new technology.

As developers, we have the chance to choose between those two frameworks.

Both Flutter and React-native are great and will continue to improve in the future.

Choose your fighter.

Sources

• POURQUOI LE MULTIPLATEFORME RÉDUIT VOS COÛTS DE DÉVELOPPEMENT ?, Marek Kalnik.
• Should you build your web app with Flutter Web in 2021?, Szymon Mazanik.
• React Native Web vs. Flutter web, Wern Ancheta.
• Dart vs JavaScript: detailed comparison.
• Flutter vs Native vs React-Native: Examining Performance, Ihor Demedyuk & Nazar Tsybulskyi.
• Application State Management with React, Kent C. Dodds.
• Flutter vs React Native: Part Three, Andrei Calazans.
• When Should I Write an Architecture Decision Record, Josef Blake.
• Flutter engage 2021, Q&A.
• The boring development show.
• A Closer Look at Client-Side & Server-Side Rendering, Fiona Gurtiza.