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.
Download ReportTranscript 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.
Slide 1
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 2
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 3
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 4
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 5
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 6
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 7
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 8
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 9
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 10
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 11
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 12
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 13
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 14
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 15
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 16
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 17
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 18
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 19
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 20
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 21
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 22
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 23
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 24
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 25
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 26
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 27
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 28
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 29
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 30
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 31
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 32
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 33
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 34
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 35
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 36
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
XYZ
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
XY<br />Z
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Facebook
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 2
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 3
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 4
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 5
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 6
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 7
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 8
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 9
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 10
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 11
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 12
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 13
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 14
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 15
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 16
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 17
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 18
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 19
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 20
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 21
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 22
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 23
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 24
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 25
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 26
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 27
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 28
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 29
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 30
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 31
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 32
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 33
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 34
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 35
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources
Slide 36
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
101101101011011
110110110110110
110110110110101
101101011011011
011011011011011
011101011101111
110110110110101
101000001101011
3
Web Apps
Voluptatem accusantium do
Totam rem aperiam eaque
Hybrid Apps
101101
101011
011110
110110
110110
110110
110110
101101
PUBLIC
2003-12-12 - - >
Voluptatem
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
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
6
iOS – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Objective-C,
C++, C
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Xcode
.app
App Stores
7
Android – Native App Development
Java
(some C, C++)
Software Source
Code
Resources
(e.g. images)
Application Source Code
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
Android SDK
.apk
App Stores
8
BlackBerry – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
Java
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
BlackBerry Java
Plug-in for Eclipse
Distributable
Package
.cod
App Stores
9
Windows Phone – Native App Development
Software Source
Code
Resources
(e.g. images)
Application Source Code
C#, VB.NET, etc.
(Sliverlight)
SDK Tools
Compiler, Linker
Visual Studio,
Windows Phone
Developer Tools
Executable
(Binary)
Packager
Distributable
Package
.xap
App Stores
10
Native App Development Summary
Languages
Tools
Executable Files
Application Stores
Java
(Some C, C++)
Java
C#, VB.NET, etc
Xcode
Android SDK
BB Java Eclipse
Plug-In
Visual Studio,
Windows Phone
Dev Tools
.app
.apk
.cod
.xap
Apple iTunes
Android Market
BlackBerry App
World
Windows Phone
Market
Obj-C, C, C++
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
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
13
Touch Screen,
Keyboard
Storage
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
Apps
API
Calls
API
Calls
High-Level
APIs
GUI
Toolkit
APIs
Calendar
API
Contacts,
Email API
Push
API
Browser
API
More
Audio
More
API
Calls
Low-Level
APIs
14
File
System
Network
Graphics
Camera
Multitasking
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
Apps
API
Calls
GUI
Toolkit
15
APIs
Browser
API
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
High-Level
APIs
GUI
Toolkit
Calendar
API
Contacts,
Email API
Rendering Engine
(e.g., Webkit)
16
Push
API
Browser
API
More…
Mobile Browsing and Mobile Web Apps
Google, Wikipedia:
Mobile-optimized
websites
Dremel:
Launch using
QR-Codes
2B: Web App
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
Pure Mobile Web Sites
• Visited by browsing
• Static, navigational UI
• Generic look & feel
• Server-side rendering
• Require connectivity
18
Pure Mobile Web Apps
• Installed and launched
• Interactive UI
• Touch optimized
• Client-side rendering
• Available offline
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example:
Crossword Puzzles for iPad
19
jQuery Mobile:
Boston Event App
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
•
•
•
•
21
Touch-optimized look & feel
No address bar
Suggestion to pin to home screen
Offline availability
Native App – Interaction with Mobile Device
Mobile Operating
System
Graphics
Touch Events
Data
WiFi
Calls, Data
GSM Network
Audio
API Calls
OS-Specific APIs
Native
App
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
22
Touch Screen,
Keyboard
Storage
Web App – Interaction with Mobile Device
Mobile Operating
System
Browser
Web
App
(HTML, CSS, JS)
Touch Events
WiFi
Calls, Data
GSM Network
OS-Specific APIs
API Calls
Audio
Wide Range of
Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
23
Touch Screen,
Keyboard
Data
Audio
W3C
Calls
Rendering
Engine
Graphics
Storage
Native vs. Web
24
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Web
Partial
Fast
Reasonable
Not
None
Introducing Hybrid Apps
25
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Native
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Web
Partial
Fast
Reasonable
Not
None
Web
Partial
Fast
Reasonable
Not
None
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, appstore 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
Mobile Operating
System
Hybrid App
Graphics
Touch Events
Web Portion
of App
Data
WiFi
HTML, CSS, JS
Calls, Data
GSM Network
Audio
Rendering Engine
API
Native Portion
of App
API Calls
PhoneGap
API Calls
OS-Specific APIs
HTML
API
calls
Audio
Wide Range
of Services
Images, Video
Activation
Microphone
Speaker
Camera
Vibration
Orientation
Accelerometer,
Compass
Location
GPS
Data
27
Touch Screen,
Keyboard
Storage
Hybrid App Examples
Bank of America
Morgan Stanley
28
Lotte Card (Korea)
Hybrid App Development
Native Sources
Software Source
Code
HTML Sources
Application Source Code
Resources
(e.g. images)
SDK Tools
Compiler, Linker
Executable
(Binary)
Packager
Distributable
Package
App Stores
29
Server
App Development Comparison
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full
Very Fast
Expensive
Available
Mandatory
Hybrid
Full
Native
Speed as
Necessary
Reasonable
Available
Low
Overhead
Web
Partial
Fast
Reasonable
Not
Available
None
Native
30
No Single Approach Is Right For Everyone
31
Target Audience
App Function
Time and Budget
IT Resources
An Inherent Tradeoff
Native
App
User Experience
Hybrid
App
Web App
Mobile
Web Site
Cost and Time-to-Market
32
Choosing What’s Right For You
Native
Web
Hybrid
• Existing in-house
native skills
• Direct distribution to
the hands of users
• Breaking the
development tradeoff
• Targeting a single
mobile OS
• Pilot application
• Existing in-house web
development skills
• Dominant native
functionality
• Rich UI requirements
33
• Out-of-store visibility
via search engines
• Taking the future into
consideration
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
36
Location
www.worklight.com
Industry Whitepapers
Technology Reports
Expert Webinars
dev.worklight.com
Developer Zone
Self-Guided Tutorials
Technical Resources