When considering what to use for your next mobile application, you'll have to do some research about which frameworks can provide you with the tools you'll need. React Native is a top dog of the industry, while Flutter is a rising star. If you're not sure which one to choose, this post will help you decide which one from React Native vs Flutter is best for you.
Table of contents
Hybrid vs Native
What is React Native?
What is Flutter?
Which one is more popular: React Native or Flutter?
Is React Native easy to learn?
Is Flutter easy to learn?
React Native vs Flutter: key differences
➤ Architecture
➤ User Interface Components
➤ Programming Language
➤ Productivity
➤ Documentation and Community
➤ CI/CD Support
About the project: Dwipper
Comparing with other frameworks
React Native vs Flutter: which one is better?
To learn more about React Native vs Flutter, I've developed Dwipper: a social network app (similar to Twitter) that one can use to post shower-thoughts (Dwipps).
Hybrid vs Native
Full disclosure: you should only look for a hybrid framework when you want your application to work on iOS and Android. Otherwise, you are better off sticking to native development for performance improvement, debugging, testing, and a simple way to release your application. Hybrid development makes the process faster and, therefore, cheaper while increasing the potential number of users. Native development, however, offers better performance and improved data protection.
What is React Native?
React Native is an open-source mobile application framework created by Facebook, released in March of 2015. It's used for both mobile and web applications, by enabling developers to use React and other native platform capabilities. Being built on top of ReactJS and Javascript, it's likely that developers that are used to such languages may find a preference for React Native over other frameworks.
What is Flutter?
Flutter is an open-source UI software development kit created by Google, released in May of 2017. It's used for both mobile, desktop and web applications, all from the same codebase. Based on the object-oriented programming language Dart, those with a preference for those types of paradigms may prefer Flutter.
While Flutter comes with its material design guidelines, one may be inclined to use it. However, there's no inherent problem with not using it, as Flutter was created with a custom brand design in mind. It just happens to have some material design as a bonus.
Which one is more popular: React Native vs Flutter?
To give you some insights on how popular both frameworks are, here’s a graphic displaying the number of questions on StackOverflow that React Native has compared to Flutter.
As we can see, Flutter rapidly gained traction, especially since 2018, in a way that since the end of 2019, StackOverflow has had more questions asked about Flutter than React Native. Flutter became slightly more popular as Google has been investing a lot of time into it.
Is React Native easy to learn?
Since it comes from JavaScript, it’s easier to learn and debug than other languages. It means you have a more straightforward approach to development. However, that ease comes at the cost of many errors people may find in their code, in runtime, because JavaScript is not a strict language. To avoid this, Facebook, React Native’s creator, suggests Flow, a type checker. It allows the inclusion of annotations on JavaScript to infer types and identify undesirable behavior, that is used to mitigate this issue by identifying problems as the code is being written.
Is Flutter easy to learn?
In a vacuum, Flutter is not as easy to learn as React Native. Nevertheless, a background in either Dart or any other Object-Oriented Language will make your life easier. Due to its increase in popularity, finding help online is quickly done and hardly any trouble.
React Native vs Flutter: key differences
Architecture
How does React Native work?
React Native offers components equivalent to React’s web counterpart. Span in React is Text in React Native, which would be equivalent to UIView in iOS and TextView in Android.
Two threads are intrinsic to each React Native application:
- The main thread runs a standard native app, handling the display of elements and processing user gestures.
- The other executes all the JavaScript code in a separate engine, either JavaScriptCore or V8, which deals with the business logic of the application. It also defines the functionality and structure of the user interface.
These threads never communicate directly or block each other.
How does Flutter work?
The rough equivalent of iOS’s UIView and Android’s View, in Flutter, is a Widget, which is somewhat different from the counterparts mentioned above. For starters, they have a different lifespan: they are immutable and only exist until they need to be changed. When that happens, Flutter’s framework will create a new set of widget instances. In comparison, views in iOS and Android are drawn once and only redrawn when setNeedsDisplay() and invalidate, respectively, are called.
Having such a reactive framework allows the developer to brush aside the need to get references to the widgets, facilitating the structure for all backend, with a single language.
User Interface Components
UI Components are crucial when developing cross-platform mobile applications. Therefore, both frameworks must provide smooth and easy API access to native modules. In this regard, React Native has fewer components than Flutter.
On the one hand, React Native is very dependent on third-party libraries to obtain native modules. On the other hand, Flutter has UI widgets integrated; thus, the developer does not have to search for third-party libraries.
Programming Language
React Native uses JavaScript and Flutter uses Dart programming language. JavaScript is a dynamically typed language that has been extremely popular for years and it is often used with React, as well as with other JavaScript frameworks. Since many developers are usually familiar with JavaScript, adopting React Native is pretty straightforward.
Contrarily, with Flutter, developers necessarily have to learn Dart, which is not a very used language. However, it is not a puzzle either, considering that its syntax shares many similarities with Java and JavaScript.
Productivity
Flutter has a hot reload, meaning that the developer can directly inject new code into a running app, which can save tremendous amounts of time and speed the development process. Plus, to avoid losing anything during reload, hot reload also maintains the application’s state.
React Native was extremely aware of the success of this feature among developers and its 0.61 version was launched with a “fast refresh” feature that corresponds to the “hot reload”. “Fast refresh” further allows the developer to view changes made in the app without having to recompile it.
Another great advantage of using React Native is that it has a big community of developers who have contributed with many libraries. Those libraries can be utilized to build blocks and consequently speed up the development process.
Documentation and Community
Flutter has a very comprehensive and extensive documentation, providing developers with detailed guides and tutorials. Moreover, Flutter additionally includes the Flutter inspector and debugger to help developers throughout the app development.
React Native’s documentation is also very rich and provides many tutorials, libraries, UI frameworks, articles and other materials. Further, it benefits from having a large community and being part of the React family.
On the opposite , Flutter does not (yet) have such a massive community of developers, considering that it is still a fairly young framework. Nevertheless , it has achieved a very respectful size, counting on a lot of support from fellow developers, and it is increasingly becoming more popular.
CI/CD Support
On the one hand, React Native demands a third-party solution to automate delivery and deployment, which means it does not provide developers with a CI/CD solution for Google Play Delivery or App Store.
On the other hand, Flutter allows the developer to use the command-line interface (CLI) to build and deploy Android and iOS apps. Nonetheless, it may also require third-party solutions if advanced automatizations are needed.
About the project: Dwipper
As part of my learning experience, I worked with both frameworks to develop an application called Dwipper, where users post their shower-thoughts as Dwipps.
The app had the following screens:
- Basic login, registration and forgot password
- All Dwipps, to see everyone's Dwipps
- My Dwipps, where you can see all Dwipps you posted
- New Dwipp, to write and post a Dwipp
- Change password, where the user can change their password
- Logout, where the user can logout
To me, this was a great learning experience. Flutter felt more intuitive, like how you work with widgets felt simpler than components in React Native. The only real issue we initially had was communicating with the app's backend. It wasn't something directly related to the framework itself, only a matter of figuring out what and how to send.
React Native, on the other hand, was slightly more troublesome, perhaps because I had no prior experience with JavaScript. The most frustrating part was working out how to set up the navigation between the login part and the "real" part of the app. Having to install a new component each time we needed something for a specific task wasn't very pleasant.
Comparing with other frameworks
Flutter vs Ionic
As Ionic was initially released all the way back in 2013, it lags behind Flutter slightly. If the developer isn’t sound in JavaScript, CSS and HTML5, the ramp up time for proficiency will cost time and money in learning the framework, while Flutter has a smoother learning experience. Being able to hot reload for quick experimentation allows for faster development as well.
React Native vs Ionic
When we talk about React native vs Ionic, we can say that Ionic has great documentation and its tools are well understood by web developers. But since it’s built on top of a browser, the code can’t easily access native features.
React Native, on the other hand, has a big community backing it up, which leads to more issues or problems being solved by other developers online. React Native is translated into native code, being able to reach 60 frames per second easily, as if it’s a native app. However, it is backed by a big company, meaning that any new tools will only be released according to said company’s needs.
React Native vs Flutter: which one is better?
At the end of the day, when asking yourself which one is the best, Flutter vs React Native, it all comes down to personal preference.
Someone with more knowledge and experience in JavaScript or React will most likely prefer to use React Native, since the transition is rather smooth. On the other hand, a developer who enjoys the Object-Oriented paradigm will most likely prefer to use Flutter.
In case you need to develop a mobile app more complex than Dwipper, you might consider using Flutter since it's slightly more popular than React Native right now. That popularity might be of use when bug-hunting your app. More people means a wider variety of issues, which increases the probability of finding someone with the same problem as you or having it solved by another community member who already encountered it.
Found this article useful? You might like these ones too!