A side-by-side comparison of React Native and Flutter. I built a mobile chat app with both frameworks to understand differences in developer experience, tooling, code, and performance. 

🔥 Use discount code O2LdtRD6 for 30% off fireship.io/pro 

#flutter #react #versus

🔗 Resources

Performance Comparison https://medium.com/swlh/flutter-vs-native-vs-react-native-examining-performance-31338f081980

React Native Demo https://fireship.io/lessons/react-native-firebase-chat-demo/
Flutter Chat Demo https://fireship.io/lessons/flutter-firebase-chat-demo/

📚 Chapters

00:00 React Native vs Flutter
00:57 Language
01:41 Ecosystem
02:04 Philosophy
02:42 Architecture
04:00 Developer Experience
05:45 Tooling
07:39 Code
09:13 Performance


🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Comparing Flutter to React Native
- Mobile app development
- Native iOS and Android Development
- Cross-platform app performance
2024-02-04T05:43:58.804Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9823f50b-541a-4057-973b-5550529740bd
e440e5f57e3927d47f9c072a28ac24ed8c722c742bbe951fd2858cd527ffa270
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
If you're building a cross platform mobile app today, there are 2 heavyweights competing for your mind share.
In the red corner, we have Flutter from Google, and in the blue corner, we have React Native from Facebook.
These tools can achieve the same fundamental goal, build apps for multiple platforms like iOS, Android, and the web from a single code base.
But there's a world of difference in both how they work and the developer variant.
No matter which one you choose, the other one automatically becomes your arch nemesis, because you don't choose anything but the absolute best technology out there.
To figure out which one is best, I built exact same chat app with both React Native and Flutter using Firebase as the back end.
In today's video, we'll dive into a detailed side by side comparison of features, tooling, developer experience, performance, and, of course, the code.
By the end of the video, you'll know exactly which one fits best into your ideology, but This isn't a line by line coding tutorial.
If you wanna learn how to build these apps from scratch, I created 2 separate pro lessons on Fireshift that will teach you how to build them step by step.
Let's start by comparing the programming languages between these two frameworks.
In React Native, we code apps in JavaScript with React being a required UI library, so it's almost like an extension of the JavaScript language.
And it also supports TypeScript if you wanna add a type system on top of JavaScript.
JavaScript was never really designed to build mobile apps, So Flutter was implemented with a different language called Dart, which is a language optimized for compiling to multiple platforms with ahead of time and just in time compilation.
That results in various performance advantages, but it's a language that not many people know outside of Flutter.
It has a syntax that somewhat resembles TypeScript, so curly brace developers generally have an easy time getting with it, but that's a major question to ask yourself.
Do I wanna learn a whole new language or do I want to stick with what I already know?
Now, let's look at the ecosystem behind frameworks.
They're both 2 of the most actively worked on GitHub repos in the world.
React Native comes from Facebook, which has been criticized as being an evil tech corporation, while Flutter comes Google, which has been criticized for being an evil tech corporation.
Building high quality cross platform mobile apps is an extremely difficult technical challenge, and that's why you need to bring in an evil tech corporation to get the job done right.
But, you'll notice a huge difference in development philosophy.
React Native, just like React for the web, is designed to be minimal.
It provides some base components, but leaves everything else to the open source community, and that means a complete react native project generally really requires a lot of third party dependencies, depending on the features that you need.
Flutter, on the other hand, comes with a huge widget library out of the box.
And the Flutter team maintains many plugins that you'll commonly need like ones to access the native camera on a device.
Dart also has a package manager called Pub, and there's a huge ecosystem of open source packages for Flutter as well.
The bottom line is they both have huge communities to get pretty much anything you can imagine done.
Now, let's look at their underlying architectures.
First off, how does React Native work?
Under the hood, it runs 2 separate JavaScript threads.
1 is the main thread to run your app on whatever native platform and the other is a a thread to run the business logic of your application.
These threads are isolated from each other, but sometimes they need to interact, so there's a bridge in the middle where they can pass serialized messages back and forth.
The cool thing about this system is that it allows a JavaScript app to communicate with the native platform.
So when React Native renders a component, it's a truly native component on the responding platform.
It's not just like a React website bundled as a mobile app, it's truly rendering native components.
And that means your UI will look exactly like 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 with c plus plus and skia that renders its own custom pixels to the screen with compiled native code that allows it to render pixel perfect versions of iOS and Android Widgets, while also making it possible to paint your own custom pixels to the screen, kind of like a gaming engine like Unity.
This allows it to paint smooth graphics without the need for Ridge, 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 though, Architecture doesn't matter a whole lot.
What matters is that you create a good user experience and have fun doing it.
So now, let's compare the developer experience Starting with the initial setup.
To get started with React Native, you can generate a new app by running npx react native init from the command line.
And you can optionally pass in a template here with something like native base to give you a nice looking UI out of the gate.
And you might also use Expo here instead of the default react native CLI to give you a more complete starting point.
When you open the app, you'll notice quite a few files here in the root directory.
These are mostly config files like metro and watchmen for hot reloading, Buck is your build tool, and Babel to transpile your JavaScript.
It even ships with Flow by default, so it feels very Facebook y.
The app source code is contained in the single app dotjs file.
If we go ahead and open that file, you'll notice a bunch of React code.
This might look familiar if you're a web developer and the only real difference is that we're importing special components from React Native and we use those in the JSX instead of the typical HTML element.
That's our starting point for React Native.
Now let's take a look at Flutter.
After installing the Flutter SDK, run flutter create from the command line.
You'll notice that it's considerably faster because it doesn't have to reach out to npm to download a bunch of packages.
Go ahead and open the project in Versus Code and make sure that you have the Flutter extension installed.
It will actually manage any additional packages you install automatically in the background.
The project structure here is a little more Drive.
Your main config file is this pubspec dot yaml file, which is equivalent to the package JSON in the React Native project.
This is where you register and install 3rd party packages.
The app source code is contained in the main dot dart file.
Now, if you're a web developer who's never touched TypeScript, this code might Look kind of crazy with keywords like extends, super, and override.
But if you have a background in TypeScript, Java, or c sharp, then you'll likely feel right at home with this code.
Now that we have a project set up.
I want to talk about tooling, which is really important when building cross platform mobile apps because without good tooling, your life will be miserable.
Let's start by serving the React Native app locally.
Here, I have an Android emulator running, then I need to run this adb command to connect to it.
From there, I run npm start to run metro to watch my code for changes in the background.
Then in a separate terminal, enter npm run Android to build the Android app.
This will install the app on the emulator and listen to code changes in the background to automatically update the application.
We can also type an r into the watchmen terminal to hot reload the app.
That's extremely useful because it preserves the state of the application while still reflecting your code changes if you're iterating on the design.
So that's essential, but when it comes 2 tooling with React Native.
It's really a create your own adventure story.
It's just a JavaScript project, so you can throw in TypeScript or you might wanna use the night CLI to automatically generate boilerplate for you or use expo to quickly launch the app on your own device.
It's nice to have a lot of options, But that can also lead to decision fatigue and an over reliance on third parties.
Now, if we switch over to the Flutter app, you'll notice a button down here in b s code that allows us to grab an emulator that's configured on the local system.
We can then open the terminal and enter Flutter run, and we can also hot reload because Dart supports just in time compilation by also typing an r into the terminal.
Now, because Dart has a sound type system, it's able to provide really nice tooling as you write your code.
Notice how when I hover over any class.
It provides the full documentation for it.
But more importantly, Dart makes it really hard to write code that results in runtime errors.
If I try to pass an argument that has the wrong data type.
It'll tell me this code sucks right away instead of waiting for it to pop up as an error at runtime.
And that's especially important for mobile apps because you live and die by 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 reliable.
Now, the other interesting thing in 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 of that and then maybe more components inside of that.
Components might have state that changes throughout the life cycle of the app, and React Native will automatically rerender the UI whenever the state changes.
Flutter works in the exact same way and was actually very much inspired by React, but it goes about it in a much different way.
Instead of functions, you have classes that have a build method, ed, which returns a tree of widgets.
Each widget is just a class instance and might have a variety of different properties that take other widgets as arguments.
So it does the same basic thing as React, but it's just a different approach to building declarative UIs.
When coding by hand, it makes refactoring more difficult in my opinion.
You can't just copy and paste a component like you would React.
However, Flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in Versus Code.
Now, after building a chat app with both frameworks, one drawback I found with Flutter is that I would often end up with these deeply nested widget trees that are hard to follow.
You can always extract this logic into your own custom widgets, but I just don't find the process as intuitive as React where you simply create a new function for each UI component.
Now, the problem with React is there often isn't a component to do exactly what you wanna do.
That means you need to start with a base component and then make it do what you wanna do or install a third party package.
On top of that, a lot of React libraries aren't compatible with React Native.
Like, if you want awesome animations with Framer Motion, That's not going to fly in React Native.
Now, the final thing I wanna look at is performance.
You might be wondering, is Flutter faster than React Native?
And the answer is most likely yes.
The goal is generally to render at 60 frames per second.
And because Flutter apps are compiled directly to machine code and don't require a JavaScript Bridge.
They tend to perform better based on most benchmarks I could find on the Internet.
There's a good article that I'll link to in the description that breaks down of different benchmarks.
And as you can see, Flutter gets much closer to native performance.
However, you have to ask yourself, does performance really matter?
For the majority of apps out there, performance differences will be indistinguishable to the end user.
But I suppose in React Native, you might run into performance bottlenecks sooner.
And if you really care about performance.
Your best option is to just go true native.
I'm gonna go ahead and wrap things up there, but if you want to build these chat apps from scratch, Check out Fireship Pro for a couple of extra bonus videos there.
And here's a special discount code for those of you who watched the entire video.
Thanks for watching, and I will see you in the next one.

Speaker 0: If you're building a cross platform mobile app today, there are 2 heavyweights competing for your mind share. In the red corner, we have Flutter from Google, and in the blue corner, we have React Native from Facebook. These tools can achieve the same fundamental goal, build apps for multiple platforms like iOS, Android, and the web from a single code base. But there's a world of difference in both how they work and the developer variant. No matter which one you choose, the other one automatically becomes your arch nemesis, because you don't choose anything but the absolute best technology out there.

To figure out which one is best, I built exact same chat app with both React Native and Flutter using Firebase as the back end. In today's video, we'll dive into a detailed side by side comparison of features, tooling, developer experience, performance, and, of course, the code. By the end of the video, you'll know exactly which one fits best into your ideology, but This isn't a line by line coding tutorial. If you wanna learn how to build these apps from scratch, I created 2 separate pro lessons on Fireshift that will teach you how to build them step by step. Let's start by comparing the programming languages between these two frameworks.

In React Native, we code apps in JavaScript with React being a required UI library, so it's almost like an extension of the JavaScript language. And it also supports TypeScript if you wanna add a type system on top of JavaScript. JavaScript was never really designed to build mobile apps, So Flutter was implemented with a different language called Dart, which is a language optimized for compiling to multiple platforms with ahead of time and just in time compilation. That results in various performance advantages, but it's a language that not many people know outside of Flutter. It has a syntax that somewhat resembles TypeScript, so curly brace developers generally have an easy time getting with it, but that's a major question to ask yourself.

Do I wanna learn a whole new language or do I want to stick with what I already know? Now, let's look at the ecosystem behind frameworks. They're both 2 of the most actively worked on GitHub repos in the world. React Native comes from Facebook, which has been criticized as being an evil tech corporation, while Flutter comes Google, which has been criticized for being an evil tech corporation. Building high quality cross platform mobile apps is an extremely difficult technical challenge, and that's why you need to bring in an evil tech corporation to get the job done right.

But, you'll notice a huge difference in development philosophy. React Native, just like React for the web, is designed to be minimal. It provides some base components, but leaves everything else to the open source community, and that means a complete react native project generally really requires a lot of third party dependencies, depending on the features that you need. Flutter, on the other hand, comes with a huge widget library out of the box. And the Flutter team maintains many plugins that you'll commonly need like ones to access the native camera on a device.

Dart also has a package manager called Pub, and there's a huge ecosystem of open source packages for Flutter as well. The bottom line is they both have huge communities to get pretty much anything you can imagine done. Now, let's look at their underlying architectures. First off, how does React Native work? Under the hood, it runs 2 separate JavaScript threads.

1 is the main thread to run your app on whatever native platform and the other is a a thread to run the business logic of your application. These threads are isolated from each other, but sometimes they need to interact, so there's a bridge in the middle where they can pass serialized messages back and forth. The cool thing about this system is that it allows a JavaScript app to communicate with the native platform. So when React Native renders a component, it's a truly native component on the responding platform. It's not just like a React website bundled as a mobile app, it's truly rendering native components.

And that means your UI will look exactly like 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 with c plus plus and skia that renders its own custom pixels to the screen with compiled native code that allows it to render pixel perfect versions of iOS and Android Widgets, while also making it possible to paint your own custom pixels to the screen, kind of like a gaming engine like Unity. This allows it to paint smooth graphics without the need for Ridge, 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 though, Architecture doesn't matter a whole lot.

What matters is that you create a good user experience and have fun doing it. So now, let's compare the developer experience Starting with the initial setup. To get started with React Native, you can generate a new app by running npx react native init from the command line. And you can optionally pass in a template here with something like native base to give you a nice looking UI out of the gate. And you might also use Expo here instead of the default react native CLI to give you a more complete starting point.

When you open the app, you'll notice quite a few files here in the root directory. These are mostly config files like metro and watchmen for hot reloading, Buck is your build tool, and Babel to transpile your JavaScript. It even ships with Flow by default, so it feels very Facebook y. The app source code is contained in the single app dotjs file. If we go ahead and open that file, you'll notice a bunch of React code.

This might look familiar if you're a web developer and the only real difference is that we're importing special components from React Native and we use those in the JSX instead of the typical HTML element. That's our starting point for React Native. Now let's take a look at Flutter. After installing the Flutter SDK, run flutter create from the command line. You'll notice that it's considerably faster because it doesn't have to reach out to npm to download a bunch of packages.

Go ahead and open the project in Versus Code and make sure that you have the Flutter extension installed. It will actually manage any additional packages you install automatically in the background. The project structure here is a little more Drive. Your main config file is this pubspec dot yaml file, which is equivalent to the package JSON in the React Native project. This is where you register and install 3rd party packages.

The app source code is contained in the main dot dart file. Now, if you're a web developer who's never touched TypeScript, this code might Look kind of crazy with keywords like extends, super, and override. But if you have a background in TypeScript, Java, or c sharp, then you'll likely feel right at home with this code. Now that we have a project set up. I want to talk about tooling, which is really important when building cross platform mobile apps because without good tooling, your life will be miserable.

Let's start by serving the React Native app locally. Here, I have an Android emulator running, then I need to run this adb command to connect to it. From there, I run npm start to run metro to watch my code for changes in the background. Then in a separate terminal, enter npm run Android to build the Android app. This will install the app on the emulator and listen to code changes in the background to automatically update the application.

We can also type an r into the watchmen terminal to hot reload the app. That's extremely useful because it preserves the state of the application while still reflecting your code changes if you're iterating on the design. So that's essential, but when it comes 2 tooling with React Native. It's really a create your own adventure story. It's just a JavaScript project, so you can throw in TypeScript or you might wanna use the night CLI to automatically generate boilerplate for you or use expo to quickly launch the app on your own device.

It's nice to have a lot of options, But that can also lead to decision fatigue and an over reliance on third parties. Now, if we switch over to the Flutter app, you'll notice a button down here in b s code that allows us to grab an emulator that's configured on the local system. We can then open the terminal and enter Flutter run, and we can also hot reload because Dart supports just in time compilation by also typing an r into the terminal. Now, because Dart has a sound type system, it's able to provide really nice tooling as you write your code. Notice how when I hover over any class.

It provides the full documentation for it. But more importantly, Dart makes it really hard to write code that results in runtime errors. If I try to pass an argument that has the wrong data type. It'll tell me this code sucks right away instead of waiting for it to pop up as an error at runtime. And that's especially important for mobile apps because you live and die by 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 reliable. Now, the other interesting thing in 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 of that and then maybe more components inside of that. Components might have state that changes throughout the life cycle of the app, and React Native will automatically rerender the UI whenever the state changes. Flutter works in the exact same way and was actually very much inspired by React, but it goes about it in a much different way.

Instead of functions, you have classes that have a build method, ed, which returns a tree of widgets. Each widget is just a class instance and might have a variety of different properties that take other widgets as arguments. So it does the same basic thing as React, but it's just a different approach to building declarative UIs. When coding by hand, it makes refactoring more difficult in my opinion. You can't just copy and paste a component like you would React.

However, Flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in Versus Code. Now, after building a chat app with both frameworks, one drawback I found with Flutter is that I would often end up with these deeply nested widget trees that are hard to follow. You can always extract this logic into your own custom widgets, but I just don't find the process as intuitive as React where you simply create a new function for each UI component. Now, the problem with React is there often isn't a component to do exactly what you wanna do. That means you need to start with a base component and then make it do what you wanna do or install a third party package.

On top of that, a lot of React libraries aren't compatible with React Native. Like, if you want awesome animations with Framer Motion, That's not going to fly in React Native. Now, the final thing I wanna look at is performance. You might be wondering, is Flutter faster than React Native? And the answer is most likely yes.

The goal is generally to render at 60 frames per second. And because Flutter apps are compiled directly to machine code and don't require a JavaScript Bridge. They tend to perform better based on most benchmarks I could find on the Internet. There's a good article that I'll link to in the description that breaks down of different benchmarks. And as you can see, Flutter gets much closer to native performance.

However, you have to ask yourself, does performance really matter? For the majority of apps out there, performance differences will be indistinguishable to the end user. But I suppose in React Native, you might run into performance bottlenecks sooner. And if you really care about performance. Your best option is to just go true native.

I'm gonna go ahead and wrap things up there, but if you want to build these chat apps from scratch, Check out Fireship Pro for a couple of extra bonus videos there. And here's a special discount code for those of you who watched the entire video. Thanks for watching, and I will see you in the next one.
If you're building a cross platform mobile app today, there are 2 heavyweights competing for your mind share. In the red corner, we have Flutter from Google, and in the blue corner, we have React Native from Facebook. These tools can achieve the same fundamental goal, build apps for multiple platforms like iOS, Android, and the web from a single code base. But there's a world of difference in both how they work and the developer variant. No matter which one you choose, the other one automatically becomes your arch nemesis, because you don't choose anything but the absolute best technology out there.
software development
software
technology
phones
To figure out which one is best, I built exact same chat app with both React Native and Flutter using Firebase as the back end.
In today's video, we'll dive into a detailed side by side comparison of features, tooling, developer experience, performance, and, of course, the code. By the end of the video, you'll know exactly which one fits best into your ideology, but This isn't a line by line coding tutorial. If you wanna learn how to build these apps from scratch, I created 2 separate pro lessons on Fireshift that will teach you how to build them step by step.
deep learning
software development
software
machine learning
Let's start by comparing the programming languages between these two frameworks. In React Native, we code apps in JavaScript with React being a required UI library, so it's almost like an extension of the JavaScript language. And it also supports TypeScript if you wanna add a type system on top of JavaScript. JavaScript was never really designed to build mobile apps, So Flutter was implemented with a different language called Dart, which is a language optimized for compiling to multiple platforms with ahead of time and just in time compilation.
That results in various performance advantages, but it's a language that not many people know outside of Flutter. It has a syntax that somewhat resembles TypeScript, so curly brace developers generally have an easy time getting with it, but that's a major question to ask yourself. Do I wanna learn a whole new language or do I want to stick with what I already know?
languages
Now, let's look at the ecosystem behind frameworks. They're both 2 of the most actively worked on GitHub repos in the world. React Native comes from Facebook, which has been criticized as being an evil tech corporation, while Flutter comes Google, which has been criticized for being an evil tech corporation.
Building high quality cross platform mobile apps is an extremely difficult technical challenge, and that's why you need to bring in an evil tech corporation to get the job done right. But, you'll notice a huge difference in development philosophy. React Native, just like React for the web, is designed to be minimal.
technology
software development
telecommunications
architecture
It provides some base components, but leaves everything else to the open source community, and that means a complete react native project generally really requires a lot of third party dependencies, depending on the features that you need. Flutter, on the other hand, comes with a huge widget library out of the box. And the Flutter team maintains many plugins that you'll commonly need like ones to access the native camera on a device. Dart also has a package manager called Pub, and there's a huge ecosystem of open source packages for Flutter as well. The bottom line is they both have huge communities to get pretty much anything you can imagine done.
Now, let's look at their underlying architectures. First off, how does React Native work? Under the hood, it runs 2 separate JavaScript threads. 1 is the main thread to run your app on whatever native platform and the other is a a thread to run the business logic of your application.
architecture
These threads are isolated from each other, but sometimes they need to interact, so there's a bridge in the middle where they can pass serialized messages back and forth. The cool thing about this system is that it allows a JavaScript app to communicate with the native platform. So when React Native renders a component, it's a truly native component on the responding platform.
It's not just like a React website bundled as a mobile app, it's truly rendering native components. And that means your UI will look exactly like 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 with c plus plus and skia that renders its own custom pixels to the screen with compiled native code that allows it to render pixel perfect versions of iOS and Android Widgets, while also making it possible to paint your own custom pixels to the screen, kind of like a gaming engine like Unity.
animation
This allows it to paint smooth graphics without the need for Ridge, 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 though, Architecture doesn't matter a whole lot. What matters is that you create a good user experience and have fun doing it. So now, let's compare the developer experience Starting with the initial setup. To get started with React Native, you can generate a new app by running npx react native init from the command line.
architecture
And you can optionally pass in a template here with something like native base to give you a nice looking UI out of the gate. And you might also use Expo here instead of the default react native CLI to give you a more complete starting point. When you open the app, you'll notice quite a few files here in the root directory.
These are mostly config files like metro and watchmen for hot reloading, Buck is your build tool, and Babel to transpile your JavaScript. It even ships with Flow by default, so it feels very Facebook y. The app source code is contained in the single app dotjs file. If we go ahead and open that file, you'll notice a bunch of React code.
software
This might look familiar if you're a web developer and the only real difference is that we're importing special components from React Native and we use those in the JSX instead of the typical HTML element. That's our starting point for React Native. Now let's take a look at Flutter. After installing the Flutter SDK, run flutter create from the command line. You'll notice that it's considerably faster because it doesn't have to reach out to npm to download a bunch of packages. Go ahead and open the project in Versus Code and make sure that you have the Flutter extension installed. It will actually manage any additional packages you install automatically in the background. The project structure here is a little more Drive. Your main config file is this pubspec dot yaml file, which is equivalent to the package JSON in the React Native project.
This is where you register and install 3rd party packages. The app source code is contained in the main dot dart file. Now, if you're a web developer who's never touched TypeScript, this code might Look kind of crazy with keywords like extends, super, and override. But if you have a background in TypeScript, Java, or c sharp, then you'll likely feel right at home with this code. Now that we have a project set up. I want to talk about tooling, which is really important when building cross platform mobile apps because without good tooling, your life will be miserable. Let's start by serving the React Native app locally. Here, I have an Android emulator running, then I need to run this adb command to connect to it.
software
software development
infrastructure
architecture
From there, I run npm start to run metro to watch my code for changes in the background. Then in a separate terminal, enter npm run Android to build the Android app.
This will install the app on the emulator and listen to code changes in the background to automatically update the application. We can also type an r into the watchmen terminal to hot reload the app. That's extremely useful because it preserves the state of the application while still reflecting your code changes if you're iterating on the design. So that's essential, but when it comes 2 tooling with React Native. It's really a create your own adventure story. It's just a JavaScript project, so you can throw in TypeScript or you might wanna use the night CLI to automatically generate boilerplate for you or use expo to quickly launch the app on your own device. It's nice to have a lot of options, But that can also lead to decision fatigue and an over reliance on third parties.
software
software development
programming
graphic design
animation
Now, if we switch over to the Flutter app, you'll notice a button down here in b s code that allows us to grab an emulator that's configured on the local system. We can then open the terminal and enter Flutter run, and we can also hot reload because Dart supports just in time compilation by also typing an r into the terminal. Now, because Dart has a sound type system, it's able to provide really nice tooling as you write your code. Notice how when I hover over any class. It provides the full documentation for it. But more importantly, Dart makes it really hard to write code that results in runtime errors. If I try to pass an argument that has the wrong data type. It'll tell me this code sucks right away instead of waiting for it to pop up as an error at runtime. And that's especially important for mobile apps because you live and die by 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 reliable. Now, the other interesting thing in 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 of that and then maybe more components inside of that.
Components might have state that changes throughout the life cycle of the app, and React Native will automatically rerender the UI whenever the state changes. Flutter works in the exact same way and was actually very much inspired by React, but it goes about it in a much different way.
animation
Instead of functions, you have classes that have a build method, ed, which returns a tree of widgets. Each widget is just a class instance and might have a variety of different properties that take other widgets as arguments.
So it does the same basic thing as React, but it's just a different approach to building declarative UIs. When coding by hand, it makes refactoring more difficult in my opinion. You can't just copy and paste a component like you would React. However, Flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in Versus Code. Now, after building a chat app with both frameworks, one drawback I found with Flutter is that I would often end up with these deeply nested widget trees that are hard to follow. You can always extract this logic into your own custom widgets, but I just don't find the process as intuitive as React where you simply create a new function for each UI component.
animation
programming
Now, the problem with React is there often isn't a component to do exactly what you wanna do. That means you need to start with a base component and then make it do what you wanna do or install a third party package.
On top of that, a lot of React libraries aren't compatible with React Native. Like, if you want awesome animations with Framer Motion, That's not going to fly in React Native. Now, the final thing I wanna look at is performance. You might be wondering, is Flutter faster than React Native?
animation
And the answer is most likely yes.
The goal is generally to render at 60 frames per second. And because Flutter apps are compiled directly to machine code and don't require a JavaScript Bridge. They tend to perform better based on most benchmarks I could find on the Internet. There's a good article that I'll link to in the description that breaks down of different benchmarks.
animation
And as you can see, Flutter gets much closer to native performance. However, you have to ask yourself, does performance really matter? For the majority of apps out there, performance differences will be indistinguishable to the end user. But I suppose in React Native, you might run into performance bottlenecks sooner. And if you really care about performance. Your best option is to just go true native.
I'm gonna go ahead and wrap things up there, but if you want to build these chat apps from scratch, Check out Fireship Pro for a couple of extra bonus videos there. And here's a special discount code for those of you who watched the entire video. Thanks for watching, and I will see you in the next one.
video gaming
streaming
games
youtube
If you're building a cross platform mobile app today, there are 2 heavyweights competing for your mind share. In the red corner, we have Flutter from Google, and in the blue corner, we have React Native from Facebook. These tools can achieve the same fundamental goal, build apps for multiple platforms like iOS, Android, and the web from a single code base. But there's a world of difference in both how they work and the developer variant. No matter which one you choose, the other one automatically becomes your arch nemesis, because you don't choose anything but the absolute best technology out there. To figure out which one is best, I built exact same chat app with both React Native and Flutter using Firebase as the back end. In today's video, we'll dive into a detailed side by side comparison of features, tooling, developer experience, performance, and, of course, the code. By the end of the video, you'll know exactly which one fits best into your ideology, but This isn't a line by line coding tutorial. If you wanna learn how to build these apps from scratch, I created 2 separate pro lessons on Fireshift that will teach you how to build them step by step. Let's start by comparing the programming languages between these two frameworks. In React Native, we code apps in JavaScript with React being a required UI library, so it's almost like an extension of the JavaScript language. And it also supports TypeScript if you wanna add a type system on top of JavaScript. JavaScript was never really designed to build mobile apps, So Flutter was implemented with a different language called Dart, which is a language optimized for compiling to multiple platforms with ahead of time and just in time compilation. That results in various performance advantages, but it's a language that not many people know outside of Flutter. It has a syntax that somewhat resembles TypeScript, so curly brace developers generally have an easy time getting with it, but that's a major question to ask yourself. Do I wanna learn a whole new language or do I want to stick with what I already know? Now, let's look at the ecosystem behind frameworks. They're both 2 of the most actively worked on GitHub repos in the world. React Native comes from Facebook, which has been criticized as being an evil tech corporation, while Flutter comes Google, which has been criticized for being an evil tech corporation. Building high quality cross platform mobile apps is an extremely difficult technical challenge, and that's why you need to bring in an evil tech corporation to get the job done right. But, you'll notice a huge difference in development philosophy. React Native, just like React for the web, is designed to be minimal. It provides some base components, but leaves everything else to the open source community, and that means a complete react native project generally really requires a lot of third party dependencies, depending on the features that you need. Flutter, on the other hand, comes with a huge widget library out of the box. And the Flutter team maintains many plugins that you'll commonly need like ones to access the native camera on a device. Dart also has a package manager called Pub, and there's a huge ecosystem of open source packages for Flutter as well. The bottom line is they both have huge communities to get pretty much anything you can imagine done. Now, let's look at their underlying architectures. First off, how does React Native work? Under the hood, it runs 2 separate JavaScript threads. 1 is the main thread to run your app on whatever native platform and the other is a a thread to run the business logic of your application. These threads are isolated from each other, but sometimes they need to interact, so there's a bridge in the middle where they can pass serialized messages back and forth. The cool thing about this system is that it allows a JavaScript app to communicate with the native platform. So when React Native renders a component, it's a truly native component on the responding platform. It's not just like a React website bundled as a mobile app, it's truly rendering native components. And that means your UI will look exactly like 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 with c plus plus and skia that renders its own custom pixels to the screen with compiled native code that allows it to render pixel perfect versions of iOS and Android Widgets, while also making it possible to paint your own custom pixels to the screen, kind of like a gaming engine like Unity. This allows it to paint smooth graphics without the need for Ridge, 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 though, Architecture doesn't matter a whole lot. What matters is that you create a good user experience and have fun doing it. So now, let's compare the developer experience Starting with the initial setup. To get started with React Native, you can generate a new app by running npx react native init from the command line. And you can optionally pass in a template here with something like native base to give you a nice looking UI out of the gate. And you might also use Expo here instead of the default react native CLI to give you a more complete starting point. When you open the app, you'll notice quite a few files here in the root directory. These are mostly config files like metro and watchmen for hot reloading, Buck is your build tool, and Babel to transpile your JavaScript. It even ships with Flow by default, so it feels very Facebook y. The app source code is contained in the single app dotjs file. If we go ahead and open that file, you'll notice a bunch of React code. This might look familiar if you're a web developer and the only real difference is that we're importing special components from React Native and we use those in the JSX instead of the typical HTML element. That's our starting point for React Native. Now let's take a look at Flutter. After installing the Flutter SDK, run flutter create from the command line. You'll notice that it's considerably faster because it doesn't have to reach out to npm to download a bunch of packages. Go ahead and open the project in Versus Code and make sure that you have the Flutter extension installed. It will actually manage any additional packages you install automatically in the background. The project structure here is a little more Drive. Your main config file is this pubspec dot yaml file, which is equivalent to the package JSON in the React Native project. This is where you register and install 3rd party packages. The app source code is contained in the main dot dart file. Now, if you're a web developer who's never touched TypeScript, this code might Look kind of crazy with keywords like extends, super, and override. But if you have a background in TypeScript, Java, or c sharp, then you'll likely feel right at home with this code. Now that we have a project set up. I want to talk about tooling, which is really important when building cross platform mobile apps because without good tooling, your life will be miserable. Let's start by serving the React Native app locally. Here, I have an Android emulator running, then I need to run this adb command to connect to it. From there, I run npm start to run metro to watch my code for changes in the background. Then in a separate terminal, enter npm run Android to build the Android app. This will install the app on the emulator and listen to code changes in the background to automatically update the application. We can also type an r into the watchmen terminal to hot reload the app. That's extremely useful because it preserves the state of the application while still reflecting your code changes if you're iterating on the design. So that's essential, but when it comes 2 tooling with React Native. It's really a create your own adventure story. It's just a JavaScript project, so you can throw in TypeScript or you might wanna use the night CLI to automatically generate boilerplate for you or use expo to quickly launch the app on your own device. It's nice to have a lot of options, But that can also lead to decision fatigue and an over reliance on third parties. Now, if we switch over to the Flutter app, you'll notice a button down here in b s code that allows us to grab an emulator that's configured on the local system. We can then open the terminal and enter Flutter run, and we can also hot reload because Dart supports just in time compilation by also typing an r into the terminal. Now, because Dart has a sound type system, it's able to provide really nice tooling as you write your code. Notice how when I hover over any class. It provides the full documentation for it. But more importantly, Dart makes it really hard to write code that results in runtime errors. If I try to pass an argument that has the wrong data type. It'll tell me this code sucks right away instead of waiting for it to pop up as an error at runtime. And that's especially important for mobile apps because you live and die by 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 reliable. Now, the other interesting thing in 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 of that and then maybe more components inside of that. Components might have state that changes throughout the life cycle of the app, and React Native will automatically rerender the UI whenever the state changes. Flutter works in the exact same way and was actually very much inspired by React, but it goes about it in a much different way. Instead of functions, you have classes that have a build method, ed, which returns a tree of widgets. Each widget is just a class instance and might have a variety of different properties that take other widgets as arguments. So it does the same basic thing as React, but it's just a different approach to building declarative UIs. When coding by hand, it makes refactoring more difficult in my opinion. You can't just copy and paste a component like you would React. However, Flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in Versus Code. Now, after building a chat app with both frameworks, one drawback I found with Flutter is that I would often end up with these deeply nested widget trees that are hard to follow. You can always extract this logic into your own custom widgets, but I just don't find the process as intuitive as React where you simply create a new function for each UI component. Now, the problem with React is there often isn't a component to do exactly what you wanna do. That means you need to start with a base component and then make it do what you wanna do or install a third party package. On top of that, a lot of React libraries aren't compatible with React Native. Like, if you want awesome animations with Framer Motion, That's not going to fly in React Native. Now, the final thing I wanna look at is performance. You might be wondering, is Flutter faster than React Native? And the answer is most likely yes. The goal is generally to render at 60 frames per second. And because Flutter apps are compiled directly to machine code and don't require a JavaScript Bridge. They tend to perform better based on most benchmarks I could find on the Internet. There's a good article that I'll link to in the description that breaks down of different benchmarks. And as you can see, Flutter gets much closer to native performance. However, you have to ask yourself, does performance really matter? For the majority of apps out there, performance differences will be indistinguishable to the end user. But I suppose in React Native, you might run into performance bottlenecks sooner. And if you really care about performance. Your best option is to just go true native. I'm gonna go ahead and wrap things up there, but if you want to build these chat apps from scratch, Check out Fireship Pro for a couple of extra bonus videos there. And here's a special discount code for those of you who watched the entire video. Thanks for watching, and I will see you in the next one.
If
if
you're
you're
building
building
a
a
cross
cross
platform
platform
mobile
mobile
app
app
today,
today
there
there
are
are
2
2
heavyweights
heavyweights
competing
competing
for
for
your
your
mind
mind
share.
share
In
in
the
the
red
red
corner,
corner
we
we
have
have
Flutter
flutter
from
from
Google,
google
and
and
in
in
the
the
blue
blue
corner,
corner
we
we
have
have
React
react
Native
native
from
from
Facebook.
facebook
These
these
tools
tools
can
can
achieve
achieve
the
the
same
same
fundamental
fundamental
goal,
goal
build
build
apps
apps
for
for
multiple
multiple
platforms
platforms
like
like
iOS,
ios
Android,
android
and
and
the
the
web
web
from
from
a
a
single
single
code
code
base.
base
But
but
there's
there's
a
a
world
world
of
of
difference
difference
in
in
both
both
how
how
they
they
work
work
and
and
the
the
developer
developer
variant.
variant
No
no
matter
matter
which
which
one
one
you
you
choose,
choose
the
the
other
other
one
one
automatically
automatically
becomes
becomes
your
your
arch
arch
nemesis,
nemesis
because
because
you
you
don't
don't
choose
choose
anything
anything
but
but
the
the
absolute
absolute
best
best
technology
technology
out
out
there.
there
To
to
figure
figure
out
out
which
which
one
one
is
is
best,
best
I
i
built
built
exact
exact
same
same
chat
chat
app
app
with
with
both
both
React
react
Native
native
and
and
Flutter
flutter
using
using
Firebase
firebase
as
as
the
the
back
back
end.
end
In
in
today's
today's
video,
video
we'll
we'll
dive
dive
into
into
a
a
detailed
detailed
side
side
by
by
side
side
comparison
comparison
of
of
features,
features
tooling,
tooling
developer
developer
experience,
experience
performance,
performance
and,
and
of
of
course,
course
the
the
code.
code
By
by
the
the
end
end
of
of
the
the
video,
video
you'll
you'll
know
know
exactly
exactly
which
which
one
one
fits
fits
best
best
into
into
your
your
ideology,
ideology
but
but
This
this
isn't
isn't
a
a
line
line
by
by
line
line
coding
coding
tutorial.
tutorial
If
if
you
you
wanna
wanna
learn
learn
how
how
to
to
build
build
these
these
apps
apps
from
from
scratch,
scratch
I
i
created
created
2
2
separate
separate
pro
pro
lessons
lessons
on
on
Fireshift
fireshift
that
that
will
will
teach
teach
you
you
how
how
to
to
build
build
them
them
step
step
by
by
step.
step
Let's
let's
start
start
by
by
comparing
comparing
the
the
programming
programming
languages
languages
between
between
these
these
two
two
frameworks.
frameworks
In
in
React
react
Native,
native
we
we
code
code
apps
apps
in
in
JavaScript
javascript
with
with
React
react
being
being
a
a
required
required
UI
ui
library,
library
so
so
it's
it's
almost
almost
like
like
an
an
extension
extension
of
of
the
the
JavaScript
javascript
language.
language
And
and
it
it
also
also
supports
supports
TypeScript
typescript
if
if
you
you
wanna
wanna
add
add
a
a
type
type
system
system
on
on
top
top
of
of
JavaScript.
javascript
JavaScript
javascript
was
was
never
never
really
really
designed
designed
to
to
build
build
mobile
mobile
apps,
apps
So
so
Flutter
flutter
was
was
implemented
implemented
with
with
a
a
different
different
language
language
called
called
Dart,
dart
which
which
is
is
a
a
language
language
optimized
optimized
for
for
compiling
compiling
to
to
multiple
multiple
platforms
platforms
with
with
ahead
ahead
of
of
time
time
and
and
just
just
in
in
time
time
compilation.
compilation
That
that
results
results
in
in
various
various
performance
performance
advantages,
advantages
but
but
it's
it's
a
a
language
language
that
that
not
not
many
many
people
people
know
know
outside
outside
of
of
Flutter.
flutter
It
it
has
has
a
a
syntax
syntax
that
that
somewhat
somewhat
resembles
resembles
TypeScript,
typescript
so
so
curly
curly
brace
brace
developers
developers
generally
generally
have
have
an
an
easy
easy
time
time
getting
getting
with
with
it,
it
but
but
that's
that's
a
a
major
major
question
question
to
to
ask
ask
yourself.
yourself
Do
do
I
i
wanna
wanna
learn
learn
a
a
whole
whole
new
new
language
language
or
or
do
do
I
i
want
want
to
to
stick
stick
with
with
what
what
I
i
already
already
know?
know
Now,
now
let's
let's
look
look
at
at
the
the
ecosystem
ecosystem
behind
behind
frameworks.
frameworks
They're
they're
both
both
2
2
of
of
the
the
most
most
actively
actively
worked
worked
on
on
GitHub
github
repos
repos
in
in
the
the
world.
world
React
react
Native
native
comes
comes
from
from
Facebook,
facebook
which
which
has
has
been
been
criticized
criticized
as
as
being
being
an
an
evil
evil
tech
tech
corporation,
corporation
while
while
Flutter
flutter
comes
comes
Google,
google
which
which
has
has
been
been
criticized
criticized
for
for
being
being
an
an
evil
evil
tech
tech
corporation.
corporation
Building
building
high
high
quality
quality
cross
cross
platform
platform
mobile
mobile
apps
apps
is
is
an
an
extremely
extremely
difficult
difficult
technical
technical
challenge,
challenge
and
and
that's
that's
why
why
you
you
need
need
to
to
bring
bring
in
in
an
an
evil
evil
tech
tech
corporation
corporation
to
to
get
get
the
the
job
job
done
done
right.
right
But,
but
you'll
you'll
notice
notice
a
a
huge
huge
difference
difference
in
in
development
development
philosophy.
philosophy
React
react
Native,
native
just
just
like
like
React
react
for
for
the
the
web,
web
is
is
designed
designed
to
to
be
be
minimal.
minimal
It
it
provides
provides
some
some
base
base
components,
components
but
but
leaves
leaves
everything
everything
else
else
to
to
the
the
open
open
source
source
community,
community
and
and
that
that
means
means
a
a
complete
complete
react
react
native
native
project
project
generally
generally
really
really
requires
requires
a
a
lot
lot
of
of
third
third
party
party
dependencies,
dependencies
depending
depending
on
on
the
the
features
features
that
that
you
you
need.
need
Flutter,
flutter
on
on
the
the
other
other
hand,
hand
comes
comes
with
with
a
a
huge
huge
widget
widget
library
library
out
out
of
of
the
the
box.
box
And
and
the
the
Flutter
flutter
team
team
maintains
maintains
many
many
plugins
plugins
that
that
you'll
you'll
commonly
commonly
need
need
like
like
ones
ones
to
to
access
access
the
the
native
native
camera
camera
on
on
a
a
device.
device
Dart
dart
also
also
has
has
a
a
package
package
manager
manager
called
called
Pub,
pub
and
and
there's
there's
a
a
huge
huge
ecosystem
ecosystem
of
of
open
open
source
source
packages
packages
for
for
Flutter
flutter
as
as
well.
well
The
the
bottom
bottom
line
line
is
is
they
they
both
both
have
have
huge
huge
communities
communities
to
to
get
get
pretty
pretty
much
much
anything
anything
you
you
can
can
imagine
imagine
done.
done
Now,
now
let's
let's
look
look
at
at
their
their
underlying
underlying
architectures.
architectures
First
first
off,
off
how
how
does
does
React
react
Native
native
work?
work
Under
under
the
the
hood,
hood
it
it
runs
runs
2
2
separate
separate
JavaScript
javascript
threads.
threads
1
1
is
is
the
the
main
main
thread
thread
to
to
run
run
your
your
app
app
on
on
whatever
whatever
native
native
platform
platform
and
and
the
the
other
other
is
is
a
a
a
a
thread
thread
to
to
run
run
the
the
business
business
logic
logic
of
of
your
your
application.
application
These
these
threads
threads
are
are
isolated
isolated
from
from
each
each
other,
other
but
but
sometimes
sometimes
they
they
need
need
to
to
interact,
interact
so
so
there's
there's
a
a
bridge
bridge
in
in
the
the
middle
middle
where
where
they
they
can
can
pass
pass
serialized
serialized
messages
messages
back
back
and
and
forth.
forth
The
the
cool
cool
thing
thing
about
about
this
this
system
system
is
is
that
that
it
it
allows
allows
a
a
JavaScript
javascript
app
app
to
to
communicate
communicate
with
with
the
the
native
native
platform.
platform
So
so
when
when
React
react
Native
native
renders
renders
a
a
component,
component
it's
it's
a
a
truly
truly
native
native
component
component
on
on
the
the
responding
responding
platform.
platform
It's
it's
not
not
just
just
like
like
a
a
React
react
website
website
bundled
bundled
as
as
a
a
mobile
mobile
app,
app
it's
it's
truly
truly
rendering
rendering
native
native
components.
components
And
and
that
that
means
means
your
your
UI
ui
will
will
look
look
exactly
exactly
like
like
those
those
native
native
components
components
are
are
intended,
intended
even
even
when
when
things
things
change
change
in
in
the
the
future.
future
Now,
now
how
how
does
does
Flutter
flutter
work?
work
Instead
instead
of
of
using
using
native
native
UI
ui
components,
components
Flutter
flutter
has
has
its
its
own
own
high
high
performance
performance
rendering
rendering
engine
engine
built
built
with
with
c
c
plus
plus
plus
plus
and
and
skia
skia
that
that
renders
renders
its
its
own
own
custom
custom
pixels
pixels
to
to
the
the
screen
screen
with
with
compiled
compiled
native
native
code
code
that
that
allows
allows
it
it
to
to
render
render
pixel
pixel
perfect
perfect
versions
versions
of
of
iOS
ios
and
and
Android
android
Widgets,
widgets
while
while
also
also
making
making
it
it
possible
possible
to
to
paint
paint
your
your
own
own
custom
custom
pixels
pixels
to
to
the
the
screen,
screen
kind
kind
of
of
like
like
a
a
gaming
gaming
engine
engine
like
like
Unity.
unity
This
this
allows
allows
it
it
to
to
paint
paint
smooth
smooth
graphics
graphics
without
without
the
the
need
need
for
for
Ridge,
ridge
although
although
it
it
does
does
have
have
a
a
system
system
called
called
platform
platform
channels
channels
that
that
allows
allows
you
you
to
to
communicate
communicate
with
with
the
the
native
native
system
system
when
when
you
you
need
need
native
native
features
features
or
or
if
if
you
you
want
want
to
to
integrate
integrate
native
native
code.
code
At
at
the
the
end
end
of
of
the
the
day
day
though,
though
Architecture
architecture
doesn't
doesn't
matter
matter
a
a
whole
whole
lot.
lot
What
what
matters
matters
is
is
that
that
you
you
create
create
a
a
good
good
user
user
experience
experience
and
and
have
have
fun
fun
doing
doing
it.
it
So
so
now,
now
let's
let's
compare
compare
the
the
developer
developer
experience
experience
Starting
starting
with
with
the
the
initial
initial
setup.
setup
To
to
get
get
started
started
with
with
React
react
Native,
native
you
you
can
can
generate
generate
a
a
new
new
app
app
by
by
running
running
npx
npx
react
react
native
native
init
init
from
from
the
the
command
command
line.
line
And
and
you
you
can
can
optionally
optionally
pass
pass
in
in
a
a
template
template
here
here
with
with
something
something
like
like
native
native
base
base
to
to
give
give
you
you
a
a
nice
nice
looking
looking
UI
ui
out
out
of
of
the
the
gate.
gate
And
and
you
you
might
might
also
also
use
use
Expo
expo
here
here
instead
instead
of
of
the
the
default
default
react
react
native
native
CLI
cli
to
to
give
give
you
you
a
a
more
more
complete
complete
starting
starting
point.
point
When
when
you
you
open
open
the
the
app,
app
you'll
you'll
notice
notice
quite
quite
a
a
few
few
files
files
here
here
in
in
the
the
root
root
directory.
directory
These
these
are
are
mostly
mostly
config
config
files
files
like
like
metro
metro
and
and
watchmen
watchmen
for
for
hot
hot
reloading,
reloading
Buck
buck
is
is
your
your
build
build
tool,
tool
and
and
Babel
babel
to
to
transpile
transpile
your
your
JavaScript.
javascript
It
it
even
even
ships
ships
with
with
Flow
flow
by
by
default,
default
so
so
it
it
feels
feels
very
very
Facebook
facebook
y.
y
The
the
app
app
source
source
code
code
is
is
contained
contained
in
in
the
the
single
single
app
app
dotjs
dotjs
file.
file
If
if
we
we
go
go
ahead
ahead
and
and
open
open
that
that
file,
file
you'll
you'll
notice
notice
a
a
bunch
bunch
of
of
React
react
code.
code
This
this
might
might
look
look
familiar
familiar
if
if
you're
you're
a
a
web
web
developer
developer
and
and
the
the
only
only
real
real
difference
difference
is
is
that
that
we're
we're
importing
importing
special
special
components
components
from
from
React
react
Native
native
and
and
we
we
use
use
those
those
in
in
the
the
JSX
jsx
instead
instead
of
of
the
the
typical
typical
HTML
html
element.
element
That's
that's
our
our
starting
starting
point
point
for
for
React
react
Native.
native
Now
now
let's
let's
take
take
a
a
look
look
at
at
Flutter.
flutter
After
after
installing
installing
the
the
Flutter
flutter
SDK,
sdk
run
run
flutter
flutter
create
create
from
from
the
the
command
command
line.
line
You'll
you'll
notice
notice
that
that
it's
it's
considerably
considerably
faster
faster
because
because
it
it
doesn't
doesn't
have
have
to
to
reach
reach
out
out
to
to
npm
npm
to
to
download
download
a
a
bunch
bunch
of
of
packages.
packages
Go
go
ahead
ahead
and
and
open
open
the
the
project
project
in
in
Versus
versus
Code
code
and
and
make
make
sure
sure
that
that
you
you
have
have
the
the
Flutter
flutter
extension
extension
installed.
installed
It
it
will
will
actually
actually
manage
manage
any
any
additional
additional
packages
packages
you
you
install
install
automatically
automatically
in
in
the
the
background.
background
The
the
project
project
structure
structure
here
here
is
is
a
a
little
little
more
more
Drive.
drive
Your
your
main
main
config
config
file
file
is
is
this
this
pubspec
pubspec
dot
dot
yaml
yaml
file,
file
which
which
is
is
equivalent
equivalent
to
to
the
the
package
package
JSON
json
in
in
the
the
React
react
Native
native
project.
project
This
this
is
is
where
where
you
you
register
register
and
and
install
install
3rd
3rd
party
party
packages.
packages
The
the
app
app
source
source
code
code
is
is
contained
contained
in
in
the
the
main
main
dot
dot
dart
dart
file.
file
Now,
now
if
if
you're
you're
a
a
web
web
developer
developer
who's
who's
never
never
touched
touched
TypeScript,
typescript
this
this
code
code
might
might
Look
look
kind
kind
of
of
crazy
crazy
with
with
keywords
keywords
like
like
extends,
extends
super,
super
and
and
override.
override
But
but
if
if
you
you
have
have
a
a
background
background
in
in
TypeScript,
typescript
Java,
java
or
or
c
c
sharp,
sharp
then
then
you'll
you'll
likely
likely
feel
feel
right
right
at
at
home
home
with
with
this
this
code.
code
Now
now
that
that
we
we
have
have
a
a
project
project
set
set
up.
up
I
i
want
want
to
to
talk
talk
about
about
tooling,
tooling
which
which
is
is
really
really
important
important
when
when
building
building
cross
cross
platform
platform
mobile
mobile
apps
apps
because
because
without
without
good
good
tooling,
tooling
your
your
life
life
will
will
be
be
miserable.
miserable
Let's
let's
start
start
by
by
serving
serving
the
the
React
react
Native
native
app
app
locally.
locally
Here,
here
I
i
have
have
an
an
Android
android
emulator
emulator
running,
running
then
then
I
i
need
need
to
to
run
run
this
this
adb
adb
command
command
to
to
connect
connect
to
to
it.
it
From
from
there,
there
I
i
run
run
npm
npm
start
start
to
to
run
run
metro
metro
to
to
watch
watch
my
my
code
code
for
for
changes
changes
in
in
the
the
background.
background
Then
then
in
in
a
a
separate
separate
terminal,
terminal
enter
enter
npm
npm
run
run
Android
android
to
to
build
build
the
the
Android
android
app.
app
This
this
will
will
install
install
the
the
app
app
on
on
the
the
emulator
emulator
and
and
listen
listen
to
to
code
code
changes
changes
in
in
the
the
background
background
to
to
automatically
automatically
update
update
the
the
application.
application
We
we
can
can
also
also
type
type
an
an
r
r
into
into
the
the
watchmen
watchmen
terminal
terminal
to
to
hot
hot
reload
reload
the
the
app.
app
That's
that's
extremely
extremely
useful
useful
because
because
it
it
preserves
preserves
the
the
state
state
of
of
the
the
application
application
while
while
still
still
reflecting
reflecting
your
your
code
code
changes
changes
if
if
you're
you're
iterating
iterating
on
on
the
the
design.
design
So
so
that's
that's
essential,
essential
but
but
when
when
it
it
comes
comes
2
2
tooling
tooling
with
with
React
react
Native.
native
It's
it's
really
really
a
a
create
create
your
your
own
own
adventure
adventure
story.
story
It's
it's
just
just
a
a
JavaScript
javascript
project,
project
so
so
you
you
can
can
throw
throw
in
in
TypeScript
typescript
or
or
you
you
might
might
wanna
wanna
use
use
the
the
night
night
CLI
cli
to
to
automatically
automatically
generate
generate
boilerplate
boilerplate
for
for
you
you
or
or
use
use
expo
expo
to
to
quickly
quickly
launch
launch
the
the
app
app
on
on
your
your
own
own
device.
device
It's
it's
nice
nice
to
to
have
have
a
a
lot
lot
of
of
options,
options
But
but
that
that
can
can
also
also
lead
lead
to
to
decision
decision
fatigue
fatigue
and
and
an
an
over
over
reliance
reliance
on
on
third
third
parties.
parties
Now,
now
if
if
we
we
switch
switch
over
over
to
to
the
the
Flutter
flutter
app,
app
you'll
you'll
notice
notice
a
a
button
button
down
down
here
here
in
in
b
b
s
s
code
code
that
that
allows
allows
us
us
to
to
grab
grab
an
an
emulator
emulator
that's
that's
configured
configured
on
on
the
the
local
local
system.
system
We
we
can
can
then
then
open
open
the
the
terminal
terminal
and
and
enter
enter
Flutter
flutter
run,
run
and
and
we
we
can
can
also
also
hot
hot
reload
reload
because
because
Dart
dart
supports
supports
just
just
in
in
time
time
compilation
compilation
by
by
also
also
typing
typing
an
an
r
r
into
into
the
the
terminal.
terminal
Now,
now
because
because
Dart
dart
has
has
a
a
sound
sound
type
type
system,
system
it's
it's
able
able
to
to
provide
provide
really
really
nice
nice
tooling
tooling
as
as
you
you
write
write
your
your
code.
code
Notice
notice
how
how
when
when
I
i
hover
hover
over
over
any
any
class.
class
It
it
provides
provides
the
the
full
full
documentation
documentation
for
for
it.
it
But
but
more
more
importantly,
importantly
Dart
dart
makes
makes
it
it
really
really
hard
hard
to
to
write
write
code
code
that
that
results
results
in
in
runtime
runtime
errors.
errors
If
if
I
i
try
try
to
to
pass
pass
an
an
argument
argument
that
that
has
has
the
the
wrong
wrong
data
data
type.
type
It'll
it'll
tell
tell
me
me
this
this
code
code
sucks
sucks
right
right
away
away
instead
instead
of
of
waiting
waiting
for
for
it
it
to
to
pop
pop
up
up
as
as
an
an
error
error
at
at
runtime.
runtime
And
and
that's
that's
especially
especially
important
important
for
for
mobile
mobile
apps
apps
because
because
you
you
live
live
and
and
die
die
by
by
reviews
reviews
in
in
the
the
app
app
stores.
stores
Now
now
you
you
can
can
also
also
add
add
TypeScript
typescript
to
to
React
react
Native
native
to
to
get
get
similar
similar
results,
results
but
but
Dart
dart
does
does
other
other
things
things
like
like
null
null
safety
safety
to
to
make
make
your
your
code
code
even
even
more
more
reliable.
reliable
Now,
now
the
the
other
other
interesting
interesting
thing
thing
in
in
the
the
code
code
is
is
that
that
both
both
frameworks
frameworks
create
create
a
a
tree
tree
of
of
components
components
or
or
widgets.
widgets
In
in
React
react
Native,
native
it
it
looks
looks
like
like
HTML
html
or
or
JSX
jsx
where
where
you
you
have
have
a
a
tag
tag
like
like
view
view
and
and
then
then
you
you
add
add
another
another
component
component
inside
inside
of
of
that
that
and
and
then
then
maybe
maybe
more
more
components
components
inside
inside
of
of
that.
that
Components
components
might
might
have
have
state
state
that
that
changes
changes
throughout
throughout
the
the
life
life
cycle
cycle
of
of
the
the
app,
app
and
and
React
react
Native
native
will
will
automatically
automatically
rerender
rerender
the
the
UI
ui
whenever
whenever
the
the
state
state
changes.
changes
Flutter
flutter
works
works
in
in
the
the
exact
exact
same
same
way
way
and
and
was
was
actually
actually
very
very
much
much
inspired
inspired
by
by
React,
react
but
but
it
it
goes
goes
about
about
it
it
in
in
a
a
much
much
different
different
way.
way
Instead
instead
of
of
functions,
functions
you
you
have
have
classes
classes
that
that
have
have
a
a
build
build
method,
method
ed,
ed
which
which
returns
returns
a
a
tree
tree
of
of
widgets.
widgets
Each
each
widget
widget
is
is
just
just
a
a
class
class
instance
instance
and
and
might
might
have
have
a
a
variety
variety
of
of
different
different
properties
properties
that
that
take
take
other
other
widgets
widgets
as
as
arguments.
arguments
So
so
it
it
does
does
the
the
same
same
basic
basic
thing
thing
as
as
React,
react
but
but
it's
it's
just
just
a
a
different
different
approach
approach
to
to
building
building
declarative
declarative
UIs.
uis
When
when
coding
coding
by
by
hand,
hand
it
it
makes
makes
refactoring
refactoring
more
more
difficult
difficult
in
in
my
my
opinion.
opinion
You
you
can't
can't
just
just
copy
copy
and
and
paste
paste
a
a
component
component
like
like
you
you
would
would
React.
react
However,
however
Flutter
flutter
once
once
again
again
has
has
really
really
good
good
tooling
tooling
that
that
makes
makes
it
it
possible
possible
to
to
wrap
wrap
and
and
reposition
reposition
widgets
widgets
by
by
simply
simply
clicking
clicking
a
a
button
button
in
in
Versus
versus
Code.
code
Now,
now
after
after
building
building
a
a
chat
chat
app
app
with
with
both
both
frameworks,
frameworks
one
one
drawback
drawback
I
i
found
found
with
with
Flutter
flutter
is
is
that
that
I
i
would
would
often
often
end
end
up
up
with
with
these
these
deeply
deeply
nested
nested
widget
widget
trees
trees
that
that
are
are
hard
hard
to
to
follow.
follow
You
you
can
can
always
always
extract
extract
this
this
logic
logic
into
into
your
your
own
own
custom
custom
widgets,
widgets
but
but
I
i
just
just
don't
don't
find
find
the
the
process
process
as
as
intuitive
intuitive
as
as
React
react
where
where
you
you
simply
simply
create
create
a
a
new
new
function
function
for
for
each
each
UI
ui
component.
component
Now,
now
the
the
problem
problem
with
with
React
react
is
is
there
there
often
often
isn't
isn't
a
a
component
component
to
to
do
do
exactly
exactly
what
what
you
you
wanna
wanna
do.
do
That
that
means
means
you
you
need
need
to
to
start
start
with
with
a
a
base
base
component
component
and
and
then
then
make
make
it
it
do
do
what
what
you
you
wanna
wanna
do
do
or
or
install
install
a
a
third
third
party
party
package.
package
On
on
top
top
of
of
that,
that
a
a
lot
lot
of
of
React
react
libraries
libraries
aren't
aren't
compatible
compatible
with
with
React
react
Native.
native
Like,
like
if
if
you
you
want
want
awesome
awesome
animations
animations
with
with
Framer
framer
Motion,
motion
That's
that's
not
not
going
going
to
to
fly
fly
in
in
React
react
Native.
native
Now,
now
the
the
final
final
thing
thing
I
i
wanna
wanna
look
look
at
at
is
is
performance.
performance
You
you
might
might
be
be
wondering,
wondering
is
is
Flutter
flutter
faster
faster
than
than
React
react
Native?
native
And
and
the
the
answer
answer
is
is
most
most
likely
likely
yes.
yes
The
the
goal
goal
is
is
generally
generally
to
to
render
render
at
at
60
60
frames
frames
per
per
second.
second
And
and
because
because
Flutter
flutter
apps
apps
are
are
compiled
compiled
directly
directly
to
to
machine
machine
code
code
and
and
don't
don't
require
require
a
a
JavaScript
javascript
Bridge.
bridge
They
they
tend
tend
to
to
perform
perform
better
better
based
based
on
on
most
most
benchmarks
benchmarks
I
i
could
could
find
find
on
on
the
the
Internet.
internet
There's
there's
a
a
good
good
article
article
that
that
I'll
i'll
link
link
to
to
in
in
the
the
description
description
that
that
breaks
breaks
down
down
of
of
different
different
benchmarks.
benchmarks
And
and
as
as
you
you
can
can
see,
see
Flutter
flutter
gets
gets
much
much
closer
closer
to
to
native
native
performance.
performance
However,
however
you
you
have
have
to
to
ask
ask
yourself,
yourself
does
does
performance
performance
really
really
matter?
matter
For
for
the
the
majority
majority
of
of
apps
apps
out
out
there,
there
performance
performance
differences
differences
will
will
be
be
indistinguishable
indistinguishable
to
to
the
the
end
end
user.
user
But
but
I
i
suppose
suppose
in
in
React
react
Native,
native
you
you
might
might
run
run
into
into
performance
performance
bottlenecks
bottlenecks
sooner.
sooner
And
and
if
if
you
you
really
really
care
care
about
about
performance.
performance
Your
your
best
best
option
option
is
is
to
to
just
just
go
go
true
true
native.
native
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
if
if
you
you
want
want
to
to
build
build
these
these
chat
chat
apps
apps
from
from
scratch,
scratch
Check
check
out
out
Fireship
fireship
Pro
pro
for
for
a
a
couple
couple
of
of
extra
extra
bonus
bonus
videos
videos
there.
there
And
and
here's
here's
a
a
special
special
discount
discount
code
code
for
for
those
those
of
of
you
you
who
who
watched
watched
the
the
entire
entire
video.
video
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the differences between React Native and Flutter in building mobile apps, emphasizing the use of different language and framework, ecosystem, and advantages and disadvantages. They stress the importance of building cross-platform mobile apps and creating adventure stories, as well as the benefits of building custom apps like Flutter. The process of creating a React Native app, including setting up a project, tooling, and building a Flutter app, is emphasized. The speakers also offer a discount code for viewers.
React Native vs Flutter - I built the same chat app with both
If you're building a cross platform mobile app today, there are 2 heavyweights competing for your mind share. In the red corner, we have Flutter from Google, and in the blue corner, we have React Native from Facebook. These tools can achieve the same fundamental goal, build apps for multiple platforms like iOS, Android, and the web from a single code base. But there's a world of difference in both how they work and the developer variant. No matter which one you choose, the other one automatically becomes your arch nemesis, because you don't choose anything but the absolute best technology out there. To figure out which one is best, I built exact same chat app with both React Native and Flutter using Firebase as the back end. In today's video, we'll dive into a detailed side by side comparison of features, tooling, developer experience, performance, and, of course, the code. By the end of the video, you'll know exactly which one fits best into your ideology, but This isn't a line by line coding tutorial. If you wanna learn how to build these apps from scratch, I created 2 separate pro lessons on Fireshift that will teach you how to build them step by step. Let's start by comparing the programming languages between these two frameworks. In React Native, we code apps in JavaScript with React being a required UI library, so it's almost like an extension of the JavaScript language. And it also supports TypeScript if you wanna add a type system on top of JavaScript. JavaScript was never really designed to build mobile apps, So Flutter was implemented with a different language called Dart, which is a language optimized for compiling to multiple platforms with ahead of time and just in time compilation. That results in various performance advantages, but it's a language that not many people know outside of Flutter. It has a syntax that somewhat resembles TypeScript, so curly brace developers generally have an easy time getting with it, but that's a major question to ask yourself. Do I wanna learn a whole new language or do I want to stick with what I already know? Now, let's look at the ecosystem behind frameworks. They're both 2 of the most actively worked on GitHub repos in the world. React Native comes from Facebook, which has been criticized as being an evil tech corporation, while Flutter comes Google, which has been criticized for being an evil tech corporation. Building high quality cross platform mobile apps is an extremely difficult technical challenge, and that's why you need to bring in an evil tech corporation to get the job done right. But, you'll notice a huge difference in development philosophy. React Native, just like React for the web, is designed to be minimal. It provides some base components, but leaves everything else to the open source community, and that means a complete react native project generally really requires a lot of third party dependencies, depending on the features that you need. Flutter, on the other hand, comes with a huge widget library out of the box. And the Flutter team maintains many plugins that you'll commonly need like ones to access the native camera on a device. Dart also has a package manager called Pub, and there's a huge ecosystem of open source packages for Flutter as well. The bottom line is they both have huge communities to get pretty much anything you can imagine done. Now, let's look at their underlying architectures. First off, how does React Native work? Under the hood, it runs 2 separate JavaScript threads. 1 is the main thread to run your app on whatever native platform and the other is a a thread to run the business logic of your application. These threads are isolated from each other, but sometimes they need to interact, so there's a bridge in the middle where they can pass serialized messages back and forth. The cool thing about this system is that it allows a JavaScript app to communicate with the native platform. So when React Native renders a component, it's a truly native component on the responding platform. It's not just like a React website bundled as a mobile app, it's truly rendering native components. And that means your UI will look exactly like 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 with c plus plus and skia that renders its own custom pixels to the screen with compiled native code that allows it to render pixel perfect versions of iOS and Android Widgets, while also making it possible to paint your own custom pixels to the screen, kind of like a gaming engine like Unity. This allows it to paint smooth graphics without the need for Ridge, 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 though, Architecture doesn't matter a whole lot. What matters is that you create a good user experience and have fun doing it. So now, let's compare the developer experience Starting with the initial setup. To get started with React Native, you can generate a new app by running npx react native init from the command line. And you can optionally pass in a template here with something like native base to give you a nice looking UI out of the gate. And you might also use Expo here instead of the default react native CLI to give you a more complete starting point. When you open the app, you'll notice quite a few files here in the root directory. These are mostly config files like metro and watchmen for hot reloading, Buck is your build tool, and Babel to transpile your JavaScript. It even ships with Flow by default, so it feels very Facebook y. The app source code is contained in the single app dotjs file. If we go ahead and open that file, you'll notice a bunch of React code. This might look familiar if you're a web developer and the only real difference is that we're importing special components from React Native and we use those in the JSX instead of the typical HTML element. That's our starting point for React Native. Now let's take a look at Flutter. After installing the Flutter SDK, run flutter create from the command line. You'll notice that it's considerably faster because it doesn't have to reach out to npm to download a bunch of packages. Go ahead and open the project in Versus Code and make sure that you have the Flutter extension installed. It will actually manage any additional packages you install automatically in the background. The project structure here is a little more Drive. Your main config file is this pubspec dot yaml file, which is equivalent to the package JSON in the React Native project. This is where you register and install 3rd party packages. The app source code is contained in the main dot dart file. Now, if you're a web developer who's never touched TypeScript, this code might Look kind of crazy with keywords like extends, super, and override. But if you have a background in TypeScript, Java, or c sharp, then you'll likely feel right at home with this code. Now that we have a project set up. I want to talk about tooling, which is really important when building cross platform mobile apps because without good tooling, your life will be miserable. Let's start by serving the React Native app locally. Here, I have an Android emulator running, then I need to run this adb command to connect to it. From there, I run npm start to run metro to watch my code for changes in the background. Then in a separate terminal, enter npm run Android to build the Android app. This will install the app on the emulator and listen to code changes in the background to automatically update the application. We can also type an r into the watchmen terminal to hot reload the app. That's extremely useful because it preserves the state of the application while still reflecting your code changes if you're iterating on the design. So that's essential, but when it comes 2 tooling with React Native. It's really a create your own adventure story. It's just a JavaScript project, so you can throw in TypeScript or you might wanna use the night CLI to automatically generate boilerplate for you or use expo to quickly launch the app on your own device. It's nice to have a lot of options, But that can also lead to decision fatigue and an over reliance on third parties. Now, if we switch over to the Flutter app, you'll notice a button down here in b s code that allows us to grab an emulator that's configured on the local system. We can then open the terminal and enter Flutter run, and we can also hot reload because Dart supports just in time compilation by also typing an r into the terminal. Now, because Dart has a sound type system, it's able to provide really nice tooling as you write your code. Notice how when I hover over any class. It provides the full documentation for it. But more importantly, Dart makes it really hard to write code that results in runtime errors. If I try to pass an argument that has the wrong data type. It'll tell me this code sucks right away instead of waiting for it to pop up as an error at runtime. And that's especially important for mobile apps because you live and die by 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 reliable. Now, the other interesting thing in 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 of that and then maybe more components inside of that. Components might have state that changes throughout the life cycle of the app, and React Native will automatically rerender the UI whenever the state changes. Flutter works in the exact same way and was actually very much inspired by React, but it goes about it in a much different way. Instead of functions, you have classes that have a build method, ed, which returns a tree of widgets. Each widget is just a class instance and might have a variety of different properties that take other widgets as arguments. So it does the same basic thing as React, but it's just a different approach to building declarative UIs. When coding by hand, it makes refactoring more difficult in my opinion. You can't just copy and paste a component like you would React. However, Flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in Versus Code. Now, after building a chat app with both frameworks, one drawback I found with Flutter is that I would often end up with these deeply nested widget trees that are hard to follow. You can always extract this logic into your own custom widgets, but I just don't find the process as intuitive as React where you simply create a new function for each UI component. Now, the problem with React is there often isn't a component to do exactly what you wanna do. That means you need to start with a base component and then make it do what you wanna do or install a third party package. On top of that, a lot of React libraries aren't compatible with React Native. Like, if you want awesome animations with Framer Motion, That's not going to fly in React Native. Now, the final thing I wanna look at is performance. You might be wondering, is Flutter faster than React Native? And the answer is most likely yes. The goal is generally to render at 60 frames per second. And because Flutter apps are compiled directly to machine code and don't require a JavaScript Bridge. They tend to perform better based on most benchmarks I could find on the Internet. There's a good article that I'll link to in the description that breaks down of different benchmarks. And as you can see, Flutter gets much closer to native performance. However, you have to ask yourself, does performance really matter? For the majority of apps out there, performance differences will be indistinguishable to the end user. But I suppose in React Native, you might run into performance bottlenecks sooner. And if you really care about performance. Your best option is to just go true native. I'm gonna go ahead and wrap things up there, but if you want to build these chat apps from scratch, Check out Fireship Pro for a couple of extra bonus videos there. And here's a special discount code for those of you who watched the entire video. Thanks for watching, and I will see you in the next one.
The speakers discuss the differences between React Native and Flutter in building mobile apps, emphasizing the use of different language and framework, ecosystem, and advantages and disadvantages. They stress the importance of building cross-platform mobile apps and creating adventure stories, as well as the benefits of building custom apps like Flutter. The process of creating a React Native app, including setting up a project, tooling, and building a Flutter app, is emphasized. The speakers also offer a discount code for viewers.