Now is a good time to know the truth about Native vs. Hybrid vs. PWA Apps

An Overview

Do you have a brilliant product idea in your head, which will turn heads all over the Internet? Choosing a stage with maximum audience is a no-brainer. The product should be at the reach of a user’s hand if it must be used.

Going by the statistics of time spent in different arenas by an average user, the digital media that enjoys the maximum time spent by a user is a mobile app.

Going by the current trend, the easiest way to reach millions of minds (and hearts) is through the ubiquitous 6-inch pandora’s box!

Now the question is: which road will you choose to settle into maximum Home screens with your app efficiently?

Three ways to make your app settle on a Home screen

  • Native App – The safe, slow, but steady way
  • Hybrid App – The easy way with a lot of guides
  • PWA (Progressive Web App) – The newest kid on the block
  • (progressive though sometimes bumpy)

And, that my friends, is just the beginning of this competition!

Don’t Be Like Mark Zuckerberg!

Mark Zuckerberg regretted his decision of relying too much on HTML5 rather than native applications.

Therefore, don’t be like Mark! Be clear about which path you should take before you start developing your app.

Whacking trees with a blunt axe is no way to develop an app!

Listen to Lincoln

“If you give me four hours to cut a tree, I’d spend the first three hours in sharpening the axe.” – Abraham Lincoln

 

What’s the BIG deal about Native Apps

In this method, the apps are developed by using different languages and technologies for various OSs, such as android and iOS (Windows, anyone!?).

There are many languages developed specifically for a particular OS. The most common ones used to develop apps are C#, Swift, and Java. This method is usually followed when your app contains many animations and is data heavy.

You would want to use the full potential of the OS yourself instead of depending on the browser or the WebView. It is, sometimes, a herculean task to develop the same app with a totally different technology for two different OSs. For example, take Snapchat, the app. It has the same UI for both the OSs but the development is done entirely by different set of developers for both, respectively.

What Happens Behind the Screen

There’s no hidden layer here. It’s an application on top of your OS.

Thanks to this, Native apps are usually smoother and lighter than the other two.

I would say an app developed by using this path is like an apple (yes, the fruit!) developed organically and traditionally among other apples, which are developed by using a lot of agents!

The artificial apple doesn’t pose any trouble till it gives the same taste and nutrients to its consumer as a natural apple does.

Only when the user recognizes that the apple doesn’t give him/her the same taste and nutrients, will he/she have a problem and then will turn to organic apple!

When should you choose Native apps

  • When you want to access device features
  • When your app has complex animations and is data heavy
  • When you’re 100% sure about your app getting installed. And, you’re not worried about losing user traction
  • When you’re worried neither about the higher number of resources needed nor the time required to develop for different platforms

 

What’s the BIG deal about Hybrid Apps?

Develop once and deploy anywhere is the strategy used here.

In simpler words, write once, run anywhere!

The development team develops the application using HTML, JavaScript, and CSS. There are many approaches for developing Hybrid apps. There has been a significant progress in Hybrid apps, which sometimes makes it impossible to distinguish between Hybrid apps and Native apps (when developed properly).

Before you read further, please watch this HTML5 Mobile App Challenge.

HTML5 Mobile App Challenge Video

What Happens Behind the Screen

The way it works depends on the path you choose to take. If it is Cordova, PhoneGap, or Ionic, it makes use of something cool that the phone provides called WebViews.

The WebView then runs the app as a Web app on top of it. There are many WebViews provided by smartphones. The most widely used Web View is the WKWebView provided by iOS and Android.

With both these devices, there were few compatibility issues, which have been resolved over time. Now, WebView has matured very well.

Leveraging Apache Cordova

Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code.

As a side note, Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools.

Note: For more context about this history, check out PhoneGap, Cordova, and what’s in a name?

Where to find these plug-ins

These plug-ins include APIs for accessing the device’s accelerometer, contacts, camera, and more. There are also several plug-ins that are built and maintained by the developer community at large. These can be found in the Apache Cordova Plugins Registry. A curated subset of these plug-ins that have been thoroughly tested, documented, and extended can also be found at the Verified Plugins Marketplace.

The best-known framework, Apache Cordova, embeds HTML5 code inside a WebView and then provides a foreign function interface (FFI), or a ‘native bridge’, to access the native resources on the device. Thus, a developer using a Cordova-friendly framework, such as Kendo UI Mobile can write a few lines of code to leverage a native camera in a cross-platform-friendly fashion.

When should you choose Hybrid

  • When you want to get into the market place
  • When you want to make use of device features
  • When your app is mostly form-based and doesn’t carry too much data
  • When you or your resources are proficient in JavaScript frameworks, which increases speed of development

 

PWA – What’s the BIG deal?

The new, progressive and easy route that most developers take in recent times is PWA.

PWA takes up very small space on a Home screen with minimal effort, thanks to Google developers. The idea was proposed in 2015 and has matured gracefully since then.  Frances Berriman and Google Chrome engineer Alex Russell coined the term ‘Progressive Web Apps’ to describe apps that took advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to PWAs, which run smoothly on their native operating system (OS).

The web app, which opens on your Web browser, can be added as a bookmark on to your Home screen by using the Add to Home Screen option in Chrome for Android devices and Safari for iOS devices.

If you’re worried about it working offline, it can be made more than a bookmark by using the cache that these browsers provide. It is basically a web application, which can morph itself like a complete app with ease. All you must do is develop your web app with responsive design and create service workers to make use of the browser’s cache.

What Happens Behind the Screen

When you click Add to Home Screen, a bookmark is added on the Home screen. Next time, when you click it, it is this bookmark, which opens the app by using a Web browser.

Service workers help you cache data in the browser. This makes your app open swiftly just like a native app. Thus, it gives the feel of a native app while reducing the effort on development by more than half than what’s required for a native app.

Also, JavaScript is rapidly growing to give developers the power to control a lot of device features. JavaScript now offers a rich set of APIs to control device features smoothly.

PWA: Success stories

There are many success stories with PWA, with Alibaba being the most popular one, as they resulted in 76% more conversion when they switched to PWA.

Also, have a look at a few interesting apps designed via the PWA route!

The recent Google IO conference discussed and showcased many apps that succeeded via the PWA route!

Watch the Google IO Conference Video

If you’re a newbie in the market, it is essential that you’ve a website to attract new users and consumers. Also, a website is the place where anyone would go, if he/she faces any issue.

So, the question to answer is this: “When you anyway must develop a website for your business or product, then why not go the PWA way?

Because developing a PWA gives you a responsive and fast website, a mobile app, and a desktop app.

Why should you opt for PWA

A great gift from PWA is maintaining user traction from the time you intrigue a user to actually using it.

It also greatly reduces the number of steps taken by the user to install the app on his phone and use it.

In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users. –  Gabor Cselle

Source: https://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Another advantage to go for PWA is that it gives regular updates without much interaction from the user and, that too, with minimum hassle.

When should you choose PWA

  • When you want to bypass the market place (aka Google Play Store for Android and App Store for iOS, respectively) and you’re very clear about your user base and how to target them. This is what Google is developing as you’re read this blog! So, wait and watch what happens in this space! 😊
  • When you want to give regular updates to your app
  • When you or your resources are strong only on Web development
  • When your app requires the least use of device features Say, it’s mostly form-based.
  • When you want the installation to be as easy as possible

Side-by-side Comparison Video of PWA vs. Native Apps!

 

Closing Notes

While the Internet is going gaga over PWA, it has a few limitations currently.

Although there is a steady progress in PWAs across all platforms and many developers are positive about the big giants solving these limitations, there’s a divide among people who think there should be an inhibition in minds of developers going for PWAs for data-heavy and animation-intensive apps.

  • Which one do you think will take over our phone screens soon?
  • Do PWAs really have the potential to replace Native apps’ development in another five years?
  • Will Native apps’ development continue till smartphones exist?
  • What does the future hold for Hybrid apps?

What’s your call? I would appreciate your views, comments, and feedback. I’ll be more than glad to respond!

 

Disclaimer

Please note that the views, thoughts, and opinions expressed in this blog post belong solely to the author, and not necessarily to the author’s employer, organization, committee or other group or individual.

 

References

4 Replies to “Now is a good time to know the truth about Native vs. Hybrid vs. PWA Apps”

  1. Nice piece of work, Divya!

    It is well written even I can understand! I love the way you used the same image to explain various technical approaches. Great collection of images; analogies, and quotes.

    You made it very concise wisely, yet articulating important aspects and adding references to help explore further.

    It sure will help the mobile developers choosing which path to take when choosing the mobile application implementation approach.

    Look forward to reading your next article!

  2. im not much of a reader on tech things, but this post is awesome divya…your writing style is good too. pls do keep writing 🙂 all the best

Leave a Reply

Your email address will not be published. Required fields are marked *