native, web or hybrid mobile app development?
DESCRIPTION
Native, Web or Hybrid Mobile App Development?. Presented by: Gurpreet Singh Assistant Professor Department of School of Computing and Engineering Galgotias University. Agenda. Introduction Understanding the different approaches Native apps Web apps and HTML5 Hybrid apps - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/1.jpg)
Native, Web or Hybrid Mobile App Development?
Presented by:
Gurpreet SinghAssistant Professor
Department of School of Computing and EngineeringGalgotias University
![Page 2: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/2.jpg)
Agenda
IntroductionUnderstanding the different approaches• Native apps• Web apps and HTML5• Hybrid apps
The business contextQ&A
2
![Page 3: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/3.jpg)
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>
![Page 4: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/4.jpg)
Examples of Purely-Native Mobile Apps
4
![Page 5: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/5.jpg)
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
![Page 6: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/6.jpg)
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
![Page 7: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/7.jpg)
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
![Page 8: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/8.jpg)
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
![Page 9: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/9.jpg)
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
![Page 10: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/10.jpg)
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)
![Page 11: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/11.jpg)
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
![Page 12: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/12.jpg)
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
![Page 13: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/13.jpg)
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
![Page 14: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/14.jpg)
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
![Page 15: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/15.jpg)
GUI Toolkit Provides App With “Native” Look
15
GUI Toolkit
Apps
APIs
Browser API
Built-in Apps
Downloaded Apps
![Page 16: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/16.jpg)
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
![Page 17: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/17.jpg)
Mobile Browsing and Mobile Web Apps
17
Google, Wikipedia: Mobile-optimized
websites
Dremel: Launch using
QR-Codes
2B: Web App
YouTube: Web App
![Page 18: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/18.jpg)
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
![Page 19: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/19.jpg)
JavaScript Toolkits for Mobile Web App UI
19
SenchaTouch Example: Crossword Puzzles for iPad
jQuery Mobile:Boston Event App
![Page 20: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/20.jpg)
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…
![Page 21: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/21.jpg)
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
![Page 22: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/22.jpg)
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
![Page 23: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/23.jpg)
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
![Page 24: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/24.jpg)
Native vs. Web
24
Native
Device Access Speed App StoreDevelopment
CostApproval Process
Full Very Fast AvailableExpensive Mandatory
Partial Fast NotReasonable NoneWeb
![Page 25: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/25.jpg)
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
![Page 26: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/26.jpg)
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
![Page 27: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/27.jpg)
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
![Page 28: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/28.jpg)
Hybrid App Examples
28
Bank of America
Morgan StanleyLotte Card (Korea)
![Page 29: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/29.jpg)
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
![Page 30: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/30.jpg)
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
![Page 31: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/31.jpg)
No Single Approach Is Right For Everyone
31
Target AudienceTarget Audience App FunctionApp Function
Time and BudgetTime and Budget IT ResourcesIT Resources
![Page 32: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/32.jpg)
An Inherent Tradeoff
32
Native App
Use
r Exp
erie
nce
Cost and Time-to-Market
Hybrid App
Web App
Mobile Web Site
![Page 33: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/33.jpg)
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
![Page 34: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/34.jpg)
Future Trends
Future device fragmentation
Accelerated enterprise adoption
New features and complementing technologies
New distribution channels
34
![Page 35: Native, Web or Hybrid Mobile App Development?](https://reader038.vdocument.in/reader038/viewer/2022102909/56813d64550346895da73ccd/html5/thumbnails/35.jpg)
Mobile is Strategic. Not Tactical.
Flexible Development
Secure and Scalable Integration
Ongoing Monitoring and Control
35