Native, Web or Hybrid Mobile App Development?
Presented by:
Gurpreet SinghAssistant Professor
Department of School of Computing and EngineeringGalgotias University
Agenda
IntroductionUnderstanding the different approaches• Native apps• Web apps and HTML5• Hybrid apps
The business contextQ&A
2
Introduction
3
Native AppsNative Apps Web AppsWeb Apps Hybrid AppsHybrid Apps
101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011
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>
<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html>
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
6
SDK Tools
Application Source CodeApplication Source Code
Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Compiler, LinkerCompiler, Linker Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
iOS – Native App Development
7
SDK Tools
Application Source CodeApplication Source Code
Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
XcodeXcode
Objective-C, C++, C
Objective-C, C++, C
.app.app
Compiler, LinkerCompiler, Linker
Android – Native App Development
8
SDK Tools
Application Source CodeApplication Source Code
Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
Java(some C, C++)
Java(some C, C++)
.apk.apkAndroid SDKAndroid SDK
Compiler, LinkerCompiler, Linker
BlackBerry – Native App Development
9
SDK Tools
Application Source CodeApplication Source Code
Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
BlackBerry Java Plug-in for
Eclipse
BlackBerry Java Plug-in for
Eclipse
JavaJava
.cod.cod
Compiler, LinkerCompiler, Linker
Windows Phone – Native App Development
10
SDK Tools
Application Source CodeApplication Source Code
Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
Visual Studio, Windows Phone Developer Tools
Visual Studio, Windows Phone Developer Tools
C#, VB.NET, etc.
C#, VB.NET, etc.
.xap.xap
Compiler, LinkerCompiler, Linker
(Sliverlight)
Native App Development Summary
11
Languages Obj-C, C, C++ Java(Some C, C++) Java C#, VB.NET, etc
Tools Xcode Android SDK BB Java Eclipse Plug-In
Visual Studio, Windows Phone
Dev Tools
Executable Files .app .apk .cod .xap
Application Stores Apple iTunes Android Market BlackBerry App World
Windows 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
Native App – Interaction with Mobile Device
13
Touch Screen,Keyboard
Touch Screen,Keyboard
Graphics
Touch Events
GPSGPSLocation
MicrophoneMicrophoneAudio
SpeakerSpeaker
GSM NetworkGSM NetworkCalls, Data
VibrationVibrationActivation
Accelerometer, Compass
Accelerometer, CompassOrientation
CameraCamera
WiFiWiFiData
Images, Video
StorageStorage
Mobile Operating System
Mobile Operating System
Data
Native App
Native App
OS-Specific APIs
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
GUI Toolkit Provides App With “Native” Look
15
GUI Toolkit
Apps
APIs
Browser API
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
API Calls
API C
alls
Mobile Browsing and Mobile Web Apps
17
Google, Wikipedia: Mobile-optimized
websites
Dremel: Launch using
QR-Codes
2B: 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.orgwhatwg.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 DeviceTouch Screen,
KeyboardTouch Screen,
KeyboardGraphics
Touch Events
GPSGPSLocation
MicrophoneMicrophoneAudio
SpeakerSpeaker
GSM NetworkGSM NetworkCalls, Data
VibrationVibrationActivation
Accelerometer, Compass
Accelerometer, CompassOrientation
CameraCamera
WiFiWiFiData
Images, Video
StorageStorage
Mobile Operating System
Mobile Operating System
Data
Native App
Native App
OS-Specific APIs
Wide Range of Services
Audio
API Calls
22
Web App – Interaction with Mobile DeviceBrowserBrowser Touch Screen,
KeyboardTouch Screen,
Keyboard
GPSGPS
MicrophoneMicrophone
SpeakerSpeaker
GSM NetworkGSM Network
VibrationVibration
Accelerometer, Compass
Accelerometer, Compass
CameraCamera
WiFiWiFi
StorageStorage
Mobile Operating System
Mobile Operating System
OS-Specific APIs
Wide Range of Services
WebApp
(HTML, CSS, JS)
WebApp
(HTML, CSS, JS)
Rendering Engine
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 Store Approval
Process
Full Very Fast Available Mandatory
Partial Fast Not NoneWeb
Development Cost
Expensive
Reasonable
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 AppHybrid App
Web Portionof App
Web Portionof App
Native Portion of App
Touch Screen,Keyboard
Touch Screen,Keyboard
Graphics
Touch Events
GPSGPSLocation
MicrophoneMicrophoneAudio
SpeakerSpeaker
GSM NetworkGSM NetworkCalls, Data
VibrationVibrationActivation
Accelerometer, Compass
Accelerometer, CompassOrientation
CameraCamera
WiFiWiFiData
Images, Video
StorageStorageData
Audio
Web Portionof App
HTML, CSS, JS
Rendering EngineRendering Engine
Mobile Operating System
Mobile Operating System
OS-Specific APIs
Wide Range of Services
API Calls
API Calls
PhoneGapPhoneGap
API Calls
API Calls
Hybrid App Examples
28
Bank of America
Morgan StanleyLotte Card (Korea)
Hybrid App Development
29
SDK Tools
Application Source CodeApplication Source Code Resources(e.g. images)
Resources(e.g. images)
Software Source Code
Software Source Code
Compiler, LinkerCompiler, Linker Executable(Binary)
Executable(Binary) PackagerPackager
Distributable Package
Distributable Package
App Stores
Native SourcesNative Sources HTML SourcesHTML Sources Server
FullNative
Speed as Necessary
Reasonable Available Low OverheadHybrid
App Development Comparison
30
Native
Device Access Speed App Store Approval
Process
Full Very Fast Available Mandatory
Development Cost
Expensive
Partial Fast Not AvailableReasonable NoneWeb
No Single Approach Is Right For Everyone
31
Target AudienceTarget Audience App FunctionApp Function
Time and BudgetTime and Budget IT ResourcesIT Resources
An Inherent Tradeoff
32
Native App
Use
r Exp
erie
nce
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