With the ecosystem of mobile development continuing to expand, cross-platform frameworks have become more popular. But how do you choose between frameworks? In this article we will be looking at two frameworks, Flutter and React Native, and weighing up the pros and cons of the two.
What is Flutter?
Flutter was created by Google and first announced at the Dart Developer Summit in 2015. The first alpha release was in May 2017. Flutter is an open-source mobile SDK created for Google's needs to fulfill rapid development cycles without compromising on the performance of native applications.
Developers predominantly use the Dart programming language to create applications with Flutter. It features reusable UI components called Widgets which can be shared between both iOS and Android. When working with Flutter you are provided with many Widgets which are ready to use but these are not really adaptive. This means whilst the widgets will render on both platforms, they will look the same. If you are creating an application with platform-specific designs in mind you have to make these alterations manually. Object-oriented programming is embraced by Flutter. Whilst still quite new the ecosystem is rapidly growing and as such many core packages are available to assist developers. The documentation around the framework is good as is the community. The entire application is compiled using the arm C/C++ library which results in a very good native performance because it is closer to a machine language.
What is React Native?
Now that we have some familiarity between the two frameworks let’s look a bit more deeply at the features of the two.
Features of Flutter
- Compilation: For development builds Flutter uses JIT (just-in-time) compilation. For production builds it uses AOT (ahead-of-time) compilation which promotes better performance.
- UI: Flutter uses widgets that you can think of as a piece of UI such as a button or a modal. The widgets are customizable and reusable. Flutter provides both Material Design (for Android) and Cupertino (for iOS) widgets and apps look the same across both older and newer devices. Creating different designs on a per-platform basis will require extra work.
- Documentation: Excellent - Google has put a lot of effort in here
- Hot reload: This is supported which means development can occur in real time without having to rebuild the entire application. This will save time during the development cycle.
- Multi-platform: The application uses one code base whilst the app can be built for both iOS and Android.
- Performance: The app is compiled using the arm C/C++ library and being closer to a machine language it results in very good performance. Where React Native uses a bridge concept Flutter uses the Skia graphics library and the UI is delivered at 60fps (frames per second).
- Open source: The framework is open source and features a large developer community supporting it.
- Testing and debugging: Debugging features are provided so tracing and resolving issues is an easier process. Whilst both platforms need to be given individual attention during the QA process, having the same app on both platforms reduces some of the complexity here. The same automated tests can run across both platforms so the QA demands are reduced.
- Architecture: It is possible to use Redux/Flux as with React Native. Another popular architecture is the BLoC (Business Logic Component). This relies on business logic being placed in business logic components and being removed from the presentation layer of the application.
Features of React Native
- Components: React Native provides several core components you can use within the app and you can also create your own. The components are adaptive which means they can be individualized for the different platforms.
- Hot reload: As with Flutter this time-saving feature means that development can occur in real time.
- Multi-platform: One codebase is used but the app can be built and delivered on both iOS and Android.
- Open source: A mature and large community exists.
- Testing and debugging support: Developers are provided with a developer menu that features debugging options. Flipper, which is a platform for debugging React Native applications, was also released in 2020. As with Flutter, an in-app developer menu exists which offers several debugging options. For end-to-end testing, a third-party framework such as Detox needs to be used.
- Architecture: Flux and Redux are the two main patterns. The focus is on the application data being stored in one place which is referred to as a store. Unidirectional data flow is used which means that data can only move in one direction.
- Documentation: There is good documentation and a wealth of extra resources available.
- Packages: A large amount of packages exist although with React Native having been around longer some of these are no longer maintained.
- It is worth mentioning Expo which is a framework comprising a collection of tools that can make building React Native applications dramatically faster.
Comparing React vs Flutter
Whilst the performance in Flutter may deliver greater stability in its UI, if your app design requirements are focussed on platform-specific designs Flutter may come with some restrictions because you will not be able to reuse some of the components between iOS and Android.
React Native does offer a greater freedom of choice for development but this wealth of options can both be a blessing or a curse, especially if time is of the essence as it so often is.
So how do you decide which one to choose?
Of course, there isn’t one simple right or wrong answer here. Both frameworks have their advantages and disadvantages. In reality, the decision will likely entail consideration based on budget and timeline, the devices that you need to support, and the developer and monetary resources available.
If your developers are already familiar with Dart, you have a shorter timeline for the app release, or if app performance is a primary concern Flutter may be a better choice.
Whichever choice you do end up making, you can be confident that both Flutter and React Native will continue to be significant frameworks in the cross-platform field, so it is up to you to decide which one aligns best with your short and long-term goals.