PWA, React Native, Flutter or Native App Development? Mobile App Framework Overview

Blog2 March, 2020

A cross-platform mobile app, PWA, or native app development? That is the question businesses and startups often face when looking for efficient ways to embark on a mobile app strategy. We outlined major aspects of PWA, React Native, Flutter and Native mobile development to help you make the right decision.

PWA, React Native, Flutter or Native App Development-1

Will PWA be capable of powering all the necessary features of my project? Will the development process take less time with React Native? Will running iOS or Android platform-specific features be causing issues with a Flutter-based solution? Read on to find the answers to these questions below.

Companies nowadays have tons of mobile solution options and an array of app development technologies to rely on. However, oftentimes the choice of your personal best may be tough. 

Each mobile app development approach has strengths and weaknesses. Therefore, the decision should be primarily based on the priorities and goals of your company, budget, marketing model and time.

Out of all mobile tech that exist out there we picked:

  • Progressive Web Apps; 
  • Cross-platform frameworks: Flutter and React Native;
  • Native mobile app development approach.

 

Below we break down each approach, overlooking the major pros and cons to let you decide which of these fits your specific project the most.

Advantages of Cross-Platform vs Native Mobile Apps

Let’s now discuss the benefits of cross-platform over the native way of mobile app development.

Single Codebase

Here works the rule ‘develop once, run everywhere’. When mobile app development is based on one of these three frameworks, there is no need to write code separately and build two mobile apps: one for iOS and one more for Android. A single codebase can perform identically well on both platforms.

Faster Delivery Time

One of the most appealing benefits of PWAs and cross-platform mobile apps is that they consume less time for development. When you decide to work with only one codebase, the time required for app building drops drastically, and the development team reaches the expected result faster.

Cost-Effectiveness

By taking PWA, React Native, or Flutter as a target framework to build mobile apps upon, businesses also gain perks that help make quite a saving. Instead of two, there’s one team building one codebase and working on all the life cycle stages of your project. That actually can make quite a big difference for both mobile app development and maintenance.

Mobile App Development Framework Essentials

Now, let us take a closer look at the key factors of the mobile app development frameworks.

Progressive Web Apps (PWA)

Progressive Web Apps (PWA) graphics

Unlike traditional mobile apps, a PWA is basically a hybrid of a web page and an app. Such an approach allows for fusing the convenience offered by today’s web browsers with a mobile app-like look and feel.

PWA was introduced by Google back in 2015. Just like a typical web page, mobile PWAs are hosted on a server and are built using common web tech like JavaScript, HTML, and CSS. A PWA can get distributed and found by a simple URL, no need to submit it to any mobile app store. 

In case a website, not a mobile app, is what users are more likely to search for first, the best decision is to offer them a PWA. Users are going to be prompted to install a mobile version of the website’s pages the first time they visit that particular website.

All application’s assets (its code, images, and animations) are all kept within the browser running a ‘service worker’ script. The service worker is the core block of a mobile PWA because it takes responsibility for all background tasks, syncing, and offline support. 

A PWA prompts users to pin app icon to their home screen, sends push notifications and provides the same quality of user experience on all popular browsers.

Perks You Get with a PWA

Businesses looking to develop apps that support and inspire customers should consider the following benefits of progressive web applications:

Easy to find & share

PWAs are browser-friendly, so they are quite easy to find through the web. The linkability of PWAs allows for comfortable info sharing through simple URLs or QR codes. Most PWAs are supported by organic search engines, which means they also preserve SEO capabilities of the web page they are associated with.

PWA’s service worker

It serves as the backbone of a PWA, enabling really fast caching of the website on the mobile device, background syncing, push notifications, and seamless operation in offline mode. A service worker allows developers to choose how much of the app’s size to cache and when, takes control over each network request, as well as serves custom responses that are retrieved from the app’s cache.

Consistent user experience

The average size of any PWA is just about 2 MB. Low device storage use is appreciated by both businesses and ultimate PWA users. The use of service workers, web APIs, and adaptive layout, provide for faster load times and near-native app behavior.

Shortcomings of a PWA

On the other hand, along with all the benefits, a progressive web app still has a lot of limitations:

Limited access to hardware features

Progressive web apps can’t use some of the latest hardware advancements like NFC, Bluetooth, as well as the device’s sensor package: accelerometer, proximity sensors, fingerprints, and advanced phone camera controls. This also prevents PWA from being developed for use with mobile accessories and “wearables” like smartwatches or fitness trackers.

Lack of presence on the stores

Mark this one as ‘under development’. However, there’s still no direct way to publish a progressive web app to the App Store and Google Play. Everyone knows how to find an app on their respective app store and install it. Much fewer people know how to install a PWA from their browser’s menu though. The issue is actively being worked on by the community of PWA developers.

Incapability to collect user data

PWAs have limitations when it comes to accessing stored data, plugins, and other mobile apps. For users mostly accustomed to on-the-go activity, it’s very handy to log in or sign up through Google or Facebook. However, progressive web apps don’t communicate with other user’s accounts and social apps and force the user to take an additional login step to proceed.

React Native

React Native graphics

Developed and backed by Facebook, the React Native framework targets mobile platforms while being based on cross-compatible web technologies such as React and JavaScript. Besides, the approach involves using native code for much greater adaptability to different mobile devices.

Instead of running custom UI elements, this framework allows to bridge and implement native iOS and Android widgets. In other words, the app’s UI, its components and API logic written in JavaScript can be fully compiled to Kotlin or Java code in case of Android development, and Swift or Objective-C code in case of building for iOS.

React Native opens access to a huge number of ready-to-apply standards and pre-built units, which dramatically shortens time-to-market and provides portability to multiple platforms. Additionally, both Facebook and the React Native community are steady and reliable in terms of delivering framework updates.

Main Advantages of React Native

Huge community support

React Native has 82k+ stars on Github to date. Launched in 2015 as an open-source project, the framework gained quite an impressive popularity, which means this technology gets trusted and is unlikely to become abandoned any time soon.

Ready-made components 

Instead of writing code from scratch, React Native provides ready-made components and SDKs. They help to markedly increase the speed of mobile app development even in case of dealing with non-standard complex functionality.

UI/UX feels like native

The look and feel, smooth animations, and nearly identical performance are all powered by interaction with the iOS and Android native modules and the ability to instantly render the code to native APIs. As a result, an average user is unlikely to tell the difference.

The Other Side of React Native

To illustrate the cons of the framework, we took the experience of Airbnb with this technology as an example. 

Airbnb, the company offering the largest peer-to-peer service for the hospitality industry, saw the potential for React Native and code sharing between mobile and web. However, the technology ultimately failed to meet their expectations and Airbnb moved away from React Native in favor of native mobile app development. 

Three major weak points of React Native the company has singled out:

  • Native code still needs to be written

A large amount of codebase still demands to be written individually for each platform as a supporting code. For instance, introducing deep links, advanced in-app map features, or complex business logic requires diving into native libraries, iOS/Android APIs and components.

  • Inconsistencies on iOS and Android

Open-source libraries commonly lean towards supporting one environment better than another. This may cause inconsistent communication between the native and non-native components, reducing the app’s speed and degrading performance.

  • Never-ending investment and debugging

Expect to make continuous investments to support the latest landscape of a React Native ecosystem. As an open-source mobile framework, React Native is ever-changing with oftentimes arising rendering and initialization issues.

Flutter

Flutter graphics

Flutter is both an SDK (software development kit) and an open-source mobile app development framework. It was created in 2018 by Google for building mobile apps in the Dart language that is based on Java and C++.

Though Flutter can’t boast such a big support base as React Native, it also compiles to a native code and offers lots of command-line tools, APIs, ready-made libs and widgets. The major components include the Dart platform, Flutter engine, and Foundation library. Material design is used by Flutter widgets by default and helps to create eye-pleasing interfaces for both iOS and Android platforms.

High performance, small size, pleasurable styling, support of in-app features like storage, camera, location, network, as well as Google’s backing to top it all off make Flutter a strong framework to choose for building a cross-platform mobile application.

Major Benefits of Using Flutter

Perfect for MVP development

Need an MVP to show your product to investors or audience as soon as possible? Going for Flutter will be the best way you can do it at a low cost and with minimum resources. There’s no need to have a separate backend for building simple MVPs since Flutter fully supports Firebase APIs. Moreover, the convenience of available widgets considerably shortens the development process and becomes crucial when the deadline is approaching.

Flutter community support

Since Flutter’s release in 2018, developer support for it has grown substantially. The Flutter community actively contributes to the framework and keeps getting more and more involved. To this date, Flutter’s source code on Github has an 87k star score, extensive files of documentation, developer guidelines, and lists of coding tips.

Integration with Google Fuchsia

Google itself is betting big on Flutter. A brand-new operating system called ‘Fuchsia’ that is still at its development stage uses the Flutter framework as its UI rendering engine. We do believe Flutter has the potential to be the base of even more apps than the ones that use Fuchsia OS alone. 

Cons of Flutter Development

Based on developer feedback, we have identified common drawbacks of cross-platform mobile app development on the Flutter framework. Concerns are mostly linked to its young age and that it is still in the developing phase. Here’s what we’ve singled out:

Flutter can’t interact with native APIs directly

For the most common app features, it has little impact. In more custom cases and scenarios, however, you’ll have to write native Swift/Objective-C code for iOS and Kotlin/Java code for Android, as well as use different IDEs to interact with native APIs.

Can be buggy

Dart is a relatively young tech that sometimes loses in the battle with its older rivals. It may be challenging to find Flutter experts. Though the technology is making waves, it isn’t so popular yet as React Native or PWA, for example.

No support of code pushing

Flutter doesn’t allow developers to instantly apply patches to their apps and push bug fixes in real-time. All updates for Flutter apps have to go through the usual app store release processes.

Real-Life Examples of PWA, React Native and Flutter

Let’s see big names and global enterprise app platforms that have already built amazing mobile experiences on PWA, React Native and Flutter.

Top 5 PWA-Based Mobile Apps

Top 5 Mobile Apps on React Native

Top 5 Mobile Apps Built on Flutter

 

Native Mobile App Development

Native Mobile App Development graphics

A native mobile app, oftentimes referred to as ‘traditional mobile app’, fully complies with a single platform and has its own specifically written codebase: Swift/Objective-C for iOS, and Kotlin/Java for Android. In terms of app performance and user experience, all natively-developed apps are sure the superior ones.

What Singles out Native Apps among the Others

Full integration with device

Native apps embrace device capabilities at full capacity and have solid access to all hardware features: GPS, memory, cameras, mics, and other tools with no issues and cutoffs. APIs and components brought into play are all supported by the ecosystem.

Unbeatable performance speed

In terms of app performance and rendering speeds, native apps are top notch. The approach is the best fit for apps with intensive graphics, specialized apps, feature-rich apps, as well as high FPS mobile games.

Positioning in stores and markets

Native apps get support from their associated mobile app stores. Featured on Google Play or Apple App Store, mobile apps get access to a wider user audience, which in turn boosts installs by up to 700% and in general increases chances for discovery and distribution.

Strong mobile data protection

Native apps provide excellent security and work with smartphone biometrics. This feature is a must-have for mobile projects that involve sensitive data and often becomes crucial for companies in the enterprise or FinTech sector.

Ultimate user experience

In terms of app design and look & feel, native iOS and Android solutions can offer the best UI/UX possible. They follow all platform-specific guidelines, provide smooth, intuitive and simple in-app interactions that outperform all other mobile technologies.

Key Factors to Consider When Choosing the Best Framework

PWA React Native & Flutter Native
Development cost Lowest cost due to single codebase and common skillset. Depends on extra tools and skills required for development. Commonly the highest if developing for multiple platforms.
Code reusability Codebase is the same as that of a desktop version of the app. Most tools allow for code portability to major mobile platforms. No code reusability. Separate codebase per each platform.
Device features Only a few device APIs can be enabled, but it’s an ever-growing number. Lots of device-specific APIs can be accessed. All depends on the tool used. 100% access to all device APIs and hardware features.
UI/UX flexibility UI and graphics are restricted by website code. App’s UI elements can reach a fairly native look. Familiar user experience, original UI components.
App performance Overall performance of the app depends on its web browser page complexity. Apps that have complex business logic can not gain native-like speeds. Outstanding load speed. Top performance.

Final Word

We see no clear winner in this ‘battle’ of mobile app development frameworks as each one has its upsides and downsides. The option that would suit your particular mobile project the best entirely depends on features that you want to see, project objectives, industry, and other case peculiarities.

Sticking to native approach is never a bad choice, but a cross-platform way to mobile app development might often make more sense. The versatile PWAs and robust frameworks like Flutter and React Native have shown that we can build high-quality mobile apps without sacrificing user experience.

Need help with mobile app development or choosing the right platform for your project? Drop us a line and we’ll be glad to help.

Contact us
Get in touch with us and let's get your project started today!
PixelPlex