WEB, HYBRID, NATIVE

tearfuloilΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

51 εμφανίσεις

Web, Hybrid, Native — Explained
|
Craig Isakson
1
701.235.5525

|
888.sundog
|
fax: 701.235.8941
2000 44th St. S
|
Floor 6
|
Fargo, ND 58103
www.sundoginteractive.com
WE B, HY BRI D, NAT I VE
June 2013
CRAI G I S AKS ON
MOBILE ENGINEERING LEAD / SOFTWARE ENGINEER
E XPL AI NE D
Web, Hybrid, Native — Explained
|
Craig Isakson
2
Today’s mobile space can be overwhelming and
somewhat confusing. There are a number of different
terms floating around out there which can make it difficult
to make business decisions for your company’s mobile
strategy. This whitepaper will explain current mobile
technologies giving you detailed information on features,
limitations, best practices, and tools for development.
This information will help you decide which route to take
when determining a mobile strategy; web, native, or
hybrid application.
BUSINESS DILEMMA
The largest issue in today’s mobile environment facing
businesses is choice. There are a number of different
options available for a user to use when it comes to
mobile. Anything from iOS, Android, BlackBerry, and
Microsoft. When developing a mobile strategy it is key to
reach as many people as you can and to also account
for the future to some extent. Try to anticipate where the
market is going to move. Keep in mind that it took only
two years for BlackBerry to go from having the largest
user base of smartphones to almost the smallest at 6.4%
losing out to iOS and Android. The current US Market is
as shown:
Based off of these numbers, it is clear that if getting
the most out of the resources that are put towards a
mobile strategy, targeting a strategy around iOS and
Android would be advantageous. This is not to say that
something may happen and Microsoft Windows Phone
or some other mobile OS may rise to take a top spot.
These are all things that need to be considered when
developing a mobile strategy. It can be cumbersome but
it is also what makes working in mobile so exciting. It is
always changing.
TECHNOLOGIES
One of the biggest hang-ups in the mobile space is
the terminology surrounding Web, Hybrid, and Native
applications. These terms are somewhat new and on
the difficult side to comprehend. It does not help that
the space is always changing which makes the definition
to these terms somewhat of a moving target. Below is
a diagram giving a visual representation of the different
types of applications:
As shown in this diagram, native applications are platform
specific with the most capabilities. As the chart moves
across to hybrid and HTML5/Web, it is easy to see that
they are supported on multiple platforms but capabilities
can be restricted. Below will describe in great detail the
different applications and break certain applications into
sub categories as there can be multiple definitions for a
single category.
Web, Hybrid, Native — Explained
|
Craig Isakson
3
WEB APPLICATION/HTML5
The easiest way to understand a web application is to
not
think of it as a web application. A web application is
just a different way of saying a website. The only difference
with a web application when referring to the mobile space
is that the web application is designed and developed to
work well on a small screen whether it be a phone or a
tablet.
For a user to get to a web application, they would
need to open the browser on their phone and either
search or click on a link to get to that specific URL.
This is a great and easy way for your business to have
a mobile presence alongside the full desktop site. The
technologies behind a web application is HTML5, CSS,
and JavaScript. These technologies for the most part
have been around for a long time. As such, finding
developers that are familiar with them is easier than
finding developers that can write code native to platform
specific OS’s. Another benefit to web apps is that there
is no need to install software. As long as the user has a
browser, they are able to access the site. This means, if
there are software updates to the web application, all that
is needed is to push those changes to the web server
that is hosting the web application and all subsequent
visits to the web application will have the newest version.
By utilizing responsive design, the web app can change
what is presented to the user based off of screen size
and resolution.
While there are a number of benefits to using a web
application, there are also a number of downsides.
One of the most notable downsides is the speed of the
application. Since the user is essentially downloading all/
most of the data each time they hit the web application,
the connection speed becomes an issue. The speed
of the data transfer is not the only speed issue, there is
also speed issues with graphics and animations within
the application. Since the device is using the browser to
compile and render all graphics, it can be slow and not
perform as well as other methods.
Another downside to this type of application is data
storage. It is possible with HTML5 to store data using
Web Storage but this is just a simple SQL database,
which is not nearly as fast or secure as any of the devices
native database utilities. This means that if you are trying
to cache data within the browser, it will work fine, as long
as you do not have a lot of data. There will be noticeable
lag with long running data operations.
The other downside to a web application can be
classified as mostly poor user experience. For instance,
if the user is accessing a secure site, there is no way of
account management. This means that the user will need
to login each time their session has expired and they try
to access the application. Another example of the poor
user experience comes from simply having to open the
browser and either go to your bookmarks or type in the
address of the specific web application you are trying
to access. This is much more onerous than having an
installed application.
Another downside that isn’t always thought of, is an issue
with the battery. Mobile devices depend on the battery to
function. Use of a web application requires more data to
be downloaded as well as more processor for rendering
the graphics. Because of this, the battery will drain faster
than with the native application alternatives.
To recap: 1) A web application is just a website. 2)
Development for a web application is faster than other
methods. 3) Web apps do not have access to device
hardware and can present a number downsides including
speed, storage, responsiveness, and user experiences.
Web, Hybrid, Native — Explained
|
Craig Isakson
4
NATIVE APPLICATION
On the completely opposite end of the spectrum of
a web application sits a native application. A native
application is an application that is installed on your
phone that was built or compiled using it’s native
programming language. For iOS the native language
is Objective C and Android is Java. Both are similar
in that you need to install an integrated development
environment (IDE) in order to develop and ultimately install
the applications. A native application is platform specific.
An application built for iOS cannot be installed on an
Android device or a Windows Phone device and vice
versa. Because the developed apps are platform specific,
development time and expertise is greatly increased
over using a web application. It is necessary to have a
development team that is well versed in each platform in
order to build the applications.
So why would someone want to go the route of a native
application if the costs and work associated with building
the application are greatly increased over a web app?
The simple answer is because a native application has
the best performance and user experience. A native
application has a fast graphics API so all of the in-
application animations and graphics will be smooth and
appear effortless. A native application also has built in
components. What this means is the user will be using UI
components within the application that they are familiar
with. They will be the same components used by other
native and system applications. This makes the learning
curve for learning how to use the new application quite
a bit easier. Native apps use the least amount of battery
power over any other alternative. This is due to the fact
that the app’s are running how they were meant to be
running and because less data is being used due to only
needing to download only the information and not the
interface.
Native apps also have full access to all the devices
hardware and system resources. With the newer phones
this can range from camera, gps, accelerometer,
barometer, gyroscope, Wi-Fi, Bluetooth, NFC, and
any other type of hardware sensor or component. The
system resources include contacts, address book,
other applications (to an extent), accessibility options,
account management, and a variety of others. This
allows the developer/designer be as creative as possible
in developing unique and innovative solutions. In a sense,
the device becomes the limitation with native apps as
opposed to the software being a limitation with web apps.
To recap a native application is an application that is
installed on your device. It is device specific and run OS
specific code. You have full access to build any solution
as long as it conforms to the hardware. It is the most
efficient and easy to use application for the end user but
it is the most costly application to write with the steepest
learning curve.
HYBRID APPLICATION
By definition, a hybrid application is simply an application
that can be installed on a device the same way as a
native application but contains what is called a webview
that renders HTML code either via a web request or
via static HTML that is loaded as a resource in the
application. This definition covers a variety of different
types of applications that could be hybrid apps. Because
of this, it makes more sense to breakout hybrid apps into
three different categories; Thin Hybrid, Full Web Hybrid,
and Full Device Hybrid.
Web, Hybrid, Native — Explained
|
Craig Isakson
5
FULL WEB HYBRID
A full web hybrid application is an application that can
be installed as a native application. The entire native
application is a webview. The webview is a view that can
render HTML code the same way the device’s browser
can. The webview will then point to an HTML5 web
application that resides on a web server. The benefits of
a full web hybrid application is that once installed, it is
possible to update the code base in one place, the web
server where the application resides, and instantly, all of
the users will have the updated software. The downside
to this type of application is much the same as a web
application in that speed is a big issue. The users device
has to download the entire interface and data each time it
needs to render anything.

FULL DEVICE HYBRID
Much like the full web hybrid application, the full device
hybrid is a native application that contains only a
webview for displaying it’s data. The difference with the
full device hybrid is that it’s entire UI (view) and controller
logic is contained within the binaries of the installed
native application. Essentially, the HTML, JavaScript,
and CSS files for displaying and accessing the data are
installed within the native application and reside and are
rendered on the device. This mirrors the a full native data
driven application in that the application takes care of
all of the layout and accessing the data via API’s. The
full device hybrid uses JavaScript remoting and AJAX
to make callouts to API’s to receive the data needed to
display within the layouts. The benefit of this over the full
web hybrid is that there is a lot less data being passed
between the device and the web server. While not as fast
or responsive as a native application, this method will
provide the best results from HTML5.
EXAMPLE
Below is an example of a hybrid application being laid out
in Xcode, the iOS IDE:
As you can see, this is the main view for the phone and
within the main view there is a UIWebView. This view is
essentially a browser window used to render HTML code.
This is a very simple example but this is good at giving
an idea of what it would look like. If this webview were
pointed to a web application, it would be considered
a full web hybrid application. If it was using resource
files installed within the native application, it would be
considered a full device hybrid application.
Web, Hybrid, Native — Explained
|
Craig Isakson
6
HYBRID PRO’S & CON’S
The pro’s to using a Hybrid application are that you
are mixing the best of both worlds between a native
and a web application. At the core a hybrid application
uses web technologies which have less of a learning
curve than native application development. Using a
hybrid application gives the ability to write once (mostly)
and deploy to a number of different platforms. Since a
hybrid application doesn’t use native UI components,
the application has a tendency to not feel as though it
belongs on the platform depending on how different the
UI components are from the devices native experience.
Because a hybrid application is rendering HTML in a
browser, the graphics performance is not going to be as
fast or smooth as that of a purely native application. The
biggest issue with using a hybrid application is some lack
of accessibility to the devices native functionality such as
hardware and system controls.
HYBRID TOOLS
There are a number of tools out there to develop hybrid
mobile applications. Because hybrid mobile applications
are built off of web technologies, there are numerous
options available for libraries and frameworks for building
mobile UI’s. These options range from jQuery Mobile to
Foundation to any other type of responsive web design
tools. These tools provide mobile UI components,
animations, behavior, and touch aspects to your hybrid
application. These tools can also be used for your
HTML5 web apps. Where the hybrid application really
shines is it’s ability to access device specific functionality.
For this there are only a few options out there. The most
widely used option is PhoneGap.
PhoneGap allows you to use JavaScript to access device
specific hardware with the write once, use in multiple
places mentality. To give an idea of what is available,
here is a list of the current API methods available to
the developer. Not all of these will will work across all
platforms but for the most part they will work for the
biggest players:

Accelerometer - Use the device’s motion sensor

Camera - Capture an image using the device’s
camera

Capture - Capture media files using the device’s
media capture application

Compass - Obtain the direction the device is
pointing

Connection - Check network state and cellular
networking information

Contacts - Work with the devices contact database

Device - Gather device specific information

Events - Hook into native events through JavaScript

File - Hook into native file system through JavaScript

Geolocation - Make your application location aware

Globalization - Enable representation of objects
specific to locate

InAppBrowser - Launch URL’s in another in-app
browser instance

Media - Record and playback audio files

Notification - Visual, audible, and tactile device
notifications

Splashscreen - Show and hide the applications
splash screen

Storage - Hook into the devices native storage
options
Web, Hybrid, Native — Explained
|
Craig Isakson
7
PLATFORM DIFFERENCES
Below is a quick rundown on differences between the
three platforms:
Native
Html5
Hybrid
Application Features
Graphics
Native API’s
HTML, Canvas, SVG
HTML, Canvas, SVG
Performance
Fast
Slow
Slow
Native Look and Feel
Native
Emulated
Emulated
Distribution
App Store
Web
Appstore
Device Access
Camera
Yes
No
Yes
Notifications
Yes
No
Yes
Contacts, Calendar
Yes
No
Yes
Offline Storage
Secure file storage
Shared SQL
Secure file system,
shared SQL
Geolocation
Yes
Yes
Yes
Gestures
Swipe
Yes
Yes
Yes
Pinch, Spread
Yes
Yes
Yes
Connectivity
Online and offline
Mostly online
Online and Offline
Development Skills
Objective C, Jave, C#
HTML5, CSS, Javascript
HTML5, CSS, Javascript
Web, Hybrid, Native — Explained
|
Craig Isakson
8
It is important to keep in mind all the differences between
the platforms when considering a mobile strategy. Know
where your users are coming from and from what device.
Knowing this information makes it easier to decide which
route to take. For the most part, a mobile web application
is a necessity. Current mobile web traffic, depending on
where the statistics are received is equal to or greater
than desktop traffic. This means when a user is visiting
your site, there is a very good chance that they are
visiting from a mobile device.
For everything beyond a mobile web presence that
requires an actual mobile application, it is important
to know your audience and know what you want to
accomplish with the application. Typically, if a mobile
application is consumer facing, a native mobile
application is ideal providing that the project has the
time and budget for development. There is a lot that you
can accomplish with a hybrid mobile application but the
user experience can be lacking. For this reason, a hybrid
mobile application is great for a company that needs
to provide mobile functionality to their employees. This
allows for bring your own device (BYOD). The employee
can bring their own device, no matter the platform, and
still be able to use the mobile application all with little
extra development for the employer.
Mobile technology is exciting and ever changing at a fast
pace. Because of this, it is important to stay up to date
on the technologies and how to best incorporate current
and future aspects into your mobile strategy.
Web, Hybrid, Native — Explained
|
Craig Isakson
9
References:
comScore Reports March 2013 U.S. Smartphone Subscriber Market Share. 2013. Available at
http://www.comscore.com/Insights/Press_Releases/2013/5/comScore_Reports_March_2013_U.S._
Smartphone_Subscriber_Market_Share. Access May 13th, 2013.
Getting Started with HTML5 Local Storage. 2013. Available at
http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/. Accessed May 13th, 2013.
PhoneGap Documentation, API Reference. 2013. Available at
http://docs.phonegap.com/en/2.7.0/index.html. Accessed May 13th, 2013.
Understanding Your Mobile Application Development Options. 2013. Available at
http://wiki.developerforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_
Development_Options. Accessed May 13th, 2013.