Cross-platform Mobile Development: Flutter Vs React Native Development Comparison and Performance Checks

Cross-platform Mobile Development Overview, Flutter Vs React Native Development Comparison and Performance Checks

In the left corner is React Native from Facebook, on the right is Google’s Flutter. What stands behind these two popular frameworks? Why are they popular? Which one is more effective? How can Flutter be better than one of the already well-established technologies such as React Native?

Let’s check a short frameworks overview:

React Native vs Flutter Technology Overview Comparison.

Dashdevs team keeps up on technology trends and constantly improve our expertise. We’ve noticed the gaining popularity of Flutter and got caught by its promising potential. For that reason, we assigned a riveting task for ourselves — to find out how to make the right decisions in favor of one of the technologies and looked at this topic from the product owner’s point of view.

But first things first, what’s React Native?

What is React Native?

React Native is an open-source mobile application framework based on JavaScript. It was released in 2015 by Facebook.

1.What’s React Native created for?

For building natively rendering mobile applications for iOS and Android.

2. What React Native has under the hood?

JavaScript that runs natively on mobile platforms.

3. What are the cool apps made with React Native?

Facebook, Skype, Instagram, Airbnb (partially), Pinterest, SoundCloud.

4. How long does it take to start coding with React Native?

To switch to React Native, it may take for developers from 4–5 days depending on learning capabilities, background and the complicity of the project.

To dive smoothly into RN, programmers need to be familiar with JavaScript and React.

3 cores of React Native:

React — a Framework for building web and mobile apps using JavaScript.

Native — you can use original UI components controlled by JavaScript.

Platforms — React Native supports iOS and Android platforms.

Things we need to know about React Native:

  • Creates apps with a native look and feel for Android & iOS using the JavaScript framework. It supports almost every IDE, and if compared to native development, over 90% of the code can be reused, and over 70% — shared between the platforms.
  • Comes with many built-in components: the equivalent to a component is called a widget in Flutter, and there are many more widgets in Flutter than components in React Native. Anything a bit more advanced in React Native will likely have to be built by you, or you can always use npm library, as there are plenty of them.
  • Uses standard web technologies like JavaScript and JSX (CSS/HTML) howbeit your application looks fully native.

Strengths of React Native:

  • Open source and free: when a developer faces some issues, there’s a high probability of getting help from other developers and the community).
  • Easy to build part of your app in React Native, and another part — using the native code directly.
  • Has live updates: no need to go through the whole app store update cycle; just send the updates to the user’s mobile phones.
  • Wraps the fundamental native components, giving you the native app performance using the APIs of React — there’s no time wasting for recompiling.
  • Combines with components written in Swift, Java, or Objective-C: it’s quite simple to drop down to native code if you need to optimize a few aspects of your application.
  • Promises excellent user experience due to numerous UI components, even better than its growing opponent Flutter.
  • Gives flexibility of creating custom components. If there’s a need in creating an entirely new element — a developer can write platform-specific code.
  • Saves the developers time significantly via the Hot Reload feature.
  • Works separately from the main UI thread, which allows the application to maintain high performance without sacrificing capability.
  • Gets regular updates: new useful components are added, but you need to update your app regularly.
  • Obtains a significantly big community and the team behind it: it’s easy to find answers to almost any question/concern and an access to a plethora of courses.
  • Easier to switch to if a developer is familiar with web development: previous experience in native development (especially Android, since usually there are fewer problems with iOS) will gives him the understanding of all the basics.

Weaknesses of React Native:

  • Allows the code reuse but is restricted to a few basic components: it takes quite a lot of time to style the developed app.
  • Has somewhat disorganized and clumsy documentation due to its open-source nature.
  • May cause issues with rendering large datasets, since React application runs with the help of JavaScript bridge; though, it’s possible to improve the speed of the app with third-party libraries.
  • Has a relatively large size of app, even considering its simplicity, but some improvements regarding this issue were already made in recent updates.
  • Will lag if not follow the process specification of bridging implementation in the app, but there’s almost always a solution for this type of limitations not to impede the development.
  • Requires separate optimization for every platform, which may cause more extended and tiresome development process.
  • Won’t be “really native,” and there can sometimes be a noticeable contrast in performance, though the benefit is that teams or developers without expertise in mobile development can transfer their web-related skills and be able to create a mobile app.
  • A perfect fit if you plan to deal with complex interactions or something that needs to be highly performant.

What is Flutter?

What is Flutter?

Flutter is a framework for cross-platform development, which was developed and released by Google in 2017.

1. What Flutter has under the hood?

It’s based on an object-oriented Dart language (released in 2013). Although Dart is a functional programming language relatively easy to pick up, it isn’t as popular as JavaScript (though it’s considered to be created as an alternative to JS).

2. What’s Flutter created for?

By introducing Flutter, Google tried to resolve the issue of cross-platform app development, which otherwise has always been a hurdle for the app developers and this issue is that it was necessary to code separately for each platform.

3. What are the cool apps made with Flutter?

Xianyu (Alibaba), Hamilton, Google Ads, and Reflectly.

4. How long does it take to start developing with Flutter?

Due to the fact that the developer will need to learn Dart language first, it may take approximately one-two weeks to start coding your first app on Flutter depending on professional skills and previous background.

Things we need to know about Flutter:

  • It’s the only mobile SDK that provides reactive views without requiring a JavaScript bridge. The framework is in some way an equivalent of the game engine but for apps.
  • The UI of the developed app is much more lightweight if stack up against the React Native’s UI.
  • In Flutter, everything revolves around the term widget. A widget is a high-level object used to describe any part of an application. (It can be an image, icon or text).
  • The number and variety of widgets are increased due to the lightweight and simplicity of the widgets. Greater widgets may contain smaller ones, with a single responsibility. Simple widgets can be modified into more complicated ones if needed.
  • Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as native ones. This mainly reduces the burden of time for converting through some language to the native one and speeds up the UI rendering time. As a result, the UI performance is remarkably high.
  • The way of designing views is similar to web applications so that one can find many analogies to HTML/CSS.

Strengths of Flutter:

  • Open source and free, same as React Native.
  • Has less code: most of the UI/UX code is shared between the platforms.
  • Allows developers to reuse their Java, Kotlin, Swift, or Objective C codes within the same framework.
  • Helps to increase the productivity of developers ten-fold as they can make changes in code on the fly; faster than in React Native.
  • Ensures powerful UI experience out-of-box: makes it easy to create diversified animation from 60-120 FPS (comparing to average 60 FPS in React Native) which allows saving the overall development time.
  • Provides an extensive catalog of open-source packages to simplify many complicated tasks.
  • Is lightweight in terms of elements, which gives greater scope for customization.
  • Offers regimented and efficiently smooth documentation, which indeed simplifies the job of the app developers.
  • Allows the server to handle many requests at a single time because of Dart’s asynchronous nature.
  • Profitable when it comes to application assembly because there’s no need to parse and translate XML into code.
  • Uses 2D rendering engine known as Skia to create visuals.
  • Suitable to jump to a lower layer: communication between Flutter and the native app is simpler and fast by virtue of the native engine.
  • Guarantees fast UI rendering.
  • Dart is used as the main language for Fuchsia (Google’s OS).

Weaknesses of Flutter:

  • Games and apps that require a lot of device-specific functions are better off not developed with Flutter.
  • The code structure is less readable. UI trees look quite complex and monotonous as there is no separation of template, style, and data files. Therefore, the code becomes not easy to read, whereas Javascript follows the simple code structure. It takes time to get used to the way of tree structuring code to be able to read it from any part. Despite some imperfections, this principle of UI tree structuring has become a trend and is even used in Swift UI.
  • As there’s no bridge between the Flutter app and the device and all UI components belong to the application directly, Flutter apps end up being quite large.
  • Switching to Flutter may seem not as smooth as to React Native. It can take more time to learn all the ropes.

Product owner vision on both technologies:

Both React Native and Flutter allow creating mobile apps for iOS and Android with a native look and feel from a single codebase.

React Native has led the way for uniting both the iOS and Android platform’s native APIs. In contrast, its plucky contender Flutter has also been a progressive leap to allow creating Android and iOS highly responsive native apps at the same time.

From a technical point of view, picking a correct framework to build cross-platform native mobile apps may depend on many aspects. Before starting designing and developing your app, it’s critical to confine the compelling factors and the resources you possess.

In basic operations, taking into account only the UI of the app, the difference between the two technologies is not visible for a common app user. To differentiate whether your application was written using a native technology or a cross-platform framework is next to impossible. The majority of the code can be shared, though the UI Structure is different.

To sum it up, let’s have a look at the below:

React Native Flutter
Language JavaScript is widely used Dart is not a common language, and there is a lack of support for it in many IDE and text editors
Documentation A bit clumsy, due to its open-source nature A well-structured documentation
UI Components Less components Rich in components, animation out-of-box
Performance Lower, because of the need in JavaScript bridge to communicate with native modules Better, as it has most of the native components, and there is no need for a bridge to communicate with native modules
Developer productivity Decreases with the complexity Encourages developers productivity
Community support Better, due to 2 years of a head start Not as much big, but grows fast

The onboarding part with Flutter might be discouraging, as the newcomers will need to learn Dart, an object-oriented and class-defined language, and get used to completely different namings, custom elements, and different structuring of the UI. Some of the arising concerns will have to be handled alone as the community support is relatively small, whereas the situation with React Native is completely different. You don’t have to hire a new set of developers. Your existing JavaScript and React developers can easily switch to developing mobile apps with React Native since they make use of similar technologies. React Native is well-recognized in cross-platform mobile development and considerably outnumbers Flutter.

<strong>Dashdevs</strong> are sophisticated rowers in a list of technologies.

We already had a bunch of projects created with React Native (FitGrid, BetterHuman, Jack’s Flight Club, Petrimazepa, and others).

The attractiveness of Flutter has not bypassed us. One of our recent projects is an application for psychic advisors to network with like-minded individuals and helps customers who use the app transcend the situations they’re in and discover the clarity and positive change they’re searching for.

The advisory app development permitted our technical experts to admit the fast and straightforward communication between native applications and Flutter. Thanks to one codebase for both iOS and Android platforms and great customization possibilities, Flutter has significantly saved the overall development time for the specified product in our case.

Is there an all-purpose technology among React Native and Flutter?

A universal framework for mobile applications development.

Nowadays, almost every company needs a mobile app performing faster and consuming fewer resources to remain competitive in the market. iOS and Apple developers can build apps using Xcode and Swift, while Android developers use Android Studio, Java, and Kotlin. This approach provides engineers with two different sets of technologies. All that inspired a new era of cross-platform technologies to build solutions for both Android and iOS, which can be implemented faster with one codebase.

It’s always a tough decision whether your mobile app should be a true native or with the implementation of a cross-platform approach like React Native or Flutter.

Both Flutter and React Native are good. Leaning toward one or another framework may depend on many aspects. These are:

  • business value of your future app
  • specific technical requirements of your project
  • technology trends
  • importance of flexibility and scalability
  • availability of well-structured and detailed documentation
  • presence of development tools
  • ready-made solutions, among others.

Complex apps. It seems that the more complicated app is, the more advantageous is to support it using native technologies. Creating games or app projects which require device-specific functions might be challenging with Flutter. Moreover, it remains uncertain by now how Flutter will cover resource-intensive applications and maintain their performance.

Long-time support. The other reason which leverages the attractiveness of Flutter is Google’s kind of tendency of shutting down its open-source projects (among the recently closed ones is Google+).

Optimization for platforms. Contrarily, since React Native uses the bridge and native components, it often requires separate optimization for each platformthe problem that widget-based Flutter does not have. It may lead to a more prolonged and laborious development process. It’s obvious that for relatively small projects (as in our case) Flutter is a perfect fit. The technology is young but already has an excellent road map.

Savvy, yet less popular. The value of Flutter is apparent as it relieves many of the pain points faced by startups trying to release multiple platforms, especially when dealing with limited time and budget to get the software product to market. Though, the existing nuances, such as Dart language, immaturity of the framework with a small community, and code structure may discourage developers from exploring this technology. As a consequence, it could be challenging to hire a team with Flutter expertise. Moreover, you should also keep in mind the expertise of your team and situation on the labor market. You might face some obstacles in a hiring team of Dart developers — something that is proved to be infeasible with its rival.
UI customization. You may consider developing on Flutter with its powerful UI experience out-of-box, if a brand-first design of your app is a priority, or get in the sub of a time-honored and well adopted React Native when starting a complex and long-time project.


Dashdevs recommends

Dashdevs is among the best app development companies in the US and European markets, and we have vast expertise in working with both React Native and Flutter. However, taking into consideration all the above, we’d probably advise choosing React Native when you want to leverage the support from the stronger and mature community, along with native app performance, and use popular JavaScript in developing cross-platform apps.

You may decide in favor of Flutter when you want cross-platform, highly-attractive UI, excellent native performance, and quicker time-to-market.

We must admit that for now there is no one-size-fits-all solution and leaning toward one or another framework entirely depends on the project requirements and budgets.

Show comments
Table of contents