Mobile Development HTML 5 Vs Native By Rohit

Mobile Development: HTML 5 Vs Native By Rohit Ghatol Director of Engineering, Synerzip Author- Beginning Phone. Gap 1

About me • Director of Engineering – Synerzip • Author- Beginning Phone. Gap • Architect of Quick. Office (now Google) Product, Connect • Quick. Office 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 • • • Expectations from Mobile Apps 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 = Native App www. synerzip. com Car Pooling Public Transit = Hybrid App = HTML 5 App 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 - HTML 5 Mobile App • Level 3 - Hybrid Mobile App Level 4 - Native Mobile App • www. synerzip. com Today’s Focus 6

Topics • • • Expectations from Mobile Apps Types of Mobile Apps Hybrid App Use. Case When to choose which route? What tools are available? www. synerzip. com 7

Types of Mobile Apps • HTML 5 • Native • Hybrid (HTML 5 + Native) www. synerzip. com 8

HTML 5 Mobile App c www. synerzip. com 9

HTML 5 Overview www. synerzip. com 10

Twitter - Desktop Vs Mobile www. synerzip. com 11

HTML 5 App Overview HTML 5 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 Java. Scripts like Geo. Location, very limited local storage, and more. Browser App Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 12

HTML 5 New Features www. synerzip. com 13

HTML 5 App Capabilities http: //m. twitter. c om Some HTML 5 Capabilities include: 1. 2. 3. 4. 5. 6. Geo. Location Audio/Video Tag Canvas/SVG Local Storage Web Workers Web Sockets Browser App Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 14

HTML 5 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

HTML 5 Cons www. synerzip. com 17

HTML 5 App Limitations An HTML 5 App runs as long as a browser is running. HTML 5 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 Geo. Location 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 HTML 5 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 Geo. Location 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 App. Store/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 HTML 5 + Native www. synerzip. com 28

Hybrid App Overview - 1 file: //index. ht ml Hybrid Apps are Native Apps Embedded Browser Twitter App Full Access Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 29

Hybrid App Overview - 2 file: //index. ht ml Web App is hosted inside Native App Embedded Browser Twitter App Full Access Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 30

Hybrid App Overview - 3 file: //index. ht ml Web App's Java. Script can communicate to Native and back Embedded Browser Twitter App Full Access Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 31

Hybrid App Overview - 4 file: //index. ht ml HTML 5 contains BI, Native Component are built as Lego blocks Business Intelligence Embedded Browser Twitter App Full Access Custom Components Mobile OS File System SQL-Lite Network Camera Geo. Location Contacts Accelerometer Native APIs . . www. synerzip. com 32

Hybrid Pros www. synerzip. com 33

Pros • • • Best of Both Worlds Native App with Embedded Browser HTML 5 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 HTML 5 Feature sets www. synerzip. com 36

Capability - Platform Graph e App Nativ Full Capability Hybrid Ap p Multiple Platform Single Platform HTM L 5 A Partial Capability www. synerzip. com pp 37

Topics • • • Expectations from Mobile Apps Types of Mobile Apps Hybrid App Use. Case When to choose which route? What tools are available? www. synerzip. com 38

Hybrid App Case Study www. synerzip. com 39

Quick. Office Connect • • • File Sync Service for Mobile/Desktop Built as Hybrid Mobile App User Interface in HTML 5 Sync Code is Native Built using inhouse Phone. Gap-like platform www. synerzip. com 40

Quick. Office Connect - 1 www. synerzip. com 41

Quick. Office Connect - 2 www. synerzip. com 42

Quick. Office Connect - 3 www. synerzip. com 43

Quick. Office Connect - 4 www. synerzip. com 44

Quick. Office Connect - 5 www. synerzip. com 45

Quick. Office Connect - 6 www. synerzip. com 46

Quick. Office Connect Demo Youtube Video – http: //www. youtube. com/watch? v=u 7 Cdu-jus. B 8 www. synerzip. com 47

Topics • • • Expectations from Mobile Apps Types of Mobile Apps Hybrid App Use. Case When to choose which route? 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 Native Performance Rich UI Development Cost Time to Market App Store Engagement Security www. synerzip. com Hybrid HTML 5 Highest High Low Highest Moderate Highest High Lower Longest Moderate Shortest 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? What tools are available? www. synerzip. com 51

What tools are available? • Native App Wrappers o o • Phone. Gap 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 HTML 5 UI Framework Native App Wrapper www. synerzip. com 53

Phone. Gap • • • Most Mature Native Wrapper Framework Supports 7 Platforms Supports building Extension Backed by Adobe Open. Source Link - http: //phonegap. com/ www. synerzip. com 54

Trigger. IO • • Much like Phone. Gap Claims to be faster than Phone. Gap Claims to better in Build process Open. Source Link - https: //trigger. io/s www. synerzip. com 55

Backbone JS • • Most Flexible Java. Script UI Framework Works for both Desktop/Mobile UI Works with many other Javascript frameworks Open. Source 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 HTML 5 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