HTML5 web app VS native mobile app VS hybrid mobile app

In this blog we will look into the differences between native, mobile and hybrid mobile applications.

We will start by looking into native mobile apps, which are the conventional mobile apps. We will then look into web apps, which are written in HTML and are run using the browser. Then we will look into hybrid apps which are basically a combination of the two.

Native mobile app

Native apps have binary executable files which are downloaded and installed into the device and stored in the device memory. We can download native apps by visiting their specific app store such as iTunes for iOS and google play store for android applications. Once the app is installed on the device, the user can launch it like any other application by just tapping the application icon. Once the native app is launched, it can directly interact with the mobile operating system without any intermediary in between. The app can access all the native frameworks made available to it by the native mobile operating system. Native apps also have a look and feel typical to that of the specific mobile OS.

The mobile operating system provides some tools and utility kits for software development which are commonly called the SDK (Software Development Kit) of the mobile OS. The developers write the source code of the application in the tools provided by the OS and integrate additional resources such as images, audio, etc. Then they use the tool to compile the source code and package it with the resources in order to create an executable file which can be distributed and run on the mobile devices.

Lets take a quick look on how this is done on iOS. To create native iOS apps for iPhone / iPad, the developers write the code in Swift or objective C. They then compile and package the apps using Apple’s native tools. They all come bundled in a single IDE called XCode. The output from XCode is a .app file which can be directly submitted to the apple app store. Users can then download the .app file from the app store in the form of an application and run on their iOS devices. This complete process of developing an application is different for different operating systems. For android, blackberry and windows phone there exist separate tools for development.

So as we can see, the process and tools required for developing native apps are different for various platforms. If we write the code for one platform we cannot use it for others. This means that the process of developing and maintaining native apps for multiple platforms is very expensive. So why write native apps at all? . . Well, there are certain benefits.

Once the native apps are installed on the native device, it can access all the available hardware components of the device like the touch screen, NFC, GPS, camera, speakers, etc. This functionality is provided by the native API (Application Programming Interface) of the device. Each mobile operating system has its own unique API for each function. These APIs are very fast and powerful and lets you use the full potential of the mobile device. Therefore native mobile applications are more fast and fluid in their functionalities. On the other hand, since these APIs are unique for each operating system, porting a native application to another operating system becomes a more hard and expensive task.

Another set of APIs that the operating system provides is the GUI toolkit. Each mobile OS comes with its own set of user interface tools such as buttons, tab bars, text fields, etc. Native apps can use these components and inherit the look and feel of that mobile OS. These native UI components provide a very smooth user experience. Also if you need powerful computation, 3D graphics, or a highly responsive interface such as games, then native apps are preferred.

Web Apps

Web apps are comprised of dynamic web pages that run on browsers. They are entirely written using HTML, CSS and Javascript. Their code is executed by the browser and not by the OS. Today’s mobile phones comes with built-in powerful browsers which support HTML5, CSS and javascript. Some of the HTML5 features already available in mobile browsers are offline storage, application caching, geolocation, device orientation, Video, audio, etc. It is these features that make it possible to develop powerful mobile apps which can run inside mobile browser. However there are some important limitations of web apps.

Web apps can run only in the browser, which itself is an in-built native app. They tend to need to be connected to a Web server in order to function. Therefore web apps can run only when the device is connected to the Internet. Web app can access native mobile APIs only through the browsers. However there are many features that web apps can only access in a limited fashion. Moreover web apps are highly dependent on the browser capabilities. Users do not need to think about how the application was developed, but users always prefer native apps over web-based applications. There were many research done on this. The real answer seems to be that most users want a great, seamless and fast user experience. They really don’t care how the application was developed.

Hybrid App

There also exist a more flexible solution, which combines both native and web characteristics commonly referred to as a Hybrid App. A hybrid app is a native app with embedded HTML. It has the advantages of a native apps. It can also be hosted on the AppStores but there is no need to take the pain to update each application separately for different platforms. Hybrid apps make it easy for the company to deploy updates and changes across multiple platforms. It is basically one code base (web platform) that automatically changes the UI depending upon the device that its running on. Hybrid apps have selected portions of the app written using HTML, css and javascript which are packaged within the application itself. One disadvantage of hybrid apps are that they are not fast enough when compared to native apps. Moreover there are memory limits imposed on the browser by the operating system.

Hybrid apps generally have two components – one native portion, which has free access to everything the device offers. The second component is the web portion of the app. This part is written using web technologies. However the native portion of the app has control over the web portion, which is provided by a Bridge such PhoneGap, ionic, sencha touch, etc.

Characteristics of Native apps:

1. Native apps gets a full access to all the features of the device.
2. They have a native look and feel.
3. Fast and responsive
4. Highly expensive for development and maintenance.
5. Available on major app stores.
6. When you submit an app or release an update, the app must go through all the mandatory approval formalities of that app store.

Characteristics of Web apps:

1. Web apps have limited access to the features of the device.
2. The native look and feel can only be achieved partially on many phones.
3. Not as fast and responsive as native apps
4. Less expensive for development and maintenance when compared with native apps.
5. Not available on app stores.
6. No mandatory formalities required to submit or update a web app. The app can be used as soon as the development process gets over.