Every day companies face the arduous challenge of developing mobile apps for two different platforms. But why bother writing everything twice if the apps are intended to do basically the same thing? Fortunately, hybrid programming is gaining traction today, and the solutions in programmers’ arsenal have become much more reliable and complete. The two most obvious choices now are React Native and Flutter. The question is which one to choose: React Native or Flutter?
Table of content
What is React Native
React Native is a child of the Facebook company which originally launched as an internal project, but was made available publicly in 2015. It’s built upon the React framework (also created by Facebook) and allows to use Javascript to create apps. Most popular apps using React Native are: Facebook, Instagram, Uber and Microsoft PowerPoint.
What is Flutter
Flutter is a relatively new solution from Google themselves. It became a thing in 2017 and was heavily promoted by most popular search engine. It uses Dart – an object oriented language also developed by Google. The language is advertised as “a client-optimized language for fast apps on any platform”. Among the most popular apps created using Flutter are: Alibaba.com, Google Ads, Ulike and Realtor.com.
Comparison plan
I picked some key aspects to look at when comparing these two solutions:
- Documentation
- Learning curve
- Development
- Community
- Performance
There will be a separate paragraph for each, and at the end I will summarise which one looks better in given aspect.
Documentation
Documentation is a very important part of every tool or framework. We’ve all been there – missing docs, unclear descriptions… Let’s look at how the first solution compare in terms of documentation.
React Native
React Native documentation is very convenient for beginners, but advanced developers may find it a little incomplete. From the perspective of someone who is only starting their journey with React Native, there is a pretty good explanation of all the concepts that came from React.
The installation guide is also pretty good, I liked the two options you can choose for a start: full installation or the faster and simpler Expo. What’s worth mentioning is the difference between these two. Expo is the faster way, but it comes with some limitations. It’s good for quick apps, and you have to install Expo Client app on phone to open your project. Full installation requires more steps, but it can produce stand alone apps and has more possibilities.
On the other hand, if you are an advanced developer looking for detailed descriptions of the more advanced components, you will be disappointed. React Native comes with very skimpy documentation which focuses only on the essentials. Expect one-line descriptions for many props, and in many components. Good third-party libraries nicely complement React Native docs. If you want to check it by yourself, the documentation could be found here.
Flutter
Flutter is a whole different story. I was quite impressed with how detailed and complete their documentation is. Things like setting your IDE, or guidelines and differences for developers switching from other languages make great introductions for new developers, and definitely helped many of them to pick up Flutter.
There is a common belief that Google is terrible at documenting things, but I think they are actually pretty damn good at it and these docs just prove it. Descriptions of widgets are very comprehensive and informative. What’s also impressive is that many cases that we encounter during development are included in those descriptions, making work with Flutter much more enjoyable. Another point worth mentioning is that, because most things are supported by the tool rather than by the community, more resources are conveniently aggregated in one place.
A quick look at the documentation can help you make up your mind.
As far as documentation is concerned, I’d definitely call Flutter as the winner. I is evident that Google put a lot of effort to convince people to their solution. Docs are the first thing to look at, so they prepared it to be solid. This is not to say React Native is complete garbage. It just shows that sometimes you have to dig down deeper to better understand the topic, which is sometimes frustrating. Don’t get me wrong, I am not hating it, but I know it could be a little bit more complete and informative.
Learning curve
Everyone wants to start using some tool. But to use it, we have to know the basics. High learning curve is a big problem for the user (or developer) because some great tools are hard to learn and often they are just left over. Not many people will tell you that Vim is a great editing software, but there will be a few fanboys who will. Let’s have a look how React Native and Flutter compare with regard to difficulty.
React Native
React Native has a very big advantage. It’s in JavaScript – currently the most popular language in the industry. The biggest possible issue here could be usage of ES6 (or ES2015) which some developers might not be familiar with, but those principles are easy to catch on.
The structure of the framework is a little bit more complicated, but it also has one big advantage. Because it is based on React – a frontend solution for developing websites – any developer with rudimentary knowledge of React will grasp right away. React flow is hard to understand at the beginning, but after some time spent with this principle you get the idea of it.
In conclusion, there are little to no issues with learning React Native, especially for developers with JavaScript and React in their resumes. But if someone has no clue in these two aspects, they will be able to quickly catch up. I would classify this as low/medium learning curve.
Flutter
Flutter is a tool-kit that uses Dart. It is completely new language that has many similarities with Kotlin, JS and Java, but it also has quirks of its own. It might be a little bit challenging at the beginning, but you can get used to it in no time. Also, docs about moving from previous platform are very helpful and make this process a little smoother.
Flutter is also based on the concept of reactive programming, so I think the same issues apply both to React Native and Flutter. To sum up, I think there is medium learning curve in Flutter because of new language and of course reactive programming.
If I had to call a winner, I’d go for React Native, but I don’t think Flutter is that much worse here. JavaScript is just much a more accessible language to pick up. The fact that you have to learn Dart scares many people.
Development
The feeling you get when using a tool in development is very important. Is it easy? Is it fast? Does it help or constantly throws bricks at us.
React Native
When developing in React Native there is a general vibe that everything takes shape quickly. Hot reload is a great feature that really speeds up the creation process. There is also a huge package base thanks to npm. The only problem I had is that although there are many helpful packages, you have to know exactly what to look for and what it’s called to use it.
Installation, if we are looking at Expo is almost effortless. Depending on the OS, there is just one or a few commands to execute and that’s all. If we look on full installation, which is prefered one, there is more to do. Configuring Android paths, setting Android Studio, for iOS configuring XCode. Also, usage of npm to install react-native is pretty handy, it’s just one step that is a little easier.
Flutter
Flutter also has a similar feel to it. Everything grows fast and vast majority of build in components eliminates the need of looking for them throughout community solutions. Similarly as React Native, Flutter has also hot reload feature.
Thing that I didn’t like was installation process. We have to download Flutter as archive file. No installers, scripts, nothing. We have to do everything by ourselves. Rest of the process is similar to React Native.
To sum up, both solutions are pretty similar, to the point it’s hard to select winner here. Built in components are advantage for Flutter, but third party libraries for React Native even things up. For installation I personally hate to modify my PATH variable by myself, because it almost never ends well and I am always nervous about it. So this is a big minus for me for both of these solutions.
I am opting for this section to be a draw.
Community
With great community rise great tools. It is always good when many people contribute to certain solution, because there is more knowledge and help available.
React Native
For React Native community is huge. I would say that this is what’s rolling the whole concept forward. NPM also helps there. It’s easy to throw own package and share it with others. Most of the cases and ideas are covered by third party packages. There is also huge support on StackOverflow or other forums, that is most important at the beginning. Also because of similarities between React and React Native, many solution from one can be transferred to other. Exactly that behavior makes React Native powerful.
Flutter
Flutter community is still growing, but currently it’s not as big as many would wish. Fortunately there is not a big need for community packages, because of built in widgets, but as always, any library that makes something easier is welcome. Using this tool we have to sometimes do things that we forgot in other languages, because there were libraries making it for us. Looking for help sometimes could be harder, but for most cases it was pretty ok.
There is only one winner in this competition and it is React Native. It’s longer on the industry, so community grew bigger. There are also more people with knowledge to share. I am sure that if Flutter will get enough attention (what is already happening), it will also grow healthy and big developer base.
Performance
Few people pay close attention to performance nowadays, but it is still an important thing to consider. Bigger applications still have to look for optimizations and overall environment performance to perform better.
React Native
The React Native approach involves rendering all the UI as if it was for a native application, but all the logic is performed in a separate thread in JavaScript. This, unfortunately, leads to performance drops. In smaller applications there is hardly any difference, but bigger ones can suffer from stutters and overall lag. Also it’s worth noting that this is not using WebView – it’s a completely different approach.
Flutter
Flutter solution is to compile ahead-of-time to native code. So the difference between an app written in native language and Flutter is negligible. This means that Flutter has access to native modules directly and offers performance close to a native app.
Clearly, this aspect is dominated by Flutter. A different idea of implementation than React Native massively improves the performance.
Conclusion
A comparison of React Native and Flutter shows that both of the frameworks look decent and there is no clear winner. React Native has a bigger community and is easier to pick up, but Flutter offers better performance and documentation. It’s hard to choose one over the other, but I personally would go for React Native. The language and community support are the things that sell this tool for me. But I am looking forward to Flutter’s future growth, because it looks very promising. When working with it I felt that Google had put countless hours to polish it, so I’m quite sure one day everybody will switch.
I am a Flutter guy at heart, but for now I’m staying with React Native.
