native web or hybrid mobile app development
DESCRIPTION
Analyzing the different approaches for mobile app development: native, hybrid and web. Provided by WorkLight as part of a webinar seriesTRANSCRIPT
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
3
Native Apps Web Apps Hybrid Apps
101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011
<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html>
101101101011011110110110110110110110110110101101
<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem</p></body></html>
Examples of Purely-Native Mobile Apps
4
Characteristics of a Purely-Native Mobile App
A binary “executable image”, that is explicitly downloadedand 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
binary
Distributed
Native App Development
6
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Compiler, LinkerExecutable
(Binary)Packager
Distributable Package
App Stores
iOS – Native App Development
7
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
Xcode
Objective-C, C++, C
.app
Compiler, Linker
Android – Native App Development
8
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
Java(some C, C++)
.apkAndroid SDK
Compiler, Linker
BlackBerry – Native App Development
9
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
BlackBerry Java Plug-in for Eclipse
Java
.cod
Compiler, Linker
Windows Phone – Native App Development
10
SDK Tools
Application Source Code
Resources(e.g. images)
Software Source Code
Executable(Binary)
Packager
Distributable Package
App Stores
Visual Studio, Windows Phone Developer Tools
C#, VB.NET, etc.
.xap
Compiler, Linker
(Sliverlight)
Native App Development Summary
11
Languages Obj-C, C, C++Java
(Some C, C++)Java C#, VB.NET, etc
Tools Xcode Android SDKBB Java Eclipse
Plug-In
Visual Studio,Windows Phone
Dev Tools
Executable Files .app .apk .cod .xap
Application Stores Apple iTunes Android MarketBlackBerry App
WorldWindows Phone
Market
Similar approach, but different source code and expertise results in expensive development and maintenance
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
Executed directly
operating-system APIs
Native App – Interaction with Mobile Device
13
Touch Screen,Keyboard
Graphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, Compass
Orientation
Camera
WiFiData
Images, Video
Storage
Mobile Operating System
Data
Native App
OS-Sp
ecific AP
Is
Wide Range of Services
Audio
API Calls
Native App – High-level APIs and Built-in Apps
14
File System
Network Graphics CameraLow-Level
APIsMulti-tasking
More
High-Level APIs
GUI Toolkit
Calendar API
PushAPI
Contacts, Email API
Browser API
More
Audio
Built-in Apps
Downloaded Apps
Apps
APIs
API Calls
API Calls
API Calls
GUI Toolkit Provides App With “Native” Look
15
GUI Toolkit
Apps
APIs
Browser API
API Calls
Built-in Apps
Downloaded Apps
Mobile Web Apps and Mobile Browsing
16
High-Level APIs
GUI Toolkit
Calendar API
PushAPI
Contacts, Email API
Browser API
More…
Apps
APIs
Rendering Engine(e.g., Webkit)
Built-in Apps
Downloaded Apps
Mobile Browsing and Mobile Web Apps
17
Google, Wikipedia: Mobile-optimized
websites
Dremel: Launch using
QR-Codes2B: Web App
YouTube: Web App
Mobile Browsing vs. Mobile Web Apps
18
Pure Mobile Web Sites• Visited by browsing• Static, navigational UI• Generic look & feel• Server-side rendering• Require connectivity
Pure Mobile Web Apps• Installed and launched• Interactive UI• Touch optimized•Client-side rendering•Available offline
JavaScript Toolkits for Mobile Web App UI
19
SenchaTouch Example: Crossword Puzzles for iPad
jQuery Mobile:Boston Event App
HTML5 and related technologies
20
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…
Characteristics of Mobile Web Apps
Entirely written using web technologies• HTML, CSS and JavaScript
Code is executed by the browser, not by the OS
Various launch mechanisms• Typing URL, clicking hyperlink, scanning QR Code or clicking home-screen shortcut
Installation is optional
Combine cross-platform HTML5 and device-specific features optimize apps• Touch-optimized look & feel
• No address bar
• Suggestion to pin to home screen
• Offline availability
21
Native App – Interaction with Mobile Device
Touch Screen,Keyboard
Graphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, Compass
Orientation
Camera
WiFiData
Images, Video
Storage
Mobile Operating System
Data
Native App
OS-Sp
ecific AP
Is
Wide Range of Services
Audio
API Calls
22
Web App – Interaction with Mobile Device
BrowserTouch Screen,
Keyboard
GPS
Microphone
Speaker
GSM Network
Vibration
Accelerometer, Compass
Camera
WiFi
Storage
Mobile Operating System
OS-Sp
ecific AP
Is
Wide Range of Services
WebApp
(HTML, CSS, JS)
W3C Calls
Rendering Engine
API Calls
Graphics
Touch Events
Location
Audio
Calls, Data
Activation
Orientation
Data
Images, Video
Data
Audio
23
Native vs. Web
24
Native
Device Access
Speed App StoreDevelopment
CostApproval Process
Full Very Fast AvailableExpensive Mandatory
Partial Fast NotReasonable NoneWeb
Hybrid
Introducing Hybrid Apps
25
Native
Device Access
Speed App StoreApproval Process
Full Very Fast Available Mandatory
Development Cost
Expensive
Partial Fast NotReasonable NoneWeb
Characteristics of Hybrid Apps
A Hybrid App is a native app with embedded HTML
It has all the benefits of native apps: full access to APIs, app-store presence, etc.
Selected portions of the app are written using web technologies
The web portions of the app can either be downloaded from the web or packaged within the app
26
Hybrid App – Interaction with Mobile Device
27
Hybrid App
Web Portionof App
Native Portion of App
Touch Screen,Keyboard
Graphics
Touch Events
GPSLocation
MicrophoneAudio
Speaker
GSM NetworkCalls, Data
VibrationActivation
Accelerometer, Compass
Orientation
Camera
WiFiData
Images, Video
StorageData
Audio
Web Portionof App
HTML, CSS, JS
HTML API calls
Rendering Engine
API
Mobile Operating System
OS-Sp
ecific AP
Is
Wide Range of Services
API Calls
API Calls
PhoneGap
API Calls
API Calls
Hybrid App Examples
28
Bank of America
Morgan StanleyLotte Card (Korea)
Hybrid App Development
29
SDK Tools
Application Source CodeResources
(e.g. images)Software Source
Code
Compiler, LinkerExecutable
(Binary)Packager
Distributable Package
App Stores
Native Sources HTML Sources Server
FullNative
Speed as Necessary
Reasonable AvailableLow
OverheadHybrid
App Development Comparison
30
Native
Device Access
Speed App StoreApproval Process
Full Very Fast Available Mandatory
Development Cost
Expensive
Partial FastNot
AvailableReasonable NoneWeb
No Single Approach Is Right For Everyone
31
Target Audience App Function
Time and Budget IT Resources
An Inherent Tradeoff
32
Native App
Use
r Ex
per
ien
ce
Cost and Time-to-Market
Hybrid App
Web App
Mobile Web Site
Choosing What’s Right For You
33
• Existing in-house native skills
• Targeting a single mobile OS
• Dominant native functionality
• Rich UI requirements
Native
• Direct distribution to the hands of users
• Pilot application
• Out-of-store visibility via search engines
Web
• Breaking the development tradeoff
• Existing in-house web development skills
• Taking the future into consideration
Hybrid
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
36
Resource Location
www.worklight.com Industry WhitepapersTechnology ReportsExpert Webinars
dev.worklight.com Developer ZoneSelf-Guided TutorialsTechnical Resources