Mobile Development:
HTML5 Vs Native
By Rohit Ghatol
Director of Engineering,Synerzip
Author- Beginning PhoneGap
1
About me
•
Director of Engineering – Synerzip
•
Author- Beginning PhoneGap
•
Architect of QuickOffice (now Google)
Product, Connect
•
QuickOffice Connect
o
o
Document Sync and Authoring Product
Built as a Hybrid Mobile App
www.synerzip.com
2
Mobile Apps
www.synerzip.com
3
Topics
•
•
•
•
Types of Mobile Apps
Hybrid Case Study
When to choose which route?
What tools are available?
www.synerzip.com
4
Expectations from Mobile Apps
Driving a Car
Car Pooling
Public Transit
= Native App
= Hybrid App
= HTML5 App
www.synerzip.com
5
Rich Mobile Experience
Levels of rich mobile experience
•
•
•
•
•
Level 0 – No Change for Mobile, web
app just accessed via mobile browser
Level 1 – Mobile-Friendly Web App/Site
Level 2 - HTML5 Mobile App
Level 3 - Hybrid Mobile App
Today’s Focus
Level 4 - Native Mobile App
www.synerzip.com
6
Topics
•
Expectations from Mobile Apps
•
Hybrid App UseCase
When to choose which route?
What tools are available?
•
•
www.synerzip.com
7
Types of Mobile Apps
•
HTML5
•
Native
•
Hybrid (HTML5 + Native)
www.synerzip.com
8
HTML5 Mobile App
c
www.synerzip.com
9
HTML5 Overview
www.synerzip.com
10
Twitter - Desktop Vs Mobile
www.synerzip.com
11
HTML5 App Overview
HTML5 Apps run inside a Browser
and cannot make use of many
things that Mobile OS provides, like
File System, SQLLite Database,
Network APIs, Camera, Contacts
etc.
http://m.twitter.c
om
A few APIs are exposed to browser
JavaScripts like GeoLocation, very
limited local storage, and more.
Browser App
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
12
HTML5 New Features
www.synerzip.com
13
HTML5 App Capabilities
http://m.twitter.c
om
Some HTML5 Capabilities include:
1.
2.
3.
4.
5.
6.
GeoLocation
Audio/Video Tag
Canvas/SVG
Local Storage
Web Workers
Web Sockets
Browser App
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
14
HTML5 Pros
www.synerzip.com
15
Pros
•
•
•
•
•
Lowest Development Cost
Maximum Reuse
Use Same team
No App Store Distribution hassles
Instant Updates, Clients on latest
Version
www.synerzip.com
16
HTML5 Cons
www.synerzip.com
17
HTML5 App Limitations
An HTML5 App runs as
long as a browser is
running. HTML5 Apps start
only when a user starts
them; no native-like
background processing is
available.
http://m.twitter.c
om
Browser App
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
18
Cons
•
•
•
•
•
•
•
User needs to open browser
Loading time is slowest
No notification available for updates
Limited access to Phone Features
App Store Marketing not available
HTML5 Fragmentation
Simulation of Native UX
www.synerzip.com
19
Native App Overview
www.synerzip.com
20
Native App
www.synerzip.com
21
Native App Overview
Twitter App
Full Access
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
22
Native App Pros
www.synerzip.com
23
Pros
•
•
•
•
•
•
•
Prowess of Mobile is available
Ability to build Richest & Fastest Apps
Notifications Available
Offline Storage Available
Background Processing Available
Entire Device Sensor Array Available
App Store/Market Monetization Possible
www.synerzip.com
24
Native App Cons
www.synerzip.com
25
Cons
•
•
•
•
•
•
Highest Development Cost
Dedicated teams for different Platforms
Architecture Reuse Possible but
Design/Code Reuse not Possible
AppStore/Market approval is prerequisite
for launch of new features
Fragmentation is also an issue (Android)
www.synerzip.com
26
Hybrid Mobile App
www.synerzip.com
27
Hybrid Apps Overview
HTML5 + Native
www.synerzip.com
28
Hybrid App Overview - 1
file://index.ht
ml
Hybrid Apps are
Native Apps
Embedded
Embedded Browser
Twitter App
Full Access
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
29
Hybrid App Overview - 2
file://index.ht
ml
Web App is hosted
inside Native App
Embedded
Embedded Browser
Twitter App
Full Access
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
30
Hybrid App Overview - 3
file://index.ht
ml
Web App's JavaScript
can communicate to
Native and back
Embedded
Embedded Browser
Twitter App
Full Access
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
31
Hybrid App Overview - 4
file://index.ht
ml
HTML5 contains BI,
Native Component are
built as Lego blocks
Business
Intelligence
Embedded
Embedded Browser
Twitter App
Full Access
Custom
Components
Mobile OS
File System
SQL-Lite
Network
Camera
GeoLocation
Contacts
Accelerometer
Native APIs
.....
.....
www.synerzip.com
32
Hybrid Pros
www.synerzip.com
33
Pros
•
•
•
•
•
•
Best of Both Worlds
Native App with Embedded Browser
HTML5 in Embedded Browser
Business Logic in HTML 5/Server
Sensor Array available via Native
Any Extensions are Native
www.synerzip.com
34
Hybrid Cons
www.synerzip.com
35
Cons
•
Development Environment is Complex
o
o
•
•
•
Eclipse, XCode, Visual Studio
CIT Builds and Release cycles
Limited Native Skills are required
Native Skills required for extensions across
platforms
Pains from both worlds─ Catching up on
new OS and HTML5 Feature sets
www.synerzip.com
36
Capability - Platform Graph
Full
Capability
Multiple Platform
Single Platform
Partial Capability
www.synerzip.com
37
Topics
•
•
•
•
Expectations from Mobile Apps
Types of Mobile Apps
When to choose which route?
What tools are available?
www.synerzip.com
38
Hybrid App Case Study
www.synerzip.com
39
QuickOffice Connect
•
•
•
•
•
File Sync Service for Mobile/Desktop
Built as Hybrid Mobile App
User Interface in HTML5
Sync Code is Native
Built using inhouse PhoneGap-like platform
www.synerzip.com
40
QuickOffice Connect - 1
www.synerzip.com
41
QuickOffice Connect - 2
www.synerzip.com
42
QuickOffice Connect - 3
www.synerzip.com
43
QuickOffice Connect - 4
www.synerzip.com
44
QuickOffice Connect - 5
www.synerzip.com
45
QuickOffice Connect - 6
www.synerzip.com
46
QuickOffice Connect Demo
Youtube Video –
http://www.youtube.com/watch?v=u7Cdu-jusB8
www.synerzip.com
47
Topics
•
Expectations from Mobile Apps
Types of Mobile Apps
Hybrid App UseCase
•
What tools are available?
•
•
www.synerzip.com
48
When to choose which route?
•
•
•
•
•
•
Rich User Experience
Performance
Development Cost
Time to Market
App Store Distribution
Security
www.synerzip.com
49
Factors for Choosing
Performance
Rich UI
Development Cost
Time to Market
App Store
Engagement
Security
www.synerzip.com
Native
Hybrid
HTML5
Highest
High
Low
Highest
Moderate
Moderate
Highest
High
Lower
Longest
Moderate
Shortest
Maximum
Engagement
Maximum
Engagement
No Engagement
Highest
High
Limited
50
Topics
•
•
•
•
Expectations from Mobile Apps
Types of Mobile Apps
Pros and Cons of each Type
When to choose which route?
www.synerzip.com
51
What tools are available?
•
Native App Wrappers
o
o
•
PhoneGap
Trigger IO (*new)
UI Framework
o
o
Backbone
Sencha Touch 2
Backbone
JS
Flexible
www.synerzip.com
Sencha
Touch 2
Complete
52
Hybrid Application Structure
HTML5 UI Framework
Native App Wrapper
www.synerzip.com
53
PhoneGap
•
•
•
•
•
Most Mature Native Wrapper Framework
Supports 7 Platforms
Supports building Extension
Backed by Adobe
OpenSource
Link - http://phonegap.com/
www.synerzip.com
54
Trigger.IO
•
•
•
•
Much like PhoneGap
Claims to be faster than PhoneGap
Claims to better in Build process
OpenSource
Link - https://trigger.io/s
www.synerzip.com
55
Backbone JS
•
•
•
•
Most Flexible JavaScript UI Framework
Works for both Desktop/Mobile UI
Works with many other Javascript
frameworks
OpenSource
Link - http://backbonejs.org/
www.synerzip.com
56
Sencha Touch 2
•
•
•
•
Richest Mobile UI framework
Complete Framework
Free for Commercial Use
Paid Support available
Link - http://www.sencha.com/products/touch
www.synerzip.com
57
Conclusion
www.synerzip.com
58
Factors Affecting Choice
Product Features
Time/Cost to
Market
Kind of Audience
Available Team &
IP
www.synerzip.com
59
App Richness & UX
Pros Vs Cons
Native App
Hybrid App
HTML5 App
Time to Market, Cost, Maintenance
www.synerzip.com
60
Final Comparison
Native
•
•
•
•
Needs Richest UI
Focuses on Single
Platform (Mobile is
the main platform)
Can be used to
build Authoring
tools, Games,
Social Networking
Apps etc.
Very Concerned
with UX (Apple-like
Quality)
www.synerzip.com
HTML 5
•
•
•
Needs rich
Mobile users with
minimal cost and
effort
App Store
Marketing and
Monetization are
not important
Required as a
fallback for social
e.g, Twitter still
has a mobile web
site
Hybrid
•
•
•
•
Needs Rich UI
Focuses on
Multiple
Platforms
Can be used
to build
Enterprise
Apps,
Travel/News
Apps, Sync
Clients, etc.
Most of the
time will
suffice your
needs
61
Questions?
www.synerzip.com
Hemant Elhence
hemant@synerzip.com
469.322.0349
www.synerzip.com
62
Synerzip in a Nut-shell
1. Software product development partner for small/midsized technology companies
•
•
•
Exclusive focus on small/mid-sized technology companies, typically
venture-backed companies in growth phase
By definition, all Synerzip work is the IP of its respective clients
Deep experience in full SDLC – design, dev, QA/testing, deployment
2. Dedicated team of high caliber software professionals
for each client
•
•
•
Seamlessly extends client’s local team, offering full transparency
Stable teams with very low turn-over
NOT just “staff augmentation”, but provide full mgmt support
3. Actually reduces risk of development/delivery
•
•
Experienced team - uses appropriate level of engineering discipline
Practices Agile development – responsive, yet disciplined
4. Reduces cost – dual-shore team, 50% cost advantage
5. Offers long term flexibility – allows (facilitates) taking
offshore team captive – aka “BOT” option
www.synerzip.com
63
Our Clients
www.synerzip.com
64
Thanks!
Call Us for a Free Consultation!
www.synerzip.com
Hemant Elhence
hemant@synerzip.com
469.322.0349
www.synerzip.com
65