How to choose the right technology? Native, HTML5 or Hybrid App? Whitepaper

 Whitepaper
How to choose the right technology?
Native, HTML5 or Hybrid App?
Rainbow Riders, May 2014
1
Table of Contents
Introduction
Native App
1. Pros & Cons
2. Features
3. Performance
4. When to choose Native app?
HTML5 App
1. Pros & Cons
2. Features
3. Performance
4. When to choose Native app?
Hybrid App
1. Pros & Cons
2. Features
3. Performance
4. When to choose Native app?
Conclusion
Sources
Rainbow Riders, May 2014
2
Introduction
As a business one of the most and obvious things you need to understand in depth is your
market. The same holds true when you are contemplating whether or not to develop an
app for your business.
You could begin by answering some of the following questions: What kind of experience
and information do you want to impart on your users? Is a native (iPhone or Android) app
the way to go or might there be another, equally good option available to meet your
business requirement? How big is your budget, and how will you maintain the app after
launch?
The sole purpose of this whitepaper is to "de-mystify" some of the technical aspects of
apps. In this way we hope you'll find it easier to make informed decisions which technical
road to take on in order to reach your business goal.
When choosing which technical approach to take to apps, there really are the only three
options:
➔ Native Apps
➔ HTML5 Apps
➔ Hybrid Apps
The difference between them, however, are not just limited to whether or not you prefer
one operating system over the other. You have to consider what functionalities you want to
offer to the users, what kind of content the app makes available, whether the app is to
work in offline mode, etc. And in addition, you have to keep your own resources in mind:
Budget, maintenance, ROI
As initially stated, there’s a lot of things to keep in mind. Let’s dig in …
Rainbow Riders, May 2014
3
Native App
Native is the common term for apps developed for either iPhone, Android or Windows
Phone. As such, these apps are bought in designated stores and installed on the user’s
devices, be it smartphones or tablets.
Most often native apps get some of their content from the internet, but they can also
operate in offline mode. However, offline mode usually offers limited functionality
compared to the online mode - think of streaming services such as Spotify.
When it comes to native apps you might even have to consider the customer behavior on
different platforms. For example, Android holds the majority of the marketshare in terms of
number of apps downloaded, but iPhone still accounts for the highest revenue from the
downloaded apps.
If your budget doesn’t allow the development of both native apps at the same time, you
might want to consider which platform is best suited to meet your requirement.
When comparing native apps to HTML5 and Hybrid apps these are the general things to
keep in mind.
1. Pros & Cons
Pros
➔ Native apps provide the best
performance and use the latest
available hardware resource to
improve performance.
➔ Apps will work in offline mode (if they
don’t rely on the internet to make its
content or service available (eg.
streaming services such as Spotify, or
Google Maps).
➔ The apps are distributed through
platform’s app store providing better
access to the prospective users.
➔ The apps will have access to the latest
API’s releases on that platform.
Cons
➔ The native apps require bigger budgets
to support all the platforms that have
considerable market shares
➔ App updates needs to be downloaded by
users
➔ Appstore approval rules and waiting
times (especially for Apple)
➔ Appstore revenue share for premium
content (games, subscriptions, etc)
Rainbow Riders, May 2014
4
➔ The apps are built in languages the
platform supports and consequently
have access to IDEs (IDE is
programming environment that has
been packaged as an application
program, typically consisting of a code
editor, a compiler, a debugger, and a
graphical user interface builder), which
provide the best tools to develop and
debug the project fast.
2. Features
➔ Security features are stronger on native apps
➔ There are a lot more device features available including
◆ integration of the camera
◆ accelerometer
◆ bluetooth
◆ contacts
◆ calendar
◆ 200+ native development components for iOS and Android such as 3D
support, image and video editing, notification centre, voice recognition, maps
etc.
3. Performance
➔ Performance is better on native apps and will continue to be so for the foreseeable
future since the app platforms evolve faster than the browsers.
➔ Native apps provide more flexibility in designing and developing the user interface
and parentheses, and thus offer an overall richer user experience
4. When to choose Native app?
➔ The app concept clearly benefits from the capabilities of a native app (e.g.
Instagram)
➔ Ongoing engagement using notifications is a requirement to keep customers
engaged and up to date (e.g. Facebook or Linkedin)
➔ Security requirements, such as encryption of content and authentication, requires
native app functionality
➔ Being on the appstore is a key requirement to distribute the application (e.g.
enterprise or consumer appstores)
Rainbow Riders, May 2014
5
HTML5 App
HTML5 apps are essentially websites that might be viewed and used on mobile devices
and tablets.
One of the major advantages of HTML5 compared to native apps is that they are
cross-platform mobile applications. Where native apps are restricted to work on the
operating system for which they were built - i.e. iOS for iPhone, Android for eg. Samsung
etc. - HTML5 is platform indifferent. So, you can run your HTML5 app on an iPhone, Android
or Windows phone, no problem.
Another advantage is the diversity the technology offers developers. They can write
complex apps using standard web technologies such as HTML5, Javascript and CSS, giving
the full range of tools they know so well from the web.
That being said, HTML5 also have some disadvantages compared to the native apps. The
major weakness in this respect is that its content and interface is loaded from the internet.
Without an online connection the app doesn’t work.
1. Pros & Cons
Pros
➔ The distribution of these apps is very
easy. The web app just needs to be
deployed on a web server and then
users access it from their browsers.
➔ Since these apps is deployed/run on
browsers they are platform
independent, meaning that they can be
deployed on all devices regardless of
their OS system.
Cons
➔ Browser compatibility
➔ These apps don’t have access to the
native functionality (like accelerometer fx).
➔ Performance doesn’t match with native
apps.
➔ These apps don’t work qualitatively in
offline.
2. Features
HTML5 specifies scripting application programming interfaces - APIs (API is the interface
implemented by an application which allows other applications to communicate with it) that
can be used with JavaScript. The following APIs, are available:
Rainbow Riders, May 2014
6
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
Timed media playback
Offline Web Applications
Document editing
Drag-and-drop
Cross-document messaging
Browser history management
MIME type and protocol handler registration
Microdata
Web Storage, a key-value pair storage framework that provides behavior
similar to cookies but with larger storage capacity and improved API.
Geolocation
Web SQL Database, a local SQL Database (no longer maintained).
The Indexed Database API, an indexed hierarchical key-value store (formerly
WebSimpleDB).
HTML5 File API, handles file uploads and file manipulation.
Directories and System, an API intended to satisfy client-side-storage use
cases not well served by databases.
File Writer, an API for writing to files from web applications.
Web Audio API, a high-level JavaScript API for processing and synthesizing
audio in web applications.
ClassList
3. Performance
HTML5 is perceived as a lower quality platform, mainly because of performance. The main
problem is lack of tools. Consequently, it’s common practice for developers to favour
native apps as it ensures better performance and user experience. Furthermore, there’s a
gap between what developers are able to provide when using HTML5 and what the
clients believe is possible using HTML5.
4. When to choose HTML5 app?
➜ Apps with limited budget that need to work across multiple platforms and
browsers
➜ When user experience can be compromised
➜ Any mobile website that benefits from the additional functionality that HTML5
offers versus previous versions of HTML
➜ Any app concept that has no user benefit from being turned into an appstore app
➜ Mobile websites that might need to turn into a hybrid app (p.6) in the future
➜ An online service that needs to be searchable through search engines
Rainbow Riders, May 2014
7
➜ When the company needs to be able to do instant updates not only to the
content but also to the application logic without having to update a complete
app
Rainbow Riders, May 2014
8
Hybrid App
Hybrid apps are a mix of native and HTML5 apps. Usually, a hybrid app will be built using
HTML5 which is then wrapped up in an app in order to make it available for purchase in app
stores. For the users this means that the apps will be perceived as native because they
appear to be so.
This should be kept in mind and taken very seriously. The users will experience your app as
a native one and thus hold it to that standard. Any deviation from this standard will be
judged very harshly, and though the problem may be due to a choice of HTML5 the users
will not care as you are passing the app off as a native app. So choose wisely.
But don’t write off hybrid apps, they are quick and fairly cheap to develop and can be
distributed through the different app markets. That means that your time - and cost - to
market is significantly improved.
1. Pros & Cons
Pros
➜ Hybrid apps save development time
and costs since most of the
development is done using web
technologies which are cross platform.
Only a small portion of the code needs
to be re-implemented for other
platforms.
➜ Near to ‘Write Once, Run Anywhere’, the
strategy that made Java such a dominant
force.
➜ These applications can be deployed in
platform specific app stores.
➜ These apps can work in offline mode.
Cons
➔ The use of web-based technologies leads
many Hybrid applications to run slower than
native applications with similar functionality.
➔ Adobe Systems warns that Hybrid
applications may be rejected by Apple for
being too slow.
➔ Hybrid apps, even though they are
packaged natively, in fact are not native
apps. They execute on the platforms web
engine, Webkit in case of Android and iOS
which is another layer between the user
and the application, and so the
performance can’t match the native apps
(having appearance and functionality
consistent with what users have come to
expect on the platform)
➔ To implement a feature not yet available in
Hybrid app like Bluetooth, a plugin needs to
be implemented to provide access to the
native functionality. Implementation of the
Rainbow Riders, May 2014
9
plugin requires an interface to built in the
specific mobile native language.
Unfortunately, having to code in a specific
mobile native language defeats one of the
major the advantages of the Hybrid apps.
2. Features
A major benefit of using Hybrid apps is that they can be developed by using HTML, jQuery,
JavaScript without needing to get familiar with a variety of mobile native languages.
3. Performance
➜ Performance could be poor because some heavy original modules are hard to
customize according to the app needs, but also impossible to ignore;
➜ OS and hardware access does not perform through the native API, but through the
Hybrid (Phone Gap fx) API and thus slows down the performance. In some cases it
has even limited the app functionality options
4. When to choose Native app?
➜
➜
➜
➜
➜
Willing to compromise on UX for speed to market and cross platform support
Appstore upload is a requirement
Requirement on ongoing changes to the application logic
The budget for cross-platform support is limited
Mobile web services without an API and therefore requires webview (common
requirement for payments to avoid PCI certification for apps)
Rainbow Riders, May 2014
10
Conclusion
The choice of the technical platform for your app literally depends on the goals you are
trying to achieve. And in turn, this depends on an entire host of concerns spanning from
knowledge of your users, competitors, budget, standards, preferences, customer trends
etc. etc.
Native
Hybrid
HTML5
Discoverability
App Store
App Store
Search Engines
Upgrade
Required by the user
Required by the user
Not required by the user
Need to install
Yes
Yes
No
Access to site/app
Icon
Icon
Browser/Bookmark
Content Restriction
Yes
Yes
No
Revenue Share to the
Platform Provider
Yes
Yes
No
Gesture Support
Yes
Yes
Limited
Local Storage
Yes
Yes
Limited
Personalisation
Yes
Yes
Limited
Offline Functioning
Yes
Yes
Limited
Native UI
Yes
No
No
Cost
Highest
High
Low
Distribution
App Store/Market
App Store/Market
Internet
Development Speed
Slow
Moderate
Fast
Number of applications
needed to reach major
smartphone platforms
4
1
1
Ongoing Application
Maintenance
Difficult
Moderate
Low
Device Access
Full access:(Camera,
microphone, GPS,
gyroscope, accelerometer,
file upload, etc…)
Full access:(Camera,
microphone, GPS,
gyroscope, accelerometer,
file upload, etc…)
Partial access:
(GPS, gyroscope,
accelerometer, file upload.)
One way of reducing the number of decisions is to match the core experience you want to
Rainbow Riders, May 2014
11
give your users with the options and limitations the different types of apps give you. Then
match that with your budget and maintenance resources.
Another approach might be to consider how complex your product is - the more complex
the service the more dependent you will be on a smooth and reliable technology.
A rule of thumb we find helpful is this:
➜ Native apps are the way to go when building games, photos, videos, complex or
other device’s feature related app
➜ HTML5 is the way to go with apps that need to work in real time, but doesn’t need
access to the native layer and where performance is not stressed
➜ Hybrid is the way to go when building productivity, Utility or Enterprise apps
Rainbow Riders, May 2014
12
Sources
➜
➜
➜
➜
➜
➜
➜
➜
http://www.javacodegeeks.com/2013/12/native-vs-mobile-web-vs-hybrid-applications.html
http://www.zdnet.com/html5-now-neck-and-neck-with-native-apps-for-developer-love-7000019953/
http://en.wikipedia.org/wiki/HTML5_in_mobile_devices
http://tilomitra.com/web-vs-native/
http://www.digitaleyemedia.com/blog/mobile-app-vs.-html5
http://www.bluetrainmobile.com/blog/now-boarding-html5-vs-native-apps/#.U15iulV_t1Y
http://programmers.stackexchange.com/questions/201487/what-are-the-pros-and-cons-of-html5-native-and-hybridmobile-app-approaches
http://www.mobilemarketinguniverse.com/mobile-strategy-handbook-chapter-6-how-to-chose-the-right-technologynative-html5-and-more/
Rainbow Riders, May 2014
13