Introduction to Flutter
Flutter is a portable UI toolkit that was built by Google to build natively-compiled apps across mobile, web, and desktop from a single codebase. The programming language used to build this platform is Dart. Some of the apps that are developed in Flutter include Xianyu app by Alibaba, Hamilton app for Hamilton Musical and Google Ads app.
Popularity: 68,000 Stars on Github (June 2019)
Reference Link: https://flutter.dev/
Introduction to React Native
Popularity: 78,400 stars on Github (June 2019)
Reference Link: https://facebook.github.io/react-native/
Flutter v/s React Native
User Interface
New and old version apps that are built using Flutter have the same up-to-date operating systems. Since, it has only one codebase, the apps look and behave identically in Android and iOS.
Flutter has two types of widgets which conform to specific design languages: Material Design widgets implement Google’s design language of the same name; and Cupertino widgets imitate Apple’s iOS design. Hence, the Flutter app looks and behaves naturally on both the platforms imitating their native components, for instance, a button will have the same look and feel on iOS, as well as Android.
Reference Links:
https://flutter.dev/docs/development/ui/widgets/material
https://flutter.io/widgets/cupertino/
Flutter uses the Skia Graphics Library, which means that the view changes each time the UI is redrawn (be careful so as not to cause redrawing of those elements of the view whose data has not changed). Most of the work is done on GPU (graphics processing unit); that’s why Flutter UI is smooth and delivers 60fps (frames per second).
Reference Link: https://skia.org/
On the other hand, React Native uses native components. The app’s components will get instantly upgraded after any OS UI update. In order to give the same look to the app across platforms and older versions, the developer would need to consider using third party libraries which will enable you to use Material Design components, in place of native ones.
Sharing Codes
Currently, Flutter uses a single code base between iOS and Android on mobile. Although, the long-term vision is to allow developers to write one code for desktop, mobile and for the web. Flutter for web (only preview available) and desktop are currently in the nascent stages.
On the other hand, React Native have select libraries that allows the developers to use the same code to build iOS, Android, web, and Windows10 apps. They can also extract shared code in mobile, desktop, and web apps, to a separate repository; treat it as a separate project; then inject it in the same way as another dependency. Hence, the developer can just focus on writing code for a specific platform and be assured that it will be compatible with the other.
Time-Frame to Develop the App
When developers make changes to the codebase in Flutter or React Native, they are immediately reflected in the application. This is the so-called Hot reload feature, and it typically takes (milli-)seconds for changes to show. Hence, developers can add features, fix bugs, and experiment with new ideas in an instant. It is also is very handy when it comes to developing designer collaboration.
From the developer’s perspective, Flutter offers a more dynamic and faster app development. React Native uses bridge and native elements which may require separate optimization for each platform which makes it longer for the developer to make it market-ready.
Performance
Flutter employs the C/C++ library, which is much closer to machine language and delivers superior native performance. All the components, including the UI, are compiled using C/C++.
Whereas, React Native compiles UI components using their native equivalents, and the JavaScript acts as a bridge that connects to each native module and performs the required actions.
The performance of Flutter is more efficient than that of React Native.
Competitive Advantages
Flutter offers:
- Rich widgets which enhance the look and feel of the app
- Popularity and a growing community base
- Easy to understand documentation with strong support from the Flutter team
- Fastest development time
React Native offers:
- Stability (it has been in the market for almost 5 years) and reliability
- Successful and known market players such as Facebook and Instagram
- Code can be reused for both, web app and desktop app development.
- Mature and vast community
- Plenty of tutorials and libraries makes it easy for the developer to understand
Drawbacks/Limitations
Both, Flutter and React Native apps have their own limitations when it comes to incorporating certain elements in the app.
Flutter doesn’t allow:
- The use of 3D touch (although, it is in the pipeline for future development)
- Design elements to be platform specific
- The app to have multiple interactions with an OS or rare native libraries
- Significant usage of phone hardware, in case the app needs a minimal UI
- To create an instant (small-sized) app
Native React doesn’t allow:
- Less common, or ultra-specific tasks (like calculations) in the background
- Custom communication via Bluetooth
- To create an Android app only
The Future – Flutter or React Native?
Both, Flutter and React Native are constantly trying to improve and refine the tool. Both these platforms have their own competitive advantages and drawbacks, so they are both here to stay!
Flutter is trying to make improvements – using a single codebase to create not only mobile applications but also web and desktop apps. They are also working on implementing the use of 3D touch.
React Native is currently focussing on a large-scale re-architecture of the technology. They have included Support for the community to create an open environment. The developers will be able to suggest changes to the framework’s core functionalities through an RFC process that uses a dedicated GitHub repo.
Reference Links:
https://github.com/react-native-community/discussions-and-proposals/issues/
https://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap
If you have any further doubts or questions on Flutter or React Native frameworks, you can contact the App Scoop mobile app developers or the Vancouver app development Team: https://app-scoop.com/contact-us.html
