Introduction

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?

React Native was created by Facebook/Meta and initially started as part of an internal hackathon project with the first main release in March 2015. The framework features code that can be shared between both iOS and Android but when creating applications with React Native, developers predominantly use JavaScript. For many who have worked with React to build web applications or development teams of JavaScript developers, this makes for an easier transition.

Under the hood, React Native renders using the real native UI components as opposed to web views which provides a pleasing user experience. This is achieved by invoking the native rendering APIs in Objective C and Java. Combining the native code performance with the ease of development that React provides, the idea behind React Native is to have the UI for the individual platform wrapped inside of a JavaScript bundle. If you already have a native application you can still use these components whilst transitioning to React Native.

The initial architecture featured a bridge under the hood between the application and the target platform enabling communication between the two. From version 0.68 a new architecture was released which uses a mechanism called the JavaScript Interface (JSI). This removes the need for a bridge and instead uses a layer between JavaScript and a C++ core. 

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.
  • Performance: Both Flutter and React Native aim to achieve 60fps (frames per second). React Native uses JIT (just-in-time) compilation, which means at runtime the JavaScript code is converted into native code. The bridge concept in React Native can slow down performance but optimisations are available. The 5+ years since being released have also enabled React Native to prove its stability.
  • 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.
  • Language support: Whilst it is likely most of the code will be written in JavaScript you can create native modules using native languages such as Swift or Java. This is an extremely powerful option but it will also make testing the app more difficult and the complexity of the app will increase.
  • 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

Under the hood, the main difference between Flutter and React Native is that Flutter compiles its language of Dart into native code which means it stands out for its performance. React Native on the other hand used a bridge to communicate between JavaScript and the native APIs. The recent architecture focuses on JavaScript holding a reference to host objects on which methods can be invoked.  Depending on the complexity of the application and what optimizations you make this can impact performance.

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.

As Flutter has continued to mature so has the community support surrounding it and there are a wealth of packages available to assist with development. Whilst Dart may not be as popular as JavaScript, Google has created solid documentation around Flutter and it’s clear it is not going anywhere. React Native equally has a solid community of support and documentation. 

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.

On the other hand, if the design needs are more focused on a native look, if your developers are more familiar with JavaScript and/or React, or if you need to have a smaller-sized app then React Native 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.