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 Document Sync and Authoring Product o Built as a Hybrid Mobile App 2

Mobile Apps 3

Topics 4

Expectations from Mobile Apps Driving a Car Car PoolingPublic Transit 5 = Native App= Hybrid App= HTML5 App

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

Topics 7

Types of Mobile Apps HTML5 Native Hybrid (HTML5 + Native) 8

HTML5 Mobile App c 9

HTML5 Overview 10

Twitter - Desktop Vs Mobile 11

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 om Mobile OS File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... HTML5 App Overview 12

HTML5 New Features 13

Mobile OS Browser App om Some HTML5 Capabilities include: 1.GeoLocation 2.Audio/Video Tag 3.Canvas/SVG 4.Local Storage 5.Web Workers 6.Web Sockets File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... HTML5 App Capabilities 14

HTML5 Pros 15

Pros Lowest Development Cost Maximum Reuse Use Same team No App Store Distribution hassles Instant Updates, Clients on latest Version 16

HTML5 Cons 17

Mobile OS Browser App 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 SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... HTML5 App Limitations 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 19

Native App Overview 20

Native App 21

Mobile OS Twitter App Full Access File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... Native App Overview 22

Native App Pros 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 24

Native App Cons 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) 26

Hybrid Mobile App 27

Hybrid Apps Overview HTML5 + Native 28

Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht ml Hybrid Apps are Native Apps File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... Hybrid App Overview

Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht ml Web App is hosted inside Native App File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... Hybrid App Overview

Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht ml Web App's JavaScript can communicate to Native and back File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... Hybrid App Overview

Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht ml HTML5 contains BI, Native Component are built as Lego blocks File SystemSQL-LiteNetworkCameraGeoLocation Contacts Accelerometer Native APIs..... Business Intelligence Custom Components Hybrid App Overview

Hybrid Pros 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 34

Hybrid Cons 35

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

Partial Capability Single Platform Multiple Platform Full Capability Native App HTML5 App Hybrid App Capability - Platform Graph 37

Topics 38

Hybrid App Case Study 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 40

QuickOffice Connect

QuickOffice Connect

QuickOffice Connect

QuickOffice Connect

QuickOffice Connect

QuickOffice Connect

QuickOffice Connect Demo Youtube Video –– 47

Topics 48

When to choose which route? Rich User Experience Performance Development Cost Time to Market App Store Distribution Security 49

NativeHybridHTML5 Performance HighestHighLow Rich UI HighestModerate Development Cost HighestHighLower Time to Market LongestModerateShortest App Store Engagement Maximum Engagement No Engagement Security HighestHighLimited Factors for Choosing 50

Topics 51

What tools are available? Native App Wrappers o PhoneGap o Trigger IO (*new) UI Framework o Backbone o Sencha Touch 2 Backbone JS Flexible Sencha Touch 2 Complete 52

Hybrid Application Structure Native App Wrapper HTML5 UI Framework 53

PhoneGap Most Mature Native Wrapper Framework Supports 7 Platforms Supports building Extension Backed by Adobe OpenSource Link

Trigger.IO Much like PhoneGap Claims to be faster than PhoneGap Claims to better in Build process OpenSource Link

Backbone JS Most Flexible JavaScript UI Framework Works for both Desktop/Mobile UI Works with many other Javascript frameworks OpenSource Link

Sencha Touch 2 Richest Mobile UI framework Complete Framework Free for Commercial Use Paid Support available Link

Conclusion 58

Factors Affecting Choice Product Features Kind of Audience Time/Cost to Market Available Team & IP 59

Pros Vs Cons App Richness & UX Time to Market, Cost, Maintenance HTML5 App Native App Hybrid App 60

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 Hybrid 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 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

Hemant Elhence Questions? 62

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

Our Clients 64

Call Us for a Free Consultation! Hemant Elhence Thanks! 65