Native Web or Hybrid Mobile App Development

Native, Web or Hybrid Mobile
App Development?
WorkLight Webinar Series
Agenda
Introduction
Understanding the different approaches
• Native apps
• Web apps and HTML5
• Hybrid apps
The business context
Q&A
2
Introduction
Native Apps Web Apps Hybrid Apps
101101101011011 <!DOCTYPE html PUBLIC 101101 <!DOCTYPE html

PUBLIC
110110110110110 <html>
<! - - created 2003-12-12 - - >
101011 <html>
<! - - created
110110110110101 <head><title>XYZ</title> 011110 2003-12-12 - - >
</head> <head><title>XY
101101011011011 <body> 110110 Z</title>
<p> </head>
011011011011011 Voluptatem accusantium do
110110 <body>
<p>
011101011101111 Totam rem aperiam eaque 110110 Voluptatem
</p> </p>
110110110110101 </body> 110110 </body>
</html> </html>
101000001101011 101101
3
Examples of Purely-Native Mobile Apps
4
Characteristics of a Purely-Native Mobile App
A binary “executable image”, that is explicitly downloaded
and stored on the file system of the mobile device
Distributed through the popular app store or marketplace of

the device, or via an enterprise distribution mechanism
Executed directly by the operating system

• Launched from the home screen
• Does not require another “container app” to run it
Makes explicit use of operating-system APIs
5
Native App Development
Software Source Resources

Code (e.g. images)
Application Source Code
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Distributable
Package
App Stores
6
iOS – Native App Development

Code (e.g. images)
Objective-C, Application Source Code
C++, C
SDK Tools
Executable
(Binary)
Xcode Distributable
Package
.app
App Stores
7
Android – Native App Development

Code (e.g. images)
Java Application Source Code
(some C, C++)
SDK Tools
Executable
(Binary)
Distributable
Android SDK Package
.apk
App Stores
8
BlackBerry – Native App Development

Code (e.g. images)
Java Application Source Code
SDK Tools
Executable
(Binary)
BlackBerry Java
Distributable
Plug-in for Eclipse
Package
.cod
App Stores
9
Windows Phone – Native App Development

Code (e.g. images)
C#, VB.NET, etc. Application Source Code (Sliverlight)
SDK Tools
Executable
(Binary)
Visual Studio,
Windows Phone Distributable
Developer Tools Package
.xap
App Stores
10
Native App Development Summary
Java
Languages Obj-C, C, C++ Java C#, VB.NET, etc
(Some C, C++)
Visual Studio,
BB Java Eclipse
Tools Xcode Android SDK Windows Phone
Plug-In
Dev Tools
Executable Files .app .apk .cod .xap
BlackBerry App Windows Phone

Application Stores Apple iTunes Android Market
World Market
Similar approach, but different source code and expertise

results in expensive development and maintenance
11
Characteristics of a Purely-Native Mobile App
A binary “executable image”, that is explicitly downloaded
and stored on the file system of the mobile device.
Distributed through the popular app store or marketplace of

the device, or via an enterprise distribution mechanism.
Executed directly by the operating system

• Launched from the home screen
• Does not require another “container app” to run it.
Makes explicit use of operating-system APIs
12
Native App – Interaction with Mobile Device
Graphics Touch Screen,
Mobile Operating Keyboard
System Touch Events
Data WiFi
Calls, Data GSM Network
Audio Microphone
OS-Specific APIs
Audio Speaker
Native API Calls Wide Range of
Images, Video Camera
App Services
Activation Vibration
Accelerometer,
Orientation Compass
Location GPS
Data Storage
13
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
API Apps
Calls
APIs
API High-Level GUI Calendar Contacts, Push Browser
Calls More
APIs Toolkit API Email API API API
API
Calls
Low-Level File
Network Graphics Camera
Multi-
Audio More
APIs System tasking
14
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
API Apps
Calls
APIs
GUI
Toolkit Browser
API
15
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level GUI Calendar Contacts, Push Browser More…

APIs Toolkit API Email API API API
Rendering Engine
(e.g., Webkit)
16
Mobile Browsing and Mobile Web Apps
Dremel:
Launch using 2B: Web App
Google, Wikipedia: QR-Codes
Mobile-optimized
websites
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites Pure Mobile Web Apps

• Visited by browsing • Installed and launched
• Static, navigational UI • Interactive UI
• Generic look & feel • Touch optimized
• Server-side rendering • Client-side rendering
• Require connectivity • Available offline
18
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example: jQuery Mobile:
Crossword Puzzles for iPad Boston Event App
19
HTML5 and related technologies
Static Pages Dynamic Pages Web Applications
w3c.org
whatwg.org
Main HTML5/CSS3 features on mobile

• Bitmapped and vector graphics, including animations
• Offline support and data URLs
• Geolocation
• Video and Audio
• Continuous communications with the server
• More…
20
Characteristics of Mobile Web Apps
Entirely written using web technologies
• HTML, CSS and JavaScript
Code is executed by the browser, not by the OS
Various launch mechanisms

• Typing URL, clicking hyperlink, scanning QR Code or clicking home-screen shortcut
Installation is optional
Combine cross-platform HTML5 and device-specific features optimize apps

• Touch-optimized look & feel
• No address bar
• Suggestion to pin to home screen
• Offline availability
21
Native App – Interaction with Mobile Device
Mobile Operating Keyboard
System Touch Events
Data WiFi
Audio Microphone
OS-Specific APIs
Audio Speaker
Native API Calls Wide Range of
App Services
Accelerometer,
Orientation Compass
Location GPS
Data Storage
22
Web App – Interaction with Mobile Device
Browser Mobile Operating Keyboard
System Touch Events
Data WiFi
Web
App Calls, Data GSM Network
(HTML, CSS, JS) Microphone

Audio
OS-Specific APIs
Audio Speaker
Wide Range of
W3C Services
Calls
Accelerometer,
Orientation Compass
Rendering API Calls
Engine Location GPS
Data Storage
23
Native vs. Web
Device Development Approval
Speed App Store
Access Cost Process
Native Full Very Fast Expensive Available Mandatory
Web Partial Fast Reasonable Not None
24
Introducing Hybrid Apps
Speed App Store
Access Cost Process
Hybrid
Web Partial Fast Reasonable Not None
25
Characteristics of Hybrid Apps
A Hybrid App is a native app with embedded HTML
It has all the benefits of native apps: full access to APIs, app-
store presence, etc.
Selected portions of the app are written using web

technologies
The web portions of the app can either be downloaded from

the web or packaged within the app
26
Hybrid App – Interaction with Mobile Device
Hybrid App Mobile Operating Keyboard
System Touch Events
Web Portion WiFi
Data
of App

HTML, CSS, JS
Audio Microphone
HTML
API
OS-Specific APIs Audio Speaker
calls
Wide Range
Rendering Engine API Calls of Services
API PhoneGap Accelerometer,

Orientation Compass
Native Portion Location GPS

API Calls
of App
Data Storage
27
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
Lotte Card (Korea)
28
Hybrid App Development
Native Sources HTML Sources Server

Code
Application Source Code (e.g. images)
SDK Tools
Executable
(Binary)
Distributable
Package
App Stores
29
App Development Comparison
Speed App Store
Access Cost Process
Native
Low
Hybrid Full Speed as Reasonable Available
Overhead
Necessary
Not
Web Partial Fast Reasonable
Available
None
30
No Single Approach Is Right For Everyone
Target Audience App Function
Time and Budget IT Resources
31
An Inherent Tradeoff
Native
App
Hybrid
App
User Experience
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native Web Hybrid
• Existing in-house • Direct distribution to • Breaking the

native skills the hands of users development tradeoff
• Targeting a single • Pilot application • Existing in-house web

mobile OS development skills
• Out-of-store visibility
• Dominant native via search engines • Taking the future into
functionality consideration
• Rich UI requirements
33
Future Trends
Future device fragmentation
Accelerated enterprise adoption
New features and complementing technologies
New distribution channels
34
Mobile is Strategic. Not Tactical.
Flexible Development
Secure and Scalable Integration
Ongoing Monitoring and Control
35
For More Information
Resource Location
www.worklight.com Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com Developer Zone

Self-Guided Tutorials
Technical Resources
36

Native Web or Hybrid Mobile App Development

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Native Web or Hybrid Mobile App Development

Uploaded by

Copyright:

Available Formats

Native, Web or Hybrid Mobile

101101101011011 <!DOCTYPE html PUBLIC 101101 <!DOCTYPE html

Distributed through the popular app store or marketplace of

Executed directly by the operating system

Makes explicit use of operating-system APIs

Software Source Resources

Software Source Resources

Software Source Resources

Software Source Resources

Software Source Resources

Executable Files .app .apk .cod .xap

BlackBerry App Windows Phone

Similar approach, but different source code and expertise

Distributed through the popular app store or marketplace of

Executed directly by the operating system

Makes explicit use of operating-system APIs

Calls, Data GSM Network

High-Level GUI Calendar Contacts, Push Browser More…

Pure Mobile Web Sites Pure Mobile Web Apps

Main HTML5/CSS3 features on mobile

Code is executed by the browser, not by the OS

Various launch mechanisms

Combine cross-platform HTML5 and device-specific features optimize apps

Calls, Data GSM Network

(HTML, CSS, JS) Microphone

Native Full Very Fast Expensive Available Mandatory

Web Partial Fast Reasonable Not None

Native Full Very Fast Expensive Available Mandatory

Web Partial Fast Reasonable Not None

Selected portions of the app are written using web

The web portions of the app can either be downloaded from

Calls, Data GSM Network

API PhoneGap Accelerometer,

Native Portion Location GPS

Software Source Resources

Native Full Very Fast Expensive Available Mandatory

Target Audience App Function

Time and Budget IT Resources

Cost and Time-to-Market

• Existing in-house • Direct distribution to • Breaking the

• Targeting a single • Pilot application • Existing in-house web

Future device fragmentation

Accelerated enterprise adoption

New features and complementing technologies

New distribution channels

Secure and Scalable Integration

Ongoing Monitoring and Control

dev.worklight.com Developer Zone

You might also like