Native Mobile Apps vs React Native Apps vs Progressive Web Apps

Native Mobile Apps

Native Mobile Apps

They are applications developed and designed specifically for a particular mobile platform (iOS or Android) and are usually available over Google Play or Apple App Store to be downloaded and then used. They can be updated over the air by notification from the same app stores.

Any major platform provides their own standardized SDKs, tools and interface elements. Android apps are written Java while iOS apps are written in Objective-C or Swift.

Advantages

  • Since they are targeted for specific platform they can take complete advantage of mobile device’s capabilities including but not limited to the camera, microphone, compass, accelerometer and swipe gestures
  • They offer the most responsive experience to the user
  • Performance for native applications is supposed to be the best as the operate closest to OS layer

Disadvantages

  • Platform dependent: A single app will only cater for single platform and only for a range of supported OS versions. Developer has to manage multiple apps for multiple platforms
  • It’s time consuming and subsequently expensive to build native apps

React Native Apps

React Native Apps

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from a native app in experience. React Native uses fundamental UI building blocks (components) like native iOS and Android apps. You just put those building blocks together using JavaScript and React.

Advantages

  • Mantra: “Learn Once, Write Anywhere”
  • Allows to inject native code (Objective-C / Java) when required
  • No recompiling required. With hot reloading, you can even run new code while retaining your application state.
  • This isn’t WebView based app, this is an app running in JS runtime. So it has better performance than any hybrid app.

Disadvantages

  • Though its open source, there is growing support and some industry giants (Facebook, Instagram, Airbnb) are using it, this is still relatively new.
  • As all network APIs are polyfilled, the network traffic doesn’t appear in Chrome developer tools. So debugging network traffic can become a bit harder. (There are alternatives)
  • Ideally we could share 100% of the code between iOS and Android which is a great thing but it’s usually not practically possible

Progressive Web Apps

Offline Enabled, Performant, Near Native Experience

A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.

These are traditional responsive web apps written on Angular, React or any other framework which can run on all devices (Desktop, Mobile — all platforms). But on platforms with advanced support (currently Android and Firefox on Android/Windows devices) these apps can tap into native capabilities of the system.

Service Workers is the feature which acts as an engine to give normal web apps native powers. Apple currently doesn’t support Service Workers but they are working on it. Google and Microsoft provide Service Workers support in their OS and browsers.

Traits

  • Progressive — Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet
  • Responsive — Fit any form factor, desktop, mobile, tablet, or whatever is next
  • Connectivity independent — Enhanced with service workers to work offline or on low quality networks
  • App-like — Use the app-shell model to provide app-style navigation and interactions
  • Fresh — Always up-to-date thanks to the service worker update process
  • Safe — Served via TLS to prevent snooping and ensure content hasn’t been tampered with
  • Discoverable — Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them
  • Re-engageable — Make re-engagement easy through features like push notifications
  • Installable — Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store
  • Linkable — Easily share via URL and not require complex installation

Advantages

  • Quickest to develop
  • Single codebase for all your Platforms (Web, Android, iOS)
  • Cross Platform
  • Developer controls the update process completely. No App Store involved
  • Usable without installation, UX is great
  • Performance difference with native can be reduced using offline caching

Disadvantages

  • Service workers support is not available on Apple platform, so web app will run fine on iOS and Mac but it won’t be able to tap into native capabilities.

Resources