Recently, some students in the “Flutter Study Room” often ask, what is the difference between Flutter and React Native? Since Flutter is a cross-platform mobile development solution for Google’s React Native, there are many parallels between the two.
Of course, since the launch of Flutter is about two years apart and Flutter is still in its infancy, the comparison between the two is not equal at this stage. Perhaps in another two years, when Flutter has grown up, the comparison will be more reliable. Nevertheless since have doubt, so here arrange a few data on the net at present, will do simple contrast.
Let’s take a look at the comparison table:
Below, we expand a brief explanation according to this comparison table.
UI construction
The two platforms differ greatly in the way their user interfaces are built.
React Native ultimately renders the interface with Native iOS or Android components. In some cases, we can customize components using NativeModules, referencing Native components via NativeModules on the JS side.
Flutter has its own set of widgets and uses its own rendering engine to draw the interface. The Material Designed Widget is used on Android and the Cupertino Widget is used on iOS.
The way That Flutter builds its UI is still mixed. Its proprietary widgets complement the custom UI, and the Flutter team promises to enhance interoperability with Native components. However, because Flutter is still in its infancy, its Cupertino library lacks many basic components. React Native is already mature in this area.
Native vision and feeling
React Native and Flutter both promise the feel and feel of Native components. In this regard, there have been many positive reviews of React Native, but few, and some of them negative, reviews of Flutter.
Of course, the Flutter development community still needs to accumulate more best practices to provide a better cross-platform interaction experience. However, the React Native community is mature now, and the Flutter is the counterpart of React Native, so we can refer to the development of the React Native community.
performance
Technically, Flutter should run faster because Flutter doesn’t have a Javascript Bridge to interact with local components. Does that mean that the Flutter is necessarily better than React Native? The practical lesson: No.
React Native apps currently perform well in terms of performance, even comparable to Native apps. React Native runs smoothly for the most part and has a good solution for many challenging tasks (60 FPS).
Of course, the Flutter targets 60 FPS.
maturity
React Native was launched in 2015 and has matured over the past two years, although no version 1.0 has been released yet. The React Native community is also mature and contributes a large amount of open source code to the React Native community.
Flutter was released in May 2017, and the Beta version was released in March this year. The community has just grown, especially in China. So it will take time for Flutter to become a widely adopted solution for cross-platform mobile development.
JAVASCRIPT VS DART
There is no doubt that choosing between programming languages is a huge deciding factor. In a sense, Dart and Javascript are not of the same magnitude.
As of 2018, JavaScript is the most popular language on GitHub. From the front end to the back end, from THE PC to the mobile, Javascript is showing its power. Dart, which I had never heard of before, was not popular outside of Google.
A joke: Why did Flutter choose Dart? Since the Dart team is right next door to the Flutter team, feel free to ask questions. Of course, the Dart language itself is type-safe, expressive, and standards-friendly for mobile developers, especially those with React Native and Javascript skills, with a relatively flat learning curve.
Why does a Flutter choose Dart? http://www.infoq.com/cn/articles/why-flutter-uses-dart
Industry use
React Native was launched by Facebook. It was first used in Facebook’s own projects, and then many mainstream applications adopted React Native solutions, such as the following:
Many domestic companies have also done a lot of studies on React Native and produced corresponding outputs, such as some cross-three-terminal technologies developed based on React Native.
Flutter, on the other hand, has little to offer. One application of Hamilton, is now the most mature application, application of Flutter open source in China also developed based on the Flutter a client, and in making open source on https://github.com/yubo725/FlutterOSC, You might want to look at it.
The production efficiency
A big part of React Native’s popularity is its productivity. One of the goals of Flutter is also efficient development. In addition to the cross-platform advantages, there are some other productivity features that we can compare.
Hot Reload
If you’re a Native developer, you probably have no idea how efficient Android and Xcode are. Maybe change a few lines of code, start compiling, and then go get your coffee, and come back just right, and it’s running, or worse. Once you’re running, you have to go through the process all the way back to the page you’re debugging.
This is one of the advantages of Flutter and React Native: they both support Hot Reload. After changing the code, you only need to reload the resources, and you can keep them on the same page, or even keep the original form input.
Configuration and Settings
Compared to React Native, Flutter is simpler to set up and configure. The Flutter Doctor can automatically check for system problems, making the whole setup process more straightforward.
tool
React Native’s IDE tools are already available, so the Flutter doesn’t have much of an advantage in this regard. Flutter does well, however. It supports IntelliJ, Android Studio, Visual Studio Code, and various related plug-ins are in development.
Hardware related apis
React Native now provides a variety of hardware-related apis, such as Wi-Fi, GEO, cameras, sensors, and other third-party solutions that are relatively mature. The problem with React Native, however, is the graphics part. If we want to customize some graphics-related components, we will inevitably involve Native code.
Flutter has its own rendering engine, allowing for more flexibility in customizing various graphics components. Meanwhile, in addition to Bluetooth and NFC, other hardware-related apis are also evolving. In this respect, Flutter may win out.
Life cycle management and optimization
Lifecycle management is also a big topic for the front-end domains. React Native does this better, and there are plenty of state management frameworks for React Native. Flutter currently only inherits stateless and stateful components using widgets, and has no tools to explicitly store application state. However, I believe that various frameworks will continue to emerge.
The code structure
The structure and layout of Flutter code to build a page is a bit confusing here. React Native uses JSX to describe the structure of a page declaratively, while separating the structure and style of the page, making it more comfortable to develop.
community
As a newborn, Flutter has gained a lot of attention in the developer community. Up to now, Flutter has a 24K star on Github and a number of related issues on StackOverflow. Of course, compared with React Native, Flutter is still young.
But every new technology has a growth story, and it has its supporters and detractors. React Native walked the same way that Flutter walked. So give the Flutter some time.
Documentation and Roadmap
Neither The Flutter nor React Native has a clear roadmap. However, there are a lot more active bloggers React Native http://facebook.github.io/react-native/blog/, there will be some update every month. And Flutter also maintain a milestone in the https://github.com/flutter/flutter/milestones page, here you can know the progress of the Flutter information.
Documentation, however, gives Flutter an advantage. The documentation is clear. React Native documents feel like they are only written for React developers. If you don’t understand React Native documents, especially the description of many components is not very detailed. I hope this can be improved later.
summary
If there is a comparison, React Native is the clear winner at this stage. But I think the comparison is more like that between adults and children, because Flutter is in its infancy. So leave the judgment to time.
Of course, there are some potential problems with Flutter that need our attention:
- Dart is still too poorly accepted for Javascript;
- The industry’s attitude towards Flutter;
- If you’ve read about Google Graveyard, you might think twice before adopting Google’s new technology.
Finally, the “small set” team in making opened a repo, to collect domestic development resources on Flutter https://github.com/awesome-tips/flutter-resources, welcome everybody to maintain together. At the same time, we opened a wechat group “Knowledge Collection · Flutter Self-Study Room”. Interested friends can add Coldlight_HH (Nanfengzi) or Bob5201215 (ZB) and invite you to join the group. Please add “Flutter study room into group “when adding friends.
reference
- Flutter vs React Native comparison for Q1 2018
https://agileengine.com/flutter-vs-react-native-comparison/ - Flutter vs React Native — What Would You Prefer for Your Next Hybrid Mobile App?
https://dev.to/vipinjain/flutter-vs-react-native--what-would-you-prefer-for-your-next-hybrid-mobile-app-2i3m - Flutter vs React Native – What You Need To Know
https://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3c90b
Knowledgeset is a team official account, mainly targeting at the mobile development field, sharing mobile development technology, including iOS, Android, applets, mobile front end, React Native, WEEX, etc. Original articles will be shared every week, and our articles will be published on our official account. Stay tuned for more.
