PWA vs. Flutter vs. React Native vs. Native

How to develop a mobile app today?

In an article I published in March 2019, I wondered if PWAs would mean the end of the native development. The short answer was “no”. The slightly longer answer was “PWAs can be a great solution sometimes but native or hybrid development is still necessary in many cases”. 2 years later, PWA abilities have kept on increasing for Android, but not so much for iOS. In the meantime,Hybrid development — Flutter especially — has also progressed a lot.

What is the current state of mobile development? What is the best technology to develop your app today? Here’s a guide to help you make the best choice for your technology, depending on your needs and context.

Note: Many other ways to develop an app exist in addition to native, flutter, react native and PWA. I deliberately chose to consider only these four options in this article, since they are the most used and/or promising in my opinion. If you think that one technology improved a lot and should be added to the list, don’t hesitate to drop a comment!

The opposing forces

The identity cards of all 4 technologies.

Identity cards: Native vs. React Native vs. Flutter vs. PWA

In-depth analysis

It may still be complicated to choose a technology with these identity cards, so I tried to provide a list of fields where every technology will give an advantage compared to the others. In the next paragraphs, we will thus study and compare 12 categories.

Development time

Innovation is key in software development, and especially in mobile development. So the time-to-market is very valuable.

• With an equivalent number of resources, native development can be twice as long as hybrid development, since you need to develop both an Android and an iOS project.
• The PWA development will be even shorter than hybrid development, thanks to the huge development communities and the many libraries available to accelerate the project progression.

In this category, there is a small advantage for PWAs compared to hybrid. They both win against native development.

Development cost

Independently from the development time and considering the same experience, the developers salaries are, from the more expensive to the less expensive :

1. Flutter (dart)
2. React Native & Native (Swift & Kotlin) — very close
3. PWA (Web)

This is due to the rareness of the Flutter developers on the market, while web developers are much easier to find.

If we combine this ranking with the development time needed mentioned above, the final price for a mobile project producing 2 apps (iOS & Android) is much more interesting for a PWA. Hybrid development is next, and native is still last.

Security

Security is a key subject, which must never be overlooked.

In software development in general, security is a race against potential breaches. That’s why it is always crucial to have everything up-to-date (Software Development Kit, framework, etc…). So the fewer dependencies, the better.

• That’s why native development has always been considered more secure. There is indeed only the OS SDK between the smartphone and the app developer.
• On the contrary, for an hybrid application, an extra layer is added with the implementation of the React Native or the Flutter framework, which creates a risk.
• For PWAs, you will have the same security as a classic web application. There is an extra layer too which is the browser, and generally the web is more targeted by hackers than mobile applications

In that aspect, native apps have a better safety rating.

However, it is important to notice that every development can be done safely, or unsafely. Introducing external SDKs for a feature for example in native development can be a “black box” and introduce a hazard too. A web application can also be developed in a very secure way. Security is a daily concern that every developer must keep in mind, regardless of the technology used.

Performance

For this important subject, I will refer to this great study published in Medium, showing a clear hierarchy: Native > Flutter > React Native.

Regarding PWAs, even if the loading time is accelerated thanks to the service workers, the performance will still not be as good as a native application, where most of the content is already loaded, on app downloading.

Like security, it is important to remember here that the performance of your application will above all depend on your development team (mobile developers, but also backend developers and even designers) to provide a performant application.

Look & Feel

For this subjective category, I encourage everybody to download and test the differences.

• However, it is commonly admitted that the native apps, thanks to their performances and the use of native APIs (for navigation for instance), will provide a better experience
• For React Native, some basic navigation functions are still missing or are complicated to develop. Combined with the low performance on some complex pages, it can result in a poor user experience.
• For Flutter, a special effort has been made to comply to the native design guidelines (material design for Android, human guidelines for iOS) and to provide high performance, which will give a look & feel close to the native experience, as long as the screens remain basic, with a simple UI
• For the Web, if the reloading of the page is not needed (no new content) the experience will feel almost similar to a native application. Although most of the time it is still clear to know that you are on a web application, because of the missing classic animations used in native apps.

Battery consumption

Like security, you can have a native application which consumes a lot of battery, and have a web application well optimized which consumes very little battery.

But in general, native applications will store more data on application download, thus reloading less data every time you open your application, which gives a clear advantage to native applications over PWAs. This study between Twitter VS. Twitter lite (PWA) tends to show the same thing.

Regarding hybrid applications, it is on a similar level as native apps. As can be seen in the performance paragraph above, the phone will however have slightly longer treatments to do for every operation done for an hybrid app, which gives a really thin advantage to native apps for this category.

App size & stored data size

For an occasional user, native apps will be a huge waste of space on your phone. PWA will “automatically” manage their size: if it is not used for a while, the cache will be cleared and useless data will be cleaned. This can be a downside, especially on iOS where the conditions to wipe the cache are not very clear.

Also, hybrid apps will be bigger than native apps because of the hybrid frameworks included in the app. It is indeed cited by Airbnb engineers as one of the reasons why they decided to remove React Native.

In most cases, this will still give a clear hierarchy which is: PWA > Native > Hybrid.

Discoverability

How easy is it for your users to find your app? For native and hybrid apps, no problem at all. Your apps will be available on the usual Google Play Store for Android and App Store for iOS.

For the PWA, the process to install the app might be easy for android:

• An install banner can pop up on your website

PWA install UI in Chrome 92 on Android

• And you can also add a “shortcut” to your PWA in the Google Play Store with a Trusted Web Application (TWA), to make it completely feel like a native app and benefit from the Google Play Store exposure.

So the discoverability is even better than native for Android PWA apps.

Unfortunately, we cannot say the same for iOS:

• The PWAs cannot be visible in the App Store
• And the installation process is quite painful, with 3 clicks necessary:

PWA installation process on iOS

Hardware access

An important criteria is the possibility to access all the features of the smartphone:

• Without any surprise, the native development offers access to everything available in a smartphone
• For the hybrid solutions, the community always follows the native trends and provides a way to access all of the capabilities of the phone fast. There is always a way to do everything, even if the development may be a lot more complicated than with the native development
• For the PWA, the capabilities are linked to the access that the browser application has. For Android devices, Chrome for instance allows to use most of the capabilities available. For iOS devices, only Safari can allow a PWA to be installed. And in 2020, the Safari team published a blog post where they said that some APIs (which means capabilities) will never be implemented for security reasons. This includes: Push notifications, Bluetooth, NFC, Battery status, Background geolocation for instance. The full list can be found here. Update: this might change in 2022 (maybe with iOS 15?)

Offline mode implementation

One of the key features of mobile applications is often the “offline mode” which allows you to use the application with a poor network connection or no connection at all.

• For native and hybrid applications, you can use several ways to persist some data. Including an SQL Database management which is hard to implement and maintain, but really robust
• On the other hand, for the PWA, the offline mode is included from the beginning, thanks to the power of Service Workers. It is a basic offline mode, but it will satisfy what you need in most cases.

That’s why we will give a small advantage to PWA in this category.

Support & stability

Here is a very important category. If you develop your app today, how will it behave in 5 years from now?

• For native apps, the ecosystem is very stable. The OS will have some changes a year, and sometimes it will require you to develop a new version (for example old apps removed from the AppStore if they are too old) but it’s not uncommon to have a functioning app still working well 2–3 years after their original version
• For React Native, the community of developers improving the framework is so important that there are many breaking changes. The apps will need to be updated more frequently, otherwise the app might not work anymore on future OS versions
• For Flutter, the framework evolutions seem to be more controlled by Google, but it is still very young so many (breaking?) changes are to be expected in the next few years
• For the PWA, even if the community is the biggest by far, the developers are at the mercy of the browser developers and their evolutions. For instance on iOS, notifications have been expected to be available for many years now, without any way to know if it will be developed one day. This uncertainty is a risk that needs to be taken into account from the beginning of a PWA project

Content update

Another big advantage of the PWAs is the ease to update the code.

One major drawback of the native apps is the release process. You need to:

1. develop
2. create a package file (.apk for Android, .ipa for iOS)
3. upload it to the stores
4. wait for the validation (several days on iOS)
5. publish if validated
6. and last but not least, wait for the users to update their apps

So it’s common to still have users on version 1 while you are working on version 6 for instance. This can be tricky to publish hot fixes, or to make sure that all users have the same user experience and features.

The PWAs, relying on the web technologies, offer an instant update process, and a unified experience for all users with an up-to-date version.

Update: React Native, thanks to the Microsoft CodePush functionality, can offer a similar Over-The-Air automatic update. On iOS, the changes should however theoretically be minor to respect the App Store guidelines.

Conclusion

Following my studies, I tried to sum everything up in the table below.

Native vs. React Native vs. Flutter vs. PWA: a comparison

With this in mind, we can draw the following conclusions:

PWAs are really worth it if:

• You don’t need to be on the appstore for iOS
• You don’t need specific features like push notifications for iOS (Update: this might be a bad example soon)
• You want a website, an android app and an iOS app quickly and at a good price

Hybrid applications can be a perfect solution for:

• small apps with a simple design and common features, which makes it perfect for MVPs
• scaling up to be a bigger app and stay competitive for a while
• a cheap option compared to native apps, and quickly delivers 2 apps: iOS & Android

Native applications are much more efficient in the long run

• Especially if you want to bring high-end performances to your users
• If your users go to your apps very frequently
• If you want to use the latest innovations provided by iOS and Android

According to your project context and needs, you can adjust the importance of every category to help you make a better decision for your technology. That being said, if you are still unsure about what to do on this strategic matter, you can send us an email or leave a comment. Me or one of my Neoxia colleagues will be happy to help and guide you to the best option for your project.

Going Further

I am sure you will find many articles everywhere to tell you that each technology is great. So I thought it would be more interesting to learn more about the technology limitations if needed:

• A medium article with a great title: “The Cost of Native Mobile App Development is Too Damn High!”
• Very interesting articles from Airbnb and Facebook Messenger engineers and their decision to remove React Native code to implement Native apps, after years of usage
• A good Medium article called “What Flutter Can’t Do: Limitations” (the list goes thinner every day)
• For PWAs, the most important thing is to stay up-to-date. For that, I suggest to follow Maximiliano Firtman on Twitter, who can be considered as a (the?) PWA expert. To get an in-depth look at the PWA status in 2021 and its limitations, you can also check his extensive article.