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

3. www.synerzip.com Mobile Apps 3

4. www.synerzip.com Topics 4

5. www.synerzip.com Expectations from Mobile Apps Driving a Car Car PoolingPublic Transit 5 = Native App= Hybrid App= HTML5 App

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

7. www.synerzip.com Topics 7

8. www.synerzip.com Types of Mobile Apps HTML5 Native Hybrid (HTML5 + Native) 8

9. www.synerzip.com HTML5 Mobile App c 9

10. www.synerzip.com HTML5 Overview 10

11. www.synerzip.com Twitter - Desktop Vs Mobile 11

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

13. www.synerzip.com HTML5 New Features 13

14. www.synerzip.com Mobile OS Browser App http://m.twitter.c 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

15. www.synerzip.com HTML5 Pros 15

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

17. www.synerzip.com HTML5 Cons 17

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 SystemSQL-LiteNetworkCameraGeoLocation 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

20. www.synerzip.com Native App Overview 20

21. www.synerzip.com Native App 21

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

23. www.synerzip.com Native App Pros 23

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

25. www.synerzip.com Native App Cons 25

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

27. www.synerzip.com Hybrid Mobile App 27

28. www.synerzip.com Hybrid Apps Overview HTML5 + Native 28

29. www.synerzip.com 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 - 1 29

30. www.synerzip.com 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 - 2 30

31. www.synerzip.com 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 - 3 31

32. www.synerzip.com 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 - 4 32

33. www.synerzip.com Hybrid Pros 33

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

35. www.synerzip.com Hybrid Cons 35

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

37. www.synerzip.com Partial Capability Single Platform Multiple Platform Full Capability Native App HTML5 App Hybrid App Capability - Platform Graph 37

38. www.synerzip.com Topics 38

39. www.synerzip.com Hybrid App Case Study 39

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

41. www.synerzip.com QuickOffice Connect - 1 41

42. www.synerzip.com QuickOffice Connect - 2 42

43. www.synerzip.com QuickOffice Connect - 3 43

44. www.synerzip.com QuickOffice Connect - 4 44

45. www.synerzip.com QuickOffice Connect - 5 45

46. www.synerzip.com QuickOffice Connect - 6 46

47. www.synerzip.com QuickOffice Connect Demo Youtube Video –– http://www.youtube.com/watch?v=u7Cdu-jusB8 47

48. www.synerzip.com Topics 48

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

51. www.synerzip.com Topics 51

52. www.synerzip.com 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

53. www.synerzip.com Hybrid Application Structure Native App Wrapper HTML5 UI Framework 53

54. www.synerzip.com PhoneGap Most Mature Native Wrapper Framework Supports 7 Platforms Supports building Extension Backed by Adobe OpenSource Link - http://phonegap.com/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/shttps://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/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/touchhttp://www.sencha.com/products/touch 57

58. www.synerzip.com Conclusion 58

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

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

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

62. www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349 Questions? 62

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

64. www.synerzip.com Our Clients 64

65. www.synerzip.com Call Us for a Free Consultation! www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349 Thanks! 65