Professional Documents
Culture Documents
App Development?
WorkLight Webinar Series
Agenda
Introduction
Understanding the different approaches
• Native apps
• Web apps and HTML5
• Hybrid apps
The business context
Q&A
2
Introduction
Native Apps Web Apps Hybrid Apps
3
Examples of Purely-Native Mobile Apps
4
Characteristics of a Purely-Native Mobile App
A binary “executable image”, that is explicitly downloaded
and stored on the file system of the mobile device
5
Native App Development
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Distributable
Package
App Stores
6
iOS – Native App Development
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Xcode Distributable
Package
.app
App Stores
7
Android – Native App Development
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Distributable
Android SDK Package
.apk
App Stores
8
BlackBerry – Native App Development
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
BlackBerry Java
Distributable
Plug-in for Eclipse
Package
.cod
App Stores
9
Windows Phone – Native App Development
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Visual Studio,
Windows Phone Distributable
Developer Tools Package
.xap
App Stores
10
Native App Development Summary
Java
Languages Obj-C, C, C++ Java C#, VB.NET, etc
(Some C, C++)
Visual Studio,
BB Java Eclipse
Tools Xcode Android SDK Windows Phone
Plug-In
Dev Tools
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.
12
Native App – Interaction with Mobile Device
Graphics Touch Screen,
Mobile Operating Keyboard
System Touch Events
Data WiFi
Audio Microphone
OS-Specific APIs
Audio Speaker
Native API Calls Wide Range of
Images, Video Camera
App Services
Activation Vibration
Accelerometer,
Orientation Compass
Location GPS
Data Storage
13
Native App – High-level APIs and Built-in Apps
Downloaded Apps
Built-in Apps
API Apps
Calls
APIs
API High-Level GUI Calendar Contacts, Push Browser
Calls More
APIs Toolkit API Email API API API
API
Calls
Low-Level File
Network Graphics Camera
Multi-
Audio More
APIs System tasking
14
GUI Toolkit Provides App With “Native” Look
Downloaded Apps
Built-in Apps
API Apps
Calls
APIs
GUI
Toolkit Browser
API
15
Mobile Web Apps and Mobile Browsing
Downloaded Apps
Built-in Apps
Apps
APIs
Rendering Engine
(e.g., Webkit)
16
Mobile Browsing and Mobile Web Apps
Dremel:
Launch using 2B: Web App
Google, Wikipedia: QR-Codes
Mobile-optimized
websites
YouTube: Web App
17
Mobile Browsing vs. Mobile Web Apps
18
JavaScript Toolkits for Mobile Web App UI
SenchaTouch Example: jQuery Mobile:
Crossword Puzzles for iPad Boston Event App
19
HTML5 and related technologies
Static Pages Dynamic Pages Web Applications
w3c.org
whatwg.org
20
Characteristics of Mobile Web Apps
Entirely written using web technologies
• HTML, CSS and JavaScript
Installation is optional
21
Native App – Interaction with Mobile Device
Graphics Touch Screen,
Mobile Operating Keyboard
System Touch Events
Data WiFi
Audio Microphone
OS-Specific APIs
Audio Speaker
Native API Calls Wide Range of
Images, Video Camera
App Services
Activation Vibration
Accelerometer,
Orientation Compass
Location GPS
Data Storage
22
Web App – Interaction with Mobile Device
Graphics Touch Screen,
Browser Mobile Operating Keyboard
System Touch Events
Data WiFi
Web
App Calls, Data GSM Network
Wide Range of
Images, Video Camera
W3C Services
Calls
Activation Vibration
Accelerometer,
Orientation Compass
Rendering API Calls
Engine Location GPS
Data Storage
23
Native vs. Web
Device Development Approval
Speed App Store
Access Cost Process
24
Introducing Hybrid Apps
Device Development Approval
Speed App Store
Access Cost Process
Hybrid
25
Characteristics of Hybrid Apps
A Hybrid App is a native app with embedded HTML
It has all the benefits of native apps: full access to APIs, app-
store presence, etc.
26
Hybrid App – Interaction with Mobile Device
Graphics Touch Screen,
Hybrid App Mobile Operating Keyboard
System Touch Events
Web Portion WiFi
Data
of App
Audio Microphone
HTML
API
OS-Specific APIs Audio Speaker
calls
Wide Range
Images, Video Camera
Rendering Engine API Calls of Services
Activation Vibration
27
Hybrid App Examples
Bank of America
Morgan Stanley
Lotte Card (Korea)
28
Hybrid App Development
Native Sources HTML Sources Server
SDK Tools
Executable
Compiler, Linker Packager
(Binary)
Distributable
Package
App Stores
29
App Development Comparison
Device Development Approval
Speed App Store
Access Cost Process
Native
Low
Hybrid Full Speed as Reasonable Available
Overhead
Necessary
Not
Web Partial Fast Reasonable
Available
None
30
No Single Approach Is Right For Everyone
31
An Inherent Tradeoff
Native
App
Hybrid
App
User Experience
Web App
Mobile
Web Site
32
Choosing What’s Right For You
Native Web Hybrid
• Rich UI requirements
33
Future Trends
34
Mobile is Strategic. Not Tactical.
Flexible Development
35
For More Information
Resource Location
www.worklight.com Industry Whitepapers
Technology Reports
Expert Webinars
36