React Native vs Flutter: Which is Better?
YouTube blog Fireship reviewed React Native and Flutter to find out which framework is the best in mobile development.
Here's what the video talks about:
- There are two main tools for creating cross-platform mobile applications: Flutter and React Native.
- Flutter and React Native allow you to develop applications for iOS, Android and web from the same code base, but they differ greatly in the way they work and the experience of the developer.
- The author compared both tools by creating the same chat application using Firebase as the backend.
- React Native uses JavaScript or TypeScript, while Flutter uses the Dart language, which is optimized to compile across platforms.
- Flutter comes with an extensive library of widgets and plugins, while React Native provides core components and relies on third-party libraries.
- React Native uses native platform components and a JavaScript bridge to interact with them, while Flutter uses its own engine to render widgets.
- React Native development can include more third-party dependencies and solutions, while Flutter offers a more unified and integrated set of tools.
- Flutter development tools such as hot reloading and strong typing ensure seamless and reliable development.
- Flutter generally offers better performance than React Native by compiling directly into native code without the need for a JavaScript bridge.
- For most applications, the performance differences between Flutter and React Native will not be noticeable to the end user.
Below is a transcribed translation of the video in Russian.
If you're building a cross-platform mobile app today, there are two major players vying for your attention. In the red corner we have Flutter, and in the blue corner we have React Native.
These tools can achieve the same basic goal: creating applications for multiple platforms such as iOS, Android and web from a single source code.
But there is a huge difference between them, both in how they work and in the developer's experience. No matter what you choose, the other automatically becomes your arch-enemy because you choose only the absolute best.
To find out which one is better, I built the exact same chat app with both React Native and Flutter using Firebase as the backend. In today's video, we'll compare features, tools, developer experience, performance, and of course, code in detail.
By the end of the video, you will know exactly which one suits your ideology better. But this is not a line-by-line coding lesson. If you want to learn how to create these apps from scratch, I've created two separate professional tutorials on Fireship that will teach you how to create them step by step.
Programming languages for React Native and Flutter
Let's start with a comparison of programming languages between these two frameworks. In React Native, we write applications in JavaScript, with React being the required UI library, so it's almost like an extension of the JavaScript language. TypeScript is also supported if you want to add a type system on top of JavaScript. JavaScript was never really designed for building mobile apps, so Flutter was implemented using a different language called Dart, which is optimized to compile across multiple platforms with both run-time and pre-compilation. This results in various performance benefits, but it is a language that not many people outside of Flutter know. It has a syntax that is somewhat reminiscent of TypeScript, making it easy for developers accustomed to curly braces to get started. But this is the main question you need to ask yourself.
Do I want to learn a completely new language, or do I want to stick to what I already know?
Ecosystem React Native and Flutter
Now let's look at the ecosystem behind these frameworks. Both of these are two of the most actively developed GitHub repositories in the world.
React Native by F******k is criticized for being a malicious tech corporation, while Flutter by Google is also criticized for being a malicious technology corporation. Creating high-quality cross-platform mobile apps is an extremely difficult technical task, and that's why you need to bring in a malicious tech corporation to get it right.
Development philosophy on React Native and Flutter
But you will notice a huge difference in the development philosophy. React Native, like React for web applications, is designed for minimalism. It provides some basic components, but leaves everything else to the open source community. And this means that a complete React Native project usually requires many third-party dependencies, depending on the functionality required. Flutter, on the other hand, comes with a huge library of widgets out of the box. And the Flutter team supports many of the plugins you'd typically need to access a device's camera, for example.
Dart also has a package manager called Pub, and there is also a huge ecosystem of open source packages for Flutter. Ultimately, they both have huge communities to do just about anything you can imagine.
Architecture React Native and Flutter
Now let's look at their basic architectures. Firstly, how does React Native work? Under the hood, it runs two separate JavaScript threads. One is the main thread to run your application on any native platform and the other is the thread to execute the business logic of your application.
These threads are isolated from each other, but sometimes they need to communicate, so there is a bridge between them through which they can pass serialized messages back and forth. The good thing here is that this allows the JavaScript application to interact with the native platform. This way, when React Native renders a component, it is truly a native component on the corresponding platform. This isn't just a React website packaged as a mobile app, it's truly rendering native components. And this means that your user interface will look exactly the same as those native components are intended, even when things change in the future. Now how does Flutter work? Instead of using native UI components, Flutter has its own high-performance rendering engine built in C++ and Skia that renders its own pixels on the screen with native code compiled, allowing it to render pixel-perfect versions of iOS and Android widgets, as well as allowing drawing your own pixels on the screen. Like a game engine, for example, Unity. It allows you to draw smooth graphics without the need for a bridge, although it does have a system called platform channels that allows you to communicate with the native system when you need native features or if you want to integrate native code. At the end of the day, however, architecture doesn't matter much. It's important that you create a good user experience and have fun doing it.
Development experience in React Native and Flutter
So now let's compare the developer experience, starting with the initial setup. To get started with React Native, you can create a new app by running npx react-native-init from the command line, and optionally pass in a template with something like native base to get a nice-looking interface out of the box. Here too, you can use Expo instead of the standard React Native CLI to get a more complete starting point. When you open the application, you will notice quite a few files here in the root directory.
These are basically configuration files like Metro and Watchmen for hot reloading. Buck is your build tool and Babel is for transpiling your JavaScript. It even comes with flow by default, so it looks a lot like F******k. The application's source code is contained in a single app.js file, if we go and open this file you will notice a bunch of React code. This may sound familiar if you're a web developer, and the only real difference is that we're importing custom components from React Native and using them in JSX instead of typical HTML elements. This is our starting point for React Native. Now let's look at Flutter. After installing the Flutter SDK, run flutter create from the command line. You'll notice that it's significantly faster because it doesn't have to go through NPM to download a bunch of packages.
Open your project in VS Code and make sure you have the Flutter extension installed. It actually automatically manages any additional packages you install in the background. The project structure is a little simplified here. Your main configuration file is the pubspec.yaml file, which is equivalent to package JSON in a React Native project. This is where you register and install third party packages. The application source code is contained in the main.dart file. Now, if you're a web developer who's never worked with TypeScript, this code might seem a little crazy, with keywords like extends, super, and override.
But if you have experience with TypeScript, Java, or C Sharp, then you'll probably feel right at home with this code.
Development tools for React Native and Flutter
Now that we have the project set up, I want to talk about the tools that are really important when creating cross-platform mobile apps because without good tools, your life will be miserable. Let's start by running the React Native application. I have an Android emulator running, then I need to run this ADB command to connect to it. I then run npm start to launch Metro to track changes to my code in the background. Then, in a separate terminal, type npm run android to build the Android application. This will install the app on the emulator and monitor code changes in the background to automatically update the app.
We can also enter R into the watchman terminal to hot reload the application. This is extremely useful because it saves the state of the application while preserving your code changes if you are working on a design. This is essential, but when it comes to tools with React Native, it's truly a “create your own adventure” story. It's just a JavaScript…project, so you can add TypeScript, or you can use the Ignite CLI to automatically generate the wireframe, or use Expo to quickly launch the app on your device.
It's nice to have many options, but it can also lead to decision fatigue and over-reliance on third-party providers. Now if we switch to the Flutter app, you'll notice a button here in VS Code that allows us to grab the emulator configured on the local system. We can then open a terminal and type flutter run, and we can also hot reload because Dart supports runtime compilation by also typing R into the terminal. Now, because Dart has a sound type system, it is able to provide really good tools when writing your code. Notice how when you hover over any class it provides full documentation for it. But more importantly, Dart makes it really hard to write code that causes runtime errors.
If I try to pass an argument with the wrong data type, it will tell me right away instead of waiting until it becomes a runtime error.
Code on React Native and Flutter
And this is especially important for mobile apps because you live and die by the reviews in the app stores. Now you can also add TypeScript to React Native to get similar results, but Dart does other things like null safety to make your code even more robust. Another interesting thing about the code is that both frameworks create a tree of components or widgets. In React Native it looks like HTML or JSX where you have a tag like view and then you add another component inside that and then maybe even more components inside that.
Components can have a state that changes throughout the application's lifecycle, and React Native will automatically redraw the UI when the state changes. Flutter works in exactly the same way and was actually very inspired by React, but it does it in a completely different way. Instead of functions, you have classes that have a build method that returns a tree of widgets. Each widget is simply an instance of a class and can have various properties that take other widgets as arguments. So it does the same thing as React, but it's just a different approach to creating declarative user interfaces.
With manual coding, rebuilding becomes more difficult in my opinion. You can't just copy and paste a component like you would in React. However, Flutter again has very good tools that allow you to wrap and move widgets just by clicking a button in VS Code. After building a chat app with both frameworks, one of the drawbacks I found with Flutter is that I often ended up with deeply nested widget trees, which is difficult… you could always separate out this logic into your own custom widgets, but I I just don't find the process as intuitive as in React, where you just create a new function for each UI. Now the problem with React is that there is often no component that does exactly what you want to do.
This means you need to start with a base component and then make it do what you want, or install a third party package. Also, many React libraries are not compatible with React Native. For example, if you want amazing animations with frame or motion, it won't work in React Native.
Performance React Native and Flutter
Now the last thing I want to look at is performance. You might be wondering, is Flutter faster than React Native?
And the answer is most likely yes. The goal is usually to render 60 frames per second. And because Flutter apps compile directly to native code and don't require a JavaScript bridge, they tend to perform better based on most tests I could find online.
And as you can see, Flutter is much closer to native performance. However, you need to ask yourself, does performance really matter?
For most applications, the performance differences will not be noticeable to the end user. But let's say in React Native you may encounter performance bottlenecks earlier. And if you really care about performance, your best option would be to simply go with React Native.
