React Native vs Flutter - I built the same chat app with both

if you're building a cross-platform mobile app today there are two heavyweights competing for your mindshare 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 experience 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 the 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 want to learn how to build these apps from scratch i created two separate pro lessons on fireship 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 want to 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 started with it but that's a major question to ask yourself do i want to learn a whole new language or do i want to stick with what i already know now let's look at the ecosystem behind these frameworks they're both two 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 from 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 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 two separate javascript threads one is the main thread to run your app on whatever native platform and the other is 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 corresponding 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 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 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 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 facebooky the app source code is contained in the single app.js 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 elements 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 vs 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 simplified your main config file is this pubspec.yaml file which is equivalent to the package json and the react native project this is where you register and install third-party packages the app source code is contained in the main.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 watchman 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 to 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 want to use the ignite 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 vs 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 re-render 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 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 in react however flutter once again has really good tooling that makes it possible to wrap and reposition widgets by simply clicking a button in vs 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 want to do that means you need to start with a base component and then make it do what you want to 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 frame remotion that's not going to fly and react native now the final 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 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 a variety 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 truenative 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

Channel: Fireship

Views: 1,878,095

Keywords: webdev, app development, lesson, tutorial

Id: X8ipUgXH6jw

Length: 10min 12sec (612 seconds)

Published: Mon Oct 04 2021