Chat with us, powered by LiveChat

React Native vs. Flutter vs. PWA

by Ivan Bezdenezhnih

Please note that we wrote this in October 2019. As technology progresses at the speed of light, it’s possible that, at the time you’re reading this, one or a few things have changed.

When approaching a mobile app development project there are over a dozen choices for technologies to build it. You could build it in native android and iOS or you can use one of the many hybrid frameworks.

In this article, we’ll assume that you’ve already decided that having a single code base for your application (aka the hybrid framework approach) is a good idea. Now, you only need to choose the framework that works best for your app. And, that’s the hardest part. To help you out, we made a detailed comparison of the three most popular frameworks used today:

  • Progressive Web Application
  • React Native
  • Flutter

What is a Hybrid App?

Hybrid apps look just like native apps. You can download them and use them just like any other native app. However, they are essentially websites built with HTML5, Javascript, and CSS. The greatest advantage of building hybrid apps is that they work on both iOS and Android and you can build them with one codebase.

mobile development process and user interface

Why Hybrid?

Hybrid technology shortness development time and provides native app experience.

The hybrid approach enables you to:

  • Reduce mobile app development time for iOS and Android
  • Minimize time-to-market for new features and improvements
  • Unify interface and user experience on any device

With a growing number of mobile users, companies started investing more in application development to improve user experience and keep users fully engaged.

Currently, the most popular hybrid technologies are PWA, React Native and Flutter.

What is a Progressive Web App (PWA)?

According to Google: “Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.”

Progressive Web Applications are:

  • Progressive — they work for every user on any device (unless it’s an outdated one)
  • Responsive — work on tablets and mobile phones, with any screen orientation and design
  • Connectivity independent — support working offline
  • App-like — feel like an app
  • Fresh — always up-to-date
  • Safe — Served via HTTPS and provided with the standard security practices
  • Discoverable — PWAs are identifiable as “applications”
  • Re-engageable — have features like push notifications
  • Installable —  might be placed on the home screen
  • Linkable — easily shared via a URL

What is React Native?

React native is a mobile development framework which you can use to build mobile apps by using JS and React. React Native apps work on both iOS and Android platforms, and they are built from a single code base.

React Native supports embedding native modules written with Objective-C, Swift, or Java, to get even better OS-specific compatibility.

What is Flutter?

Flutter is an open source mobile software development kit from Google which you can use to create high-quality apps with a single codebase, for Android and iOS. It is based on Dart language and has a native-like widget sets for both platforms.

What’s Common for all Three Hybrid Technologies?

They are free and supported by Android and iOS! In addition, they have:

  • Shared codebase — all three use single code base to build apps
  • Hardware support — camera, microphone, speakers, geolocation, etc.
  • Native experience — they look and feel like the native apps. They can be added to the home screen, have native navigation and features, like sharing and push notifications. 
  • Backed by industry giants:
  • React Native is built and supported by Facebook
  • Flutter is developed and owned by Google
  • Most of the frameworks which are usually used to build PWA are backed by industry giants like React (Facebook) or Angular (Google).
  • Open source and free

mobile app icons

What Are The Main Differences Between PWA, React Native And Flutter?

All three technologies will help you build mobile apps for iOS and Android, using JavaScript (for React Native) and Dart (for Flutter). The main perk is that you can create native apps for both platforms with the same language, but what are the differences between these technologies?

We are going to discuss the main differences and point out important features and limitations that can help you decide which platform is the best for your mobile app.

When Was The Technology Introduced?

PWA

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “progressive web apps” to describe apps taking advantage of new features supported by modern browsers, including service workers and a web application manifests.

React Native

The first version was released in 2013 at a Facebook hackathon project.

Flutter

The newest technology, released in 2017.

Supported By Industry Giants And Most Famous Applications

PWA

The frameworks you need to build PWA are usually backed by industry giants (Angular by Google, React by Facebook) or a massive community of contributors (like vue.js).

Some of the most famous PWA applications are:

  • Aliexpress
  • Twitter lite
  • Telegram
  • Uber
  • Google maps

React Native

Backed by Facebook, the most famous mobile applications built with React Native are:

  • Facebook
  • Instagram
  • Pinterest
  • Skype
  • Uber

Flutter

Built by Google, here are the most famous Flutter applications:

  • Alibaba.com
  • Google
  • Google Ads
  • Google Greentea
  • Abbey Road Studios

Distribution Channel And Audience

PWA

Since a Progressive Web Application isn’t a native application, it can’t be distributed through Google market and Apple store. That’s certainly a downside for many projects, but there are also tons of benefits that make PWA a great choice.

android and apple logo

You can easily distribute your application directly through the web since:

  • It doesn’t require to be installed first
  • It could be used immediately once opened
  • It doesn’t take device memory, so there is a lower user engagement threshold
  • It doesn’t have to be approved by the App store or Google market to become available for public
  • You can monetize it following your own plan, without paying any commission and following third-party monetization rules.

React Native and Flutter

The general advantage of both React Native and Flutter is that you use them to build the real native applications that you can distribute on Google Play and App Store. This means that the user has to download and install the app before using it.

Another advantage of having the “real” mobile app is an opportunity to use Google and Apple monetization tricks and have in-app billing, advertising, and paid versions.

Native Engagement Experience (Push Notifications And The “Share” Feature)

PWA

The Push notifications are supported through W3C Specification. Though, they are available on Android but not on iOS, unless you use a Safari browser.

You can easily share any PWA content through other applications on Android, and the same feature should be added soon on iOS too.

Currently, you cannot register your application as a share target (also known as deep linking), but we can expect this feature quite soon via Share Target API in Chrome on Android. At the moment, there isn’t any news about doing the same for iOS.

React Native

Push notifications, share and share target (deep linking) are supported natively.

Flutter

Push notifications are supported natively as well. However, the ability to share is supported only with third-party native extension.

Contacts Integration

PWA

Contacts integration is not supported by W3C yet, but it’s possible through the third-party contacts integration (it’s possible to get phone contacts from Google’s API).

React Native and Flutter

Fully supported natively.

SMS & Calls Integration

PWA

PWAs can’t read and send SMS, but they can invoke calls by manual page action like tapping the “call me” button.

React Native and Flutter 

The application built with any of these two can invoke calls by a manual action like “call me” somewhere on the screen. Both React Native and Flutter applications can read SMS but on Android only. 

For sending SMS, iOS, and Android both support sending messages by native embedded SMS application and can utilize callbacks to get the control back to the application once the message is sent.

mobile phone screen

Installation

PWA

PWA application can be installed as a shortcut on the home screen.

React Native and Flutter

Both can be installed as native applications on the device.

Flexibility To Fit The Common Platform Ui/Ux Approach

PWA

The Progressive Web Application is a Web application in the first place, so there are plenty of web frameworks with any possible languages. All of them are widely supported by the community.

What you need to do is choose a framework that fits your application the best and that has all functionalities and abilities you need. Though the platform-specific UI/UX approach is not supported, so the PWA won’t be looking fully like the native application on all the platforms.

React Native 

React Native provides excellent support for native UX/UI, though the framework relies too much on third-party components. Some components are adaptive to the platform, such as the height of the search bar, fonts, and shadows, and some are not.

Flutter:

Flutter has platform-specific widgets that you can use to create a native UX on both Android and iOS. These customized widgets help you design an engaging user experience. Flutter doesn’t rely on 3rd party components, but you can still use some if needed.

mobile payments applications

Hardware Support

At the time of this writing PWA technologies have some limitations related to hardware interaction & functionalities. Be sure to compare your requirements with what is possible before choosing the technology.

Since React Native and Flutter are supported on most hardware, here’s a list of what’s not supported!

PWA

To check if you can rely on the web platform to build your app, open https://whatwebcando.today/, and it will give you a list of features, and services that are supported and not supported on your device.

  • What’s not supported on Android as of this date (Chrome browser):
    • NFC
    • Ambient light measuring
    • Geofencing
    • Proximity sensors
    • Wake lock
  • What is not supported on iOS as of this date (Safari browser):
    • Media recording
    • Bluetooth support
    • NFC
    • Ambient light measuring
    • Geofencing
    • Proximity sensors
    • Screen orientation
    • Wake Lock
    • Speech API
    • Network Information
    • Device Vibration
    • Battery information

React Native and Flutter

These two frameworks can support anything through native extensions.

Stability

PWA

The stability of PWAs entirely depends on the selected framework, so it’s hard to give a general yes or no.

React Native 

If React Native relies too much on third-party components, stability might become an issue, because some of them might not be supported and not updated often enough.

Flutter

Flutter is much more stable than React Native, since most libraries are included, and they are often updated and compatible with any new versions.

Performance

PWA

PWA usually has lower performance because it uses web DOM and requires a browser to be implemented which isn’t that fast as native rendering. Might not be a good fit for applications for which the performance might be a bottleneck. E.g. if there is a lot of data that should be stored and searchable locally in offline mode, it might be an issue.

React Native

React Native provides pretty good performance because it uses the native rendering engine through the bridge. Though, the RN – bridge – native UI rendering architecture is not very stable and might cause memory leaks due to its nature.

Flutter

Flutter utilizes its rendering engine and has an excellent performance that is almost equal to native rendering.

lines of code on a black screen for mobile development

Ease Of Coding

PWA

The ease of coding for progressive web applications depends on the selected framework, so the answer is very relative. However, almost any web-based technology can be used.

React Native

This framework is quite stable as it uses JavaScript and React approach. There are a lot of experts in this area, and the community is enormous. Requires native development knowledge to make extensions.

Flutter

Flutter requires knowledge of Dart language which isn’t that popular as JavaScript or some similar language. The technology itself is pretty young still which makes harder to find people with the respective expertise too. The community is not that big as the React Native one so it makes harder to find solutions in some tricky cases. 

If the project is supposed to implement some custom platform extensions (to work with some specific hardware or something like that), it would also require some mobile native development experience.

  • Requires to know Dart
  • Not that many professionals are available yet as for React Native
  • Requires native development knowledge in order to make extensions

Development Speed

PWA

Having the same code base for both web and mobile applications can significantly increase the development speed and reduce its cost. All the other factors that determine the development speed depend on the choice of framework.

React Native

React Native has the hot reload feature that speeds up the development time by automatically reloading the app every time the code changes. Plus, developers can use quite a lot of third-party components, which will also speed up the process and of course, increase speed to market.

Flutter

Flutter also has the hot reload feature and is packed with default widgets which you can use to make an entire application and do that pretty fast. If you need something other than these widgets, development time might take a bit more than with React Native because you would have to code from scratch.

What Technology is the Best Choice For Your Project?

Choosing the right technology for your project depends on the specific needs you have. But for starters, to help you out, we’ve come up with a mini-guide that will tell you when is the best choice to use PWA, React Native or Flutter.

When PWA Is Best:

  • When you are not looking to distribute your app on Google market and App store
  • When it’s imperative to have the same code base
  • If your application is rarely used, so users usually avoid installing it
  • When your app doesn’t take up too much data to be stored offline and when it doesn’t have high-performance requirements
  • When you don’t need options like SMS reading, deep-link integration, device vibration, etc
  • When you already have a web application, and now you want a 
  • You already have a web app and want to have minimal time-to-market

When React Native Is Best:

  • PWA doesn’t fit you for some reason
  • When you need to have different UI/UX for different platforms with unique elements and layouts
  • You couldn’t build the app with a predefined set of standard Flutter widgets
  • When you already have React Native experts in your team

When Flutter Is Best:

  • PWA doesn’t fit you for some reason
  • When you can build the app with the standard Flutter widgets set
  • When you wish to educate developers on how to use Dart and Flutter and when you have access to Flutter professionals

Choose PWA when you want to distribute apps on private channels.

Choose React Native when you want to have a near-native experience and when you want to use JavaScript.

Choose Flutter when you want to stand out in the market and use Dart as a programming language and when you want to have beautiful UI.

If you’re looking for help in choosing the right technology and approach for your company’s mobile app, get in touch! We’d love to hear from you.