24bf94062a650d0717b7830b084fccae.ppt
- Количество слайдов: 65
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
24bf94062a650d0717b7830b084fccae.ppt