Specifically, in this webinar we will cover following key topics.
Alternative approaches for developing mobile applications – Native, HTML5, and Hybrid
Pros and cons of each approach
When to go for HTML5 or Hybrid approach and when not to
Recommended tools for HTML5 and Hybrid development
Read more at - https://www.synerzip.com/webinar/mobile-development-html5-vs-native/
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Mobile Development: HTML5 Vs. Native
1. Mobile Development:
HTML5 Vs Native
By Rohit Ghatol
Director of Engineering,Synerzip
Author- Beginning PhoneGap
1
2. www.synerzip.com
About me
• Director of Engineering – Synerzip
• Author- Beginning PhoneGap
• Architect of QuickOffice (now Google)
Product, Connect
• QuickOffice Connect
o Document Sync and Authoring Product
o Built as a Hybrid Mobile App
2
6. www.synerzip.com
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
• Level 4 - Native Mobile App
Today’s Focus
6
12. www.synerzip.com
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.
A few APIs are exposed to browser
JavaScripts like GeoLocation, very
limited local storage, and more. Browser App
http://m.twitter.c
om
Mobile OS
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
HTML5 App Overview
12
18. www.synerzip.com
Mobile OS
Browser App
http://m.twitter.c
om
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.
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
HTML5 App Limitations
18
19. www.synerzip.com
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
19
24. www.synerzip.com
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
24
26. www.synerzip.com
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)
26
29. www.synerzip.com
Mobile OS
Twitter App
Full Access
Embedded
Embedded Browser
file://index.ht
mlHybrid Apps are
Native Apps
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
Hybrid App Overview - 1
29
30. www.synerzip.com
Mobile OS
Twitter App
Full Access
Embedded
Embedded Browser
file://index.ht
mlWeb App is hosted
inside Native App
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
Hybrid App Overview - 2
30
31. www.synerzip.com
Mobile OS
Twitter App
Full Access
Embedded
Embedded Browser
file://index.ht
mlWeb App's JavaScript
can communicate to
Native and back
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
Hybrid App Overview - 3
31
32. www.synerzip.com
Mobile OS
Twitter App
Full Access
Embedded
Embedded Browser
file://index.ht
mlHTML5 contains BI,
Native Component are
built as Lego blocks
File System SQL-Lite Network Camera GeoLocation
Contacts Accelerometer Native APIs ..... .....
Business
Intelligence
Custom
Components
Hybrid App Overview - 4
32
34. www.synerzip.com
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
34
36. www.synerzip.com
Cons
• Development Environment is Complex
o Eclipse, XCode, Visual Studio
o 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
36
40. www.synerzip.com
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
40
49. www.synerzip.com
When to choose which route?
• Rich User Experience
• Performance
• Development Cost
• Time to Market
• App Store Distribution
• Security
49
50. www.synerzip.com
Native Hybrid HTML5
Performance
Highest High Low
Rich UI
Highest Moderate Moderate
Development Cost
Highest High Lower
Time to Market
Longest Moderate Shortest
App Store
Engagement
Maximum
Engagement
Maximum
Engagement
No Engagement
Security
Highest High Limited
Factors for Choosing
50
54. www.synerzip.com
PhoneGap
• Most Mature Native Wrapper Framework
• Supports 7 Platforms
• Supports building Extension
• Backed by Adobe
• OpenSource
Link - http://phonegap.com/
54
55. www.synerzip.com
Trigger.IO
• Much like PhoneGap
• Claims to be faster than PhoneGap
• Claims to better in Build process
• OpenSource
Link - https://trigger.io/s
55
56. www.synerzip.com
Backbone JS
• Most Flexible JavaScript UI Framework
• Works for both Desktop/Mobile UI
• Works with many other Javascript
frameworks
• OpenSource
Link - http://backbonejs.org/
56
57. www.synerzip.com
Sencha Touch 2
• Richest Mobile UI framework
• Complete Framework
• Free for Commercial Use
• Paid Support available
Link - http://www.sencha.com/products/touch
57
61. www.synerzip.com
Final Comparison
• 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)
Native HybridHTML 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
• 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
63. www.synerzip.com
Synerzip in a Nut-shell
1. Software product development partner for small/mid-
sized 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
63