Flutter is a technology that is currently causing a stir in mobile development. It has become more often chosen for creating new applications, and some developers even completely rewrite old applications with Flutter (!), in fact, without proper justification.
I spent several months with Flutter on a production project, and I want to share my experience comparing it to React-Native, with which I have quite a lot of experience.
I would like to elaborate on what you need to consider if you are moving to a cross-platform native approach and want to understand which is best for you — Flutter or React-Native.
Typically we have 3 main options for a mobile app:
- A fully native Kotlin / Swift app
- A full web app (PWA or WebView container)
- Somewhere in between.
We call the last variant Cross-Platform Native because they are not web apps, but Native Apps, which nevertheless take a cross-platform approach.
Both technologies provide similar capabilities, but using Flutter is a bit risky now due to its immaturity, lack of libraries, and not a very large community yet.
📑Criteria for evaluation
I will not delve into the essence of technologies but will evaluate them in terms of their application in projects and their capabilities in general. I looked at the following aspects:
- Build & Deployment
- Availability of libraries & widgets
- Tools & testing
- Developers experience
- Network capabilities
- Media capabilities
1️⃣ Build & Deployment
Both platforms use mobile operating system tools for building: Gradle and Xcode build for Android and iOS, respectively. In this regard, there is no difference between them and native applications.
There is a difference in build speed though. This is not very important for development, but it is critical during CI build and application archiving in Xcode. I don’t have exact numbers, but my “Hello, World” application in Flutter builds approximately 3 times faster than in React Native. The reason is that Flutter is shipped as the iOS Framework, and React Native is recompiled from source.
✅ React Native: it uses NPM packages to include app dependencies, including React Native itself. Besides NPM, you can use Yarn to install and manage your dependencies. Dependencies that require Kotlin / Java / Swift / Objective-C code are bundled using Gradle modules and CocoaPods packages. React Native includes an auto-linking feature that avoids manually modifying the Gradle and Podfile.
✅ Flutter: in turn, it uses the dart package manager, also known as the pub tool. Packages are supplied as source code and are compiled with the main application. As in RN, these packages can have their own dependencies, but in this case, you may need to manually add these dependencies to the Gradle and Podspec files, although in practice I personally have not encountered this. You can also use unpublished packages by pulling them out of a folder or git repository.
The architecture described above means that you need to convert or compile the generic code, include it in the final apk / ipa, and submit the result to the app store. The process might look like this:
However, there are still differences between React-Native and Flutter.
❌ React-Native supports Code Push technology to push JS code updates without re-publishing the apk / ipa due to the fact that React Native runs the JS code bundle at runtime and can replace it. In fact, this can be considered a kind of security problem.
✅ The Flutter team, taking this into account, decided not to support this feature at all.
2️⃣ Availability of libraries & widgets
Third-party libraries and components
✅ React Native has been on the market for over 5 years and has tons of libraries for a variety of occasions, from push notifications, video playback, and content components, to the camera (including Firebase ML Kit) and Apple HealthKit and Google Fit integrations. There is a carefully curated list of high-quality third-party components that you can use in your application called awesome-react-native.
Have something that belongs under "Buzzing"? drop me a line: dotan-at-paracode.com. Conferences dedicated to React…
✅ React Native also benefits greatly from being based on React and having the ability to use libraries built for React like Redux or Axios, or bring modern features like React Hooks.
❌ Flutter has been around for only 2 years (!), nevertheless, it is becoming more and more popular every day, which certainly motivates enthusiasts to develop libraries for it. There are already some navigation solutions, sliders, UI components, Firebase integrations, and so on. However, many possibilities are still at the basic stage. There is also a carefully curated list of flutter libraries called awesome-flutter. It can be seen that this list is 3 times smaller than that of React-Native. Of course, this is not an indicator, but it gives an idea of the future development of the technology.
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more. - Solido/awesome-flutter
Also, Dart is rarely used outside of Flutter, and Flutter itself is not based on any other framework library, which also doesn’t help with out-of-the-box components or approaches.
✅ React-Native has a large library of UI components: calendars, date pickers, buttons, material components, SVG support, and more.
❌ Flutter comes with Material and Cupertino components out of the box. But the UI library is in its early stages. You may not run into a lack of components, but the number of component libraries for React Native is much larger. This will change in the near future as more and more developers work with Flutters.
3️⃣ Tools and testing
It seems to me that both technologies are approximately equal. Both stacks include:
- Code style and quality tools (eslint, tslint, prettier vs dartanalyzer).
- Unit tests (with jest test and Flutter test).
- Component tests (snapshots, enzyme tests and widget tests, golden tests).
- e2e testing (Detox vs e2e).
Performance should be considered from several points of view:
- Rendering performance
- Native Interop
- Startup time
✅ Flutter, on the other hand, renders everything using Skia’s own 2D engine, avoiding any special connection between views and other code. This makes rendering incredibly fast. It may have issues with iOS, but this issue should be addressed with the recent support for Metal.
The Flutter Engine will migrate to using the Metal Rendering API instead of OpenGL on iOS. A Flutter user interface is…
Now I can’t say anything, as this requires micro benchmarking of both solutions on different devices. This is a topic for a separate article.
❌ React Native has a problem with this. In general, launch times are a common problem when striving to perfect your mobile app. React-Native has to load the virtual machine JS and then the JS code. On Android, this gets tricky. React-Native version 0.60 brings support for Hermes: a new experimental JS virtual machine for Android that is designed to load quickly.
✅ Flutter seems to have already solved this problem.
5️⃣ Developer Experience (DX)
npx react-native run-iosor through Xcode, because running through WebStorm was very unstable. Also, from time to time, the packer himself fell. The typical way to debug is to launch Google Chrome and use its console, which is suboptimal
✅ Flutter has a great DX. Since this is a Google product, it allows you to integrate the IDE (Android Studio, but I prefer IntelliJ Idea as more stable) right away with the toolbox. Fast loading is almost the same as Fast Refresh, and even better. Autocomplete works great as Dart is strictly static and typed, which creates stability support for the IDE. Here it should be noted that Dart out of the box provides a lot of freedom in terms of types, you can not write them at all, so it is recommended to tweak it in your project.
Flutter also shows the causes of errors, so it’s easy to fix them. The debugger in the IDE also works very well. VSCode also supports Flutter but lacks debug and VCS functionality
6️⃣ Networking capabilities
❌ Flutter only has built-in HTTP(s) and WebSockets clients. The Axios client is under development (I am even thinking of building my own, say, “fluxios”)). JSON parsing (of course, if you don’t use code generation) must be done manually. Open API support exists, but it hasn’t been updated for 15 months. There are Dio and Chopper packages to make it easier to work with HTTP, and there will likely be more.
Unfortunately, as it turned out, using code generation for Open API for Dart causes certain problems, which you can read about here.
7️⃣ Media capabilities
Both technologies are highly dependent on the underlying platforms. No Android / iOS framework itself does anything in terms of media, but rather uses the media components available on the system. The only question is how well the platform’s capabilities are supported.
✅ React Native supports both audio and video playback and recording. You can, for example, display videos in different formats (basically all of them are supported by ExoPlayer (Android) and AVPlayer (iOS)), display controls for searching, looping, etc. It is also possible to display SRT and VTT subtitles for video out of the box. This functionality comes with components such as react-native-video, react-native-video-controls, and others.
❌ Basically, Flutter only has a video_player package for playing videos. Its version 1.0 is still pending and can display all video formats provided by mobile OS, but subtitles are only SRT, VTT subtitles are not in the roadmap. VTT subtitles are however supported in a separate package. For basic controls, you must use the Chewie package.
The video player for Flutter with a heart of gold. Contribute to brianegan/chewie development by creating an account on…
❌ React Native is tied to js and an application based on it contains a JS bundle. But you can always extract it and understand the logic of the application, or change it. This looks like a serious problem.
✅ With Flutter, it is much more difficult to change the application, since the Dart code is precompiled into binary code for the target architecture.
As always, the choice depends on the non-functional requirements, but I would recommend considering when doing this:
- Lack of libraries for Flutter.
- Dart training for new developers, since there are no / few such developers on the market.
- Incomplete media capabilities for Flutter.
- Longer startup times for React-Native.
- Lower security for React-Native.
If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.