Native Vs Hybrid

There are three ways to deliver an application on Mobiles –

1. Native – Built on Native Mobile Platform

2. HTML 5 – Works in browser

3. Hybrid – Built with HTML5, Can access native features

It is clear that user spend 80% of their time using Apps on mobile. That is four times more than the time they spend in browsing. Hence, browser based HTML 5 application is not the preferred way to deliver your mobile application. We have two options left before us. One, build a native application using the mobile OS platform (ex: Android or iOS). Second, use your HTML5 skills to quickly build an application and make it work as a native app on all platform using build frameworks such as PhoneGap.

Many have tried to compare and contrast Native and Hybrid. In this article I will summarize the analysis I have done over this subject matter.  After going through lot of articles and presentations, a presentation from propelics appealed to me. It is unbiased and to the point. Below are the pros and cons for each approach.

HTML 5

PROS	CONS
Cross platform deployment cost	Performance
Update Speed	Pixel Perfect UX
Availability of Skill Sets	APIs to Platform Specific Features
Support Multiple Platforms	Extensive Offline Support
Quicker Learning Curve	App Monetization
No App Store Approvals Needed	Inconsistent Browser Support

HYBRID

PROS	CONS
Mix Web Code with Native Wrapper	Performance – Browser Dependent
Less Code to Support Multi-Platform	Requires More Specialized Dev. Skills
App Store Experience	Native Apps that Don’t Look Native
APIs to Access Device Features	Risk of App Store Rejection
Make Changes w/o Resubmit to App Store	Extensive Offline Support
	Inconsistent Browser Support

Native

PROS	CONS
Rich User Interface	More difficult to Support / Maintain
Best App Performance	Increased Time to Update/ Distribute
Most Secure	Skills Can be Hard to Find
Hooks into all the device APIs	Limited App Portability
Monetization	Expensive

General verdict on HYBRID vs. NATIVE is – “Let your business requirement drive the decision”. I completely agree with the conclusion. But, some of the above points are not so evident. I would like to elaborate on some of the above aspects based on my research and experience.

One misconception about Hybrid platform is “Write Once – Deploy Everywhere”.  But, it is not completely true. In Hybrid platform, you are developing an HTML5 app (using CSS and JavaScript). Then the website wrapped using Native API with Hybrid mobile development platform (such as PhoneGap) for a specific device. The UI of the app is nothing but a web browser instance (For Apple devices, it’s Safari) with 100% height and width. And, JavaScript is used to access device specific features.

An important point to note here is, in Hybrid we are trying to make a website look like a native application with the help of a third party framework. Thus, we can carry Model and Controller part of the code to other devices. But, View should be specific to devices. If developing an application for Android, the web page should be able to mimic native UI features such as animations, scroll bounce, hide scrollbars, buttons, lists etc. (See case study of Exfm). I think this is one of the reasons why most of the PhoneGap applications are released on one or two platforms only.

We have one webpage and DOM of the page is manipulated using JavaScript. Of course, we have frameworks to manage this part.

UI

Bootstrap.js – Twitter JS Library, for fluid UI across platforms. It doesn’t quite work for complex applications

Jquery Mobile – Great DOM manipulation library, easy to learn, works great for simple demos and performance of animations is an issue. Recommended for simple projects

Snecha Touch – Based on ExtJs framework. Good animations. Learning takes some effort. It’s recommended for real projects.

Lungo -

Controller and Model

Backbone.js –gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Angular.js – MVC frame work by Google

Ember.js - Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides standard application architecture.

KnockOut.js - Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern

Look at http://todomvc.com/ to download a sample TODO list app across all possible MV* platforms.

A decent comparison and factors to consider for choosing a framework can be found here.

If you have already noticed by now, JavaScript is the main ingredient for Hybrid app development.  And, you need specialized development skill to make the app look and behave like native one.

Performance:

With all great power comes great responsibility. We can’t develop any HTML app and expect it to work on mobile smoothly. Generally, Hybrid apps need more response time than Native counterparts as their calls have to pass through an intermediate layer (PhonGap). Below articles give some tips and tricks to build better performing apps.

Creating apps with PhoneGap lessons

See case study of Exfm

*People generally refer to Weinre for debugging PhoneGap applications. Complete list of debugging tools can be found here.

Security & Offline Support:

PhoneGap has a very good write up about security for each platform.  Reverse engineering is a concern for many people since once can simple open the binary and look at JavaScript code. PhoneGap recommends downloading JavaScript at runtime. Some people felt that App store approval may become difficult task as we are loading JS at runtime, if we follow this recommendation.

Offline file security is mostly device driven. And, it has little to do with whether you are developing a hybrid or native application. Recommended defenses are

1.       Lock screen

2.       Internal Storage

3.       Full – Disk Encryption

After applying all the above, the mobile data is still vulnerable. Please refer this talk from AnDevCon IV for all offences and defenses.  There is a need for a secure data store on Mobile (SQL Cipher?).

Verdict:

Tom Gersic advice goes like this – “If you know what the devise you are going with, if you are rolling out a 1000 IPADS in the enterprises it’s going to be a lot quicker to develop for just one platform, a native application. The tool set is better. It’s going to be more performance better experience for the users. If you are rolling out a mobile website, rolling out to android, rolling out to tablets and phones, rolling out to iPads iPhones, if you are thinking in the back of your head about windows phone…. that’s when you start looking at … Hybrid development…. One codebase and quicker way to go to market”

Bottom line is if you know the platform and a smoothly performing application use Native. If you want one code base and reach out to multiple platforms choose Hybrid.

http://www.youtube.com/watch?v=ny0XfTNm1_s&feature=player_detailpage#t=696s

Sales force Mobile Services:

Salesforce has done a good job in helping the developers to build enterprise mobile applications on the platform of their choice.

1.       Authentication model is already setup. Salesforce uses OAuth 2.0 to authenticate

2.       Smart Store - encrypted data store is available for both hybrid and native platforms

3.       Developer mobile packs to quickly start with app development

4.       Salesforce Mobile SDK – REST APIs and JavaScript Remoting give access to Force.com functionality and data

5.       VF components are available for quick HTML5 application development

6.       Mobile push notifications are in the roadmap

Update:

This recent post on stack exchange is a good read.
http://programmers.stackexchange.com/questions/201979/what-stops-html5-and-js-apps-to-perform-as-good-as-native-apps