Web App vs Native App vs Hybrid App

Web App vs Native App vs Hybrid App

Written By: Debasis Das (23-May-2015)

Today we are choosing a very controversial topic to write on, there is a never ending battle between technology experts and aficionados as to what is the better approach and what should be the default choice.

The answer depends on what is your application trying to achieve, Is it a gaming application? Is it a online retail store? Is is a learning portal? Is it an extension to already established company etc.

Taking an example of having a simple survey tool application where end users are expected to answer to survey questions and the response is stored in a remote database. The questions can change dynamically based on the market segment the end user belongs to. This simple application can be developed in Web App using HTML5, CSS and JS and making it responsive would work on any mobile browser.

Now the above simple application can quickly turn complicated  if it is desired to add Camera Access or to store the survey response in offline storage and sync the response to the remote database once the user goes online, so we are again back to the question what should we do and what technology options should we choose for developing an application.

In this article we will discuss possible options based on features and functionalities, ease of development keeping in mind scalability, maintainability, total cost of the application over the lifetime (development, maintenance & support), Time to market etc.

Web App vs Native App vs Hybrid App

What is a Native App? What is a Web App? & What is a Hybrid App?

Native Apps

  •  Are distributed through app stores and are installed locally on a user’s device
  • Are developed using Objective C, Swift, C++, Java
  • Are tightly integrated with the underlying operating system
  • Dependent on App-store approvals
  • Has to be built for specific screen sizes and operating systems
  • Out of Box Features in a Native Application
    • Provides infrastructure for event driven behavior
    • Helps manage applications, windows and workspace
    • Rich library of UI objects are available
    • Supports drawing and imaging
    • Supports interaction with file system and workspaces
    • Supports concurrency, multi threading, lazy loading
    • Supports internationalization
    • Support basic printing to advanced printing
    • Supports different text representation
    • Maintains applications preference
    • Handles Undo and Redo Management
    • Supports Audio and Video

Web Apps

  •  Works in a web browser or a mobile web browser
  • Primarily built using HTML5, CSS and Java Script
  • Requires a web browser to run
  • Time to market is the fastest, No App-Store Approval is required.
  • Can look a lot like a native application.
  • Can be responsive in nature to run on multiple web browsers across multiple devices adjusting to different screen sizes.

Hybrid Apps

  •  Primarily built in HTML5, CSS and Java Script
  • Embedded in a native wrapper
  • Takes the benefit of both worlds (Web & Native)
  • Renders the web content in an embedded web browser inside a native app.
  • Are built for specific devices (OS Dependent, at-least the native wrapper part)
  • Has the same time to market as a native app owing to app store approvals
Sl NoFunctionalityNative AppWeb AppHybrid AppComments
1Tapping into the device hardware capabilty★★★★★★★☆☆☆★★★★☆
2Computational Power★★★★★★★★☆☆★★★★★For Hybrid some heavy calculations can be offloaded to the native wrapper part
3Local Storage, Offline Capability★★★★★★★★☆☆★★★★☆
4User Experience, User Interaction & personlization★★★★★★★★★☆★★★★☆
5Responsive Design★★☆☆☆★★★★★★★★★★
6Monetization★★★☆☆★★★★☆★★★☆☆
7Time to Market, Approvals in App-stores★★★☆☆★★★★★★★★☆☆
8Application Update Frequency★★★☆☆★★★★★★★★☆☆
9Discoverability, Search Engine Optimization, Application Reach★★★☆☆★★★★★★★★☆☆
10Internationalization & Localization★★★★★★★★★★★★★★★
11Prototyping Options★★★★★★★★★☆★★★★☆
12Charts & Graphs★★★☆☆★★★★★★★★★☆
13Platform Independence★★☆☆☆★★★★★★★★☆☆
14Gaming Applications★★★★★★★★☆☆★★★☆☆
15Development Cost★★★☆☆★★★★★★★★★☆
16Open Source Contribution & Third Party Frameworks★★★☆☆★★★★★★★★★☆

Tapping into the Device Hardware Capability

  • Accessing the Camera
  • Bluetooth Connectivity
  • GPS
  • Scan Features
  • Accessing the accelerometer
  • Accessing Photo Library

Developing in native gives developers full access to the latest and greatest device features.

For Web Development – PhoneGap is an option, But for direct access to device from a web app, there is still some ground to be covered in Web Development

Only a few device APIs like Geo Location can be accessed from web app, but the number of accessible features through Web APIs is growing

Computational Power (e.g: Front end calculations)

Sometimes when it is desired to do calculation at the front end (e.g: what if analysis), without relying on a server transactions.

Churning huge amount of data or iterating through a million records in an array. Developers and users have multiple cores available at their disposal to take the load of these heavy calculations. These days most of the machines comes with 8 ~ 16 GB RAM.

Another example is Image / Photo Processing (e.g: Photoshop) where users can apply multiple filters on an image or change the alpha of 1 million pixels of an image or compare two photos based on resemblance to arrive at possible duplicates. These kind of features and functionality are better off being developed in a native application and the language of Choice can be C, C++, Objective C, Swift etc.

For a web counterpart, developers are mostly restricted with Java Scripts.

Local Storage / Offline Capability

Not everyone is connected to the internet all the time, Sometimes it is desired that Applications should also work offline & when the users go online the offline data gets synched with a remote database or cloud storage.

Native applications have complete control on the offline storage, be it while using document storage using the device file system or by using Core Data and SQLite.

Web applications are catching up with support from browsers like (Chrome & Safari) but native wins by a huge margin when it comes to offline storage.

Native Offline Storage Options

  • Core Data
  • Local Database (MySQL, PGSQL, Local MongoDB Setup)
  • SQLite Database

Web Offline Storage Options

  • Application Cache
  • Local Storage
  • Session Storage

User Experience, User Interaction & Personalization

UI features & gestures like zoom, pan, scroll, swipe are better & smoother in a native UI as compared to a web UI.

Annotation, Voice Control, Accessibility are features which are readily available in a native UI.

Complex UI Design – In a web application, developers are restricted to svg, css and image usage, In a native UI, we can create any User Interface we want.

With a native development, we can accelerate UI performance by leveraging the device hardware.

For a web app, the application are limited by the capability of a web browser, With Native apps there is absolute control over the interface and integration points that can provide a better responsive UI than a mobile web app.

Tabular Data: Rendering around a 100K records in a screen would need infinite scrolling, lazy loading, pagination in a web app. A static page with 100K records would have a huge memory impact and thus increased load time and memory consumption. In a native app the UI can be tied to a sqlite datasource and we can achieve a smoother and faster load time and responsive scrolling.

Responsive Design

A big win for web development is to build an responsive web application which runs on all browsers across multiple operating systems.

One Code Base: Twitter Bootstrap is an amazing framework that gives the out of box initial setup and drastically reduces the development and maintenance cost.

Even to make an app run in both an iPhone and iPad, device specific handling needs to be done and if developers are going forward with one code base for both iPhone and iPad, the view layer code can quickly become convoluted.

Refer to Twitter Bootstrap here http://getbootstrap.com/

There are tons of free and paid bootstrap templates available at http://bootswatch.com/  & https://wrapbootstrap.com/

Monetization

In App Purchase vs Add to Cart

For native & hybrid apps – There are more monetization opportunities but the downside is the app stores takes a percentage and there is an associated initial setup cost.

For web apps, there are no App Stores commission or setup costs, there are monetizations from Advertisements and Subscriptions as well.

Time to Market, Approvals in App Store

Once an application is developed, taking it to the market hugely varies between an web app and a native app. For e.g: Apple has a stringent guideline when submitting an app to the app store. Sometimes it may take from weeks to months to get an application approved in App Store. For Applications having In-App purchases the rules are even more stringent.

 

Application Update Frequency

How often are you going to update your application. How many releases are expected to be made in a year.

Native application with a frequent updates might be painful, Apart from the fact that each release has to go through the same App Store Approval, it is a burden on the end user point of view to continuously do a software update on the device to get the latest software version.

If your application expects to have frequent updates it is advisable to go with the responsive web app approach

Discoverability, Search Engine Optimization, Application Reach

Discoverability – How easily can a user find your application, A quick google search and click on a link vs Search in app stores, download, wait for installation before starting to use it.

Native Applications are closed environments and cannot be crawled by search engines. If your primary marketing strategy is to increase visibility among search engines then developing a responsive web app is the way to go.

Web apps have a much wider reach and a bigger audience.

Internationalization & Localization

Adapting a software to different languages and regional differences. Internationalization is the process of designing the software so that it can be potentially be adapted to various language without engineering changes. Localization is the process of adapting internationalized software for a specific region or language by adding locale specific contents.

Both Web and Native Development are equally matured and supportive when it comes to Internationalization and Localization

Prototyping Option

Creating a prototype is purely dependent on skills and the list of prototyping tools that are available to a developer and also how comfortable the developer is in using a tool or a reusable template.

So, to make the comparison fair, we assume that the developers/designers have basic understanding of the language, frameworks & tools.

Some commonly used tools for web prototyping are Text Edit, BBEdit, Sublime Text vs xCode, Interface builder for creating prototypes for native UI.

Using xCode / Interface Builder / Story Board, drag and drop from the UI libraries it is relatively faster to build a minimally functional native User Interface Prototype.

Charts & Graphing Options

There are multiple mature, beautiful and powerful charting and graphing options for web development as compared to Native,

Some of the popular and powerful charts and graphing libraries are as follows

Platform Independence

Web apps wins !!

Building a native application is a separate development effort for each device platform.

Even when the platform is same, there is development effort associated with screen size and form factor.

Web apps (Responsive) will run on any device and on most of the web browsers (desktop , tablet and handheld)

Gaming Application

Native applications wins with a huge margin based on the frames per second rendering and GPU usage.

Some games for gaming consoles vary in the range of 50GB to 100GB in packaging size. Even without considering these heavy applications like Uncharted or Halo, developing applications like subway surfers, angry bird or temple run, native game is still a much better option as compared to developing games for the web.

OpenGL

Cross Language, multi-platform application programming interface for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics processing unit to achieve hardware accelerated rendering

https://developer.apple.com/opengl/

WebGL – Web Graphics Library

Javascript API for rendering interactive 3D Computer Graphics and 2D Graphics for any compatible web browser without the use of any additional plugins. WebGL elements can be mixed with other HTML elements. WebGL uses the HTML5 canvas element and is accessed using Document Object Model (DOM) interfaces

Some beautiful WebGL experiments can be found at the following location Chrome experiments https://www.chromeexperiments.com/webgl

Famo.us

High-performance javascript library for animations & interfaces

http://famous.org/

Game Development in OSX

  • SpriteKit – Used to create graphically rich, animated 2D-sprite based games that are optimized for iOS and OSX
  • SceneKit – High level 3D graphics framework helps creating 3D animated scenes and effects into your apps
  • Metal – provides access to GPU enabling maximizing the graphics and computing potential of the apps.

Development Cost

The effort required to develop a web application is lesser as compared to a native application. Native App Development is comparatively a more specialized skill set.

In native development if multi-device support is desired, the development and maintenance cost can soar up. Responsive web designing comes to rescue and is a much cheaper alternative in terms of overall cost (development, maintenance & support

Open Source Contribution & Third Party frameworks

Simply going by statistics, there are far more reusable components and libraries available for web development as compared to native. Today there are far more open source contributors and developers working in Web development as compared to native reusable components.

Some of the available libraries & open sources are as follows

Web Development

Native Open Source

Some Statistics

As of May 2015 (http://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/)

  • Google Play ~ 1.5 Million
  • Apple App Store ~ 1.4 Million
  • Amazon App Store – 0.36 Million

Summary

It all boils down to the fact, what is your application trying to achieve and how much return on investment is expected from the app. Are you trying to reach out to a specific target audience.

While there was a time when there were games which were considered console sellers (God Of War, Uncharted for Playstation , Halo for Xbox).

If you are game company do you want to loose out on a big segment of Gamers who use a different console.

Subway surfers and Temple Run are examples where the game development did not stop at iOS or Android, They have the apps available for both the operating systems.

If you are an online retail store its probably advisable for you to develop in iOS Native App, An Android App and also a responsive web app that runs both a mobile and desktop browser, thus there would be an assured guarantee that you are not loosing out on potential customers because of there inherent choice of using one device vs the other

 

Posted in Charts n Graphs, Cocoa, Cocoa Touch, Generic, iOS, iOS Games, Objective C, Web Technology Tagged with: , , , ,
3 comments on “Web App vs Native App vs Hybrid App
  1. Imran Khan says:

    worth reading. Thanks for posting it.

  2. Vaibhav Ganju says:

    Best comparison found over net.
    Thanks for the information.

  3. Andrey Khachaturov says:

    Great comparison.
    Just one suggestion – I would also add http://www.anychart.com in the list of the best JavaScript based charting libraries.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news