Flutter vs React Native: Performance, Size, UI, and Developer Productivity.

Welcome to COT, I have written some articles on Flutter in the past, and nowadays I am working with React native. Both allow us to develop mobile Apps for iOS, and Android using single codebase. They both allow you to develop native apps, unlike Ionic, Phonegap, or Cordova which create Web View. Web View means just a web page inside app, not real app. Apps developed in React Native, and Flutter can use different permissions, and many native modules which are not available for web views.

I have Developed Apps using both, so I know some things which may help you to choose one of them for your future apps. I do not work with teams, I make entire apps by myself, so I will talk about the points which matter the most for single developers. Are you single? :).

These are the parameters by which we will compare React Native, and Flutter. In the end, I will conclude it:

1. Productivity, or Speed of Development.

2. User Interface.

3. App Speed.

4. App Size.

5. Firebase, Servers, and Others.

6. Community Support, and the support from Developers.

7. Conclusion.

So, let's start with the first point. Which is about productivity, and it matters the most for single developers. Flutter, and React Native both are better for productivity when they are compared with native app development. So, I will focus more on it.

1. Productivity, or Speed of Development: Flutter vs React Native.

Hot Reload, or Live Reload:

• React Native, and Flutter both have live refresh feature. You do not have to build the app again, and again which takes minutes for low configuration computers. Both frameworks give refreshing feature, you just have to press Ctrl+S to save code, or press 'r' on keyboard, changes will be automatically reflected on the app. It allows testing while developing, because time taken to run new code is almost 0. 
• Here React Native, and Flutter are the same. They both save time.

Types, or data types:

• React Native uses JavaScript, which doesn't forces you to specify data types everywhere. It increases the speed of development, as you have to write less code. Also JavaScript has a lot of predefined functions which can help you to deal with data very fast. No wonder, why it is the most popular programming language.  The good thing is you can also use Object Oriented Programming, or classes in Javascript, React Native also helps you to use it.
• Flutter uses Dart. Although Dart provides keywords like 'var', and 'dynamic', but it still does not gives freedom like JavaScript when it comes to data types. You have to waste a lot of time dealing with data types related errors when you are using Flutter.
• Here, React Native is better, because it can increase speed of development.

UI Code:

• In React Native JSX is used to make User Interface(UI). JSX looks similar to HTML, but you have freedom freedom to use JavaScript everywhere to make it dynamic. If you have used PHP, you may have seen it already. Also React Native has styles, it is same as CSS. You can specify width, height, flex, border etc. properties you use in CSS. So you do not have to learn new things when it comes to styling.
• Here also React Native will be better when it comes to speed of development. Remember, React Native is not web view, some of you may think it. You can request all kind of permissions in React Native also, as you can do it Flutter, Node.js is all rounder. Here is how React Native code looks like-

Here is how React Native code for a button looks like:

Now, compare it with the widget inside widget approach used by Flutter. It is hard for new people to grasp the concept used by Flutter. You can see a Flutter code below-

Everyone knows HTML, and CSS. Do you know?, probably yes. So, of course React Native will be better for productivity of a programmer. Again Remember, React Native is not Web View. There is another thing called Expo, if you want to know about it, please comment below, and tell me. May be my next article will be on it. 

2. User Interface: Flutter vs React Native.

Design:

• Flutter is rich of Widgets which allow to develop good looking, and better UI apps.
• Flutter is created by Google, and when it comes to material design, Google is way ahead than others. Flutter comes with material design library. It has so many widgets which makes your UI simple, and cool looking.
• React Native only provides simple Components for UI. You have to use third party libraries for material design, and other Native UI components. React Native Paper, Native Base are most common third party libraries used in React Native for UI. They cannot be compared with Flutter's material design.

Navigation:

• Navigation is also important in User Interface. In React Native, you have to use third party library called React Navigation for Navigation. It provides Tab Navigator, Stack Navigator, Drawer all kinds of navigator. It is the best, and simple.
• On the other hand, Flutter already comes with the feature of navigation, so no need of third party library.

State Management:

• Flutter, and React both use similar approach for state management. Even they both have a same named function for updating state called setState().
• Both frameworks can use Redux for global state management.

3. App Speed/Performance: Flutter vs React Native. 

React Native uses JavaScript, so it needs a bridge called JavaScript Bridge to communicate with native module. It causes less speed than Flutter which doesn't need a bridge, because Flutter has most of widgets/component in itself.

• React Native can give between 1 to 4 FPS lesser than Flutter. 
• Flutter Apps use less CPU, Memory and Battery than React Native.
• App startup time in React Native Apps is more than Flutter Apps

Android apps written in Java/Kotlin, or natively developed apps  perform better than both Flutter, and React Native Apps, but that is not our concern here. So, if we look at above points, we can say that Flutter is good when it comes to App performance/speed with compared to React Native.

4. App Size: Flutter vs React Native.

Size matters, you know it :). Apps developed in Flutter, and React Native both have size higher than natively developed Apps. According to this article, they are comparing sizes of apps created with new project creation, or initialization. Apps created using Kotlin, and Java are around 500-550 KB. Whereas, the app created in Flutter is 7.5 MB, and the app created in React Native is 7 MB.

Well, there are many ways to reduce App size. Flutter, and React Native both have documentations on it. You can reduce app size. Still apps developed in React Native have a little bit less size than Flutter Apps.

5. Firebase, and working with Servers: Flutter vs React Native.

Firebase in React Native: 

• Some people who never touched React Native think that you can use Firebase only with Flutter, and Native App Development. You are wrong, React Native also has same power like Flutter, it can also use Firebase. Even React Native has multiple ways to do it, you can use Firebase developed for Node.js as well has Firebase Developed for native development. React Native Firebase is a famous library to use Firebase in React Native. So, sending remote notifications is as easy as it is native app development, and Flutter.

Working with servers: 

• React Native uses Node.js, so no wonder it is better, and productive way to deal with server request, and responses. Handling JSON response in Dart is pain, you have to deal with different data types, and so much manual work. Just look at the code, how they both handle JSON responses from requests. 
• Here is the link for a React Native library for it, and here is the link for Flutter library. You have to create template you reponses in Flutter, nothing like that in React Native. Sometimes you have use if-else in React Native, but it saves a lot of time.

I am from India, most famous payment gateway here is Razorpay. Their Flutter, and React Native APIs are very good. So, no problem here also.

6. Community Support, and the support from Developers: React Native vs Flutter.

Community Support:

• React Native is older than Flutter, and it uses Javascript, Node.js. React Native is older, so there are many stack overflow questions, and github issues for it, where it is not that much for Flutter. Also, many open source developers have built libraries, or modules for React Native, you can find at 5 modules for each component, or functionality you want. From OTP verification, relative font size, date picker, to notification, you can find whatever module you want.
• Javascript, and Node.js are way more famous than Dart. So, if you want to searching for code snippets, and question related to them, you will find it quickly. Dart is not that famous, you have to struggle a little bit more, I felt that. 

The support from developers:

• React Native, and Flutter both have good documentations. Flutter has one thing better here, there have so many Widgets, and they explain everything by posting Youtube Videos. On the other hand, there is nothing like that in React Native, everything is done by open source developers which is not bad.

7. Conclusion: React Native vs Flutter.

• If you want faster, and good looking apps, use Flutter. Performance matter in big project, it doesn't matter for small projects you do, React Native App will be the same as Flutter.
• If you have very less time, and want to be fast, and productive then there is nothing better than React Native.

Instagram, Walmart, Airbnb, Skype, and Uber Eats, all of them use React Native. You can seee how well they are. So, I think most of things depend on you how you keep the performance of your app good when it is getting larger. 

Message From the Author:

If you liked or didn't like my comparison of React Native, and Flutter, please tell me in comments below. Also, please suggest me the next topic for article. If you have any question, then you can ask in comments. Bye!.