Flutter vs. React Native - A Cross-Platform Framework vs. React Ported For Mobile
A light hearted article comparing the pros and cons of Flutter and React Native - 10/09/2022
Why React Native Makes Me Want To Pull My Hair Out
This is going to be a short article of me mostly venting about my struggles with both React Native and Flutter. Yes, I know it sounds weird but there are some things in React Native that I just don’t understand why they do and don’t exist, the same also goes for Flutter, but it’s much more manageable than React Native.
A few things to note before reading: the views in this article are my own and they should not be taken as advice in any way, shape or form; the scenarios in this article do not apply to all projects and might or might not apply to yours; and I won’t be going into too much detail in regards to the differences in syntax or sharing code snippets like I normally do. Since they are built off of 2 completely different programming languages the huge difference in syntax shouldn’t come as a shock to you.
Now let’s talk about the major differences between the 2:
Ease Of Use
Ease of use is very subjective, depending on the framework and dev stack you are coming from. If you’re coming from a web development stack that makes use of Javascript frameworks such as React or Vue, React Native will seem very familiar to you as opposed to Flutter. However, if you’re coming from a more traditional programming stack such as Java, C# or Kotlin, Flutter won’t exactly feel familiar but most of the basic concepts of OOP you know will apply.
If you’re a beginner just starting out your programming journey then I would say that Flutter is easier to use since it has a large library of built in widgets that just make the app development process seamless, but that can also work against you. With Flutter you can build a fully functioning app with cool animations and components without having to install any third party packages or libraries. Meanwhile for something as simple as a swipeable list view in React Native you will need to jump through so many hoops it’s ridiculous, from installing animation and gesture handling libraries such as react-native-gesture-handler and react-native-reanimated like why do I have to do all this for a component that should be built into the framework 🤦♂️
Documentation and Features
In terms of documentation Flutter beats out React Native in this one. I know a lot of React Native fan boys are going to hate on me for saying this, but hear me out.
Through out my journey as a developer I have never come across an official way to do something in React Native especially since the React Native team has close to 0 involvement in the community and in putting out beginner friendly and advanced content, either on Youtube or through blog posts. To be honest the React Native community and the fact that big tech companies are using it is the only reason why it’s still alive.
While on the other hand, the Flutter team puts out so much content on their Youtube channel and blog posts that it’s hard to believe that they even have enough time to work on their framework. From full blown app tutorials, to widget by widget tutorials, to basic tutorials and explanations about advanced concepts such as multithreading and the likes, it’s hard to believe that there are still people out there that would still disagree with me on this topic, but I guess everyone is free to believe what they want 🤷♂.
Now I know that React Native is very flexible as opposed to Flutter that can feel quite rigid at times, especially when using stuff like SVGs(till this day I’m still confused on why it’s so difficult to make use of SVGs in Flutter, but I guess you can’t have everything you want 😪).
Anyways all in all Flutter has better documentation and better built in components/widgets. But I’m not going to lie the community support that Javascript has works in React Natives favor 🙄.
Performance
Performance, performance the thing that everybody at all points of the development lifecycle cares most about. Let me save you some time and give you the answers first:
- Flutter is faster in creating projects
- Flutter is faster in hot reloading and restarting
- Flutter is faster and smoother when carrying out complex animations since it has it’s own rendering engine
- Flutter uses less CPU power on your development machine during development
- React Native has smaller app bundles
- Flutter has faster read and write speeds when interacting with device storage
- Flutter build times are quicker
As you can see Flutter is faster…way faster. The speed doesn’t just apply to the things listed above it applies to a lot of other things as well, such as encryption and decryption. In an experiment I carried out recently I noticed that packages like ethers.js and web3.js were ported for dart so as a developer I became curious and decided to put ethers on dart up against ethers.js (the package it was ported from), and the results shocked me. Ethers on dart was 10 times faster on both iOS and Android. In the development space speed is very important and having something be 10 times faster is honestly ridiculous.
Developer Experience
Ya, I’m not even going to bother writing much about this. React Native makes me want to pull out my hair and Flutter is manageable as long as you don’t bury yourself in nesting hell 😂.
Oh, and did I forget to mention that if you’re really considering building complex applications using React Native that you will need to know a bit about how to code Natively since React Native doesn’t even come close to 80% integration with the Native code bases… but thank goodness for third party libraries am I right? 😅
Conclusion
Flutter over React Native any day for MOBILE APP DEVELOPMENT but never use Flutter or React Native for web development. Please!!! I don’t know why these 2 teams decided to do this… well I guess I understand Flutter’s case to an extent, since they want to be the one stop shop for all your development framework needs but why does React Native for web even exist. React Native’s whole existence is based off of it being React.js for mobile development, it’s kinda implied in the name “React” + “Native”. Personally I think using React Native for web development is an abomination and the fact that it exists is probably because someone on the React Native team brought it up during some meeting and the team leads said why not 🤷♂️.
I know a lot of people will have a lot of things to say regarding this article but these are all my views and you arguing with me over them won’t change a thing. Some things that we can all do that will make a change is contribute to the community by writing documentation, making videos, building well rounded packages and libraries, and making PRs to these projects with our own little additions (hopefully they get merged 🙏). Anyways big ups to the React Native community members for building for and keeping that framework alive and big ups to the Flutter team too for making such a well rounded framework 💪.
I’ll be writing again next week about a personal app I’m currently working on. If any of you know Numi for Mac, you could say I’m working on something similar.
If you enjoyed the article leave an applause and check out some of my other articles