Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1.

Similar presentations


Presentation on theme: "Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1."— Presentation transcript:

1 Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1

2 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 Mobile Apps 3

4 Topics 4

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

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

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

9 HTML5 Mobile App c 9

10 HTML5 Overview 10

11 Twitter - Desktop Vs Mobile 11

12 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

13 HTML5 New Features 13

14 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

15 HTML5 Pros 15

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

17 HTML5 Cons 17

18 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

19 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 Native App Overview 20

21 Native App 21

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

23 Native App Pros 23

24 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 Native App Cons 25

26 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 Hybrid Mobile App 27

28 Hybrid Apps Overview HTML5 + Native 28

29 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

30 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

31 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

32 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

33 Hybrid Pros 33

34 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 Hybrid Cons 35

36 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 Partial Capability Single Platform Multiple Platform Full Capability Native App HTML5 App Hybrid App Capability - Platform Graph 37

38 Topics 38

39 Hybrid App Case Study 39

40 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 QuickOffice Connect

42 QuickOffice Connect

43 QuickOffice Connect

44 QuickOffice Connect

45 QuickOffice Connect

46 QuickOffice Connect

47 QuickOffice Connect Demo Youtube Video –– 47

48 Topics 48

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

50 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 Topics 51

52 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 Hybrid Application Structure Native App Wrapper HTML5 UI Framework 53

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

55 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 Backbone JS Most Flexible JavaScript UI Framework Works for both Desktop/Mobile UI Works with many other Javascript frameworks OpenSource Link - 56

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

58 Conclusion 58

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

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

61 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 Hemant Elhence Questions? 62

63 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 Our Clients 64

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


Download ppt "Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1."

Similar presentations


Ads by Google