React Native vs Flutter

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 today 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 topic 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 fire ship that will teach you how to build them step by step.

React Native vs Flutter

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. 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. 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 Trans pile 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.