A dummies guide to native, html5 and hybrid mobile apps
11 likes6,298 views
The document, presented by John Moy, discusses various mobile app development strategies, highlighting the explosion of possibilities in native, HTML5, and hybrid mobile applications. It weighs the pros and cons of each approach, emphasizing that while native apps provide superior user experience and device feature utilization, HTML5 offers scalability and lower development costs. The author advises carefully considering priorities and dependencies when choosing a mobile development strategy to ensure a multi-channel approach.
A dummies guide to native, html5 and hybrid mobile apps
- 1. Supported by: Produced by:
- 2. John Moy SAP Mentor A Dummies Guide to Understanding Na;ve, HTML5 and Hybrid Mobile Apps UPDATED 15 November 2012
- 3. Disclaimer Thoughts and opinions expressed here represent my own and not those of SAP All content provided in this presenta;on is for informa;onal purposes only. The author makes no representa;ons as to the accuracy or completeness of any informa;on in this presenta;on. The author will not be liable for any errors or omissions in this presenta;on nor for the availability of this informa;on. Mastering Enterprise Mobility with SAP 2012 | 3
- 4. Main Message Whether it be na;ve mobile plaNorms, HTML5 web apps, or complementary mobile frameworks, the last few years has seen an explosion in possibili;es for mobile app development. Understand the pros and cons for the various op;ons before deciding which to incorporate into your mobile strategy. Mastering Enterprise Mobility with SAP 2012 | 4
- 5. What I’ll Cover • Na;ve Apps • HTML5 – why the big fuss? • Complementary HTML5 / mobile frameworks (including Hybrid op;ons) • jQuery Mobile • Sencha Touch • PhoneGap • Appcelerator • Mapping the frameworks and styles to SAP’s Mobility offerings • Ques;ons • Key Points to Take Home Mastering Enterprise Mobility with SAP 2012 | 5
- 6. NaGve Apps Mastering Enterprise Mobility with SAP 2012 | 6
- 7. NaGve Apps -‐ Pros Op;mum device ✔ fidelity and user experience ✔ Fully leveraging all na;ve device features Mastering Enterprise Mobility with SAP 2012 | 7
- 8. NaGve Apps -‐ Cons ✗ Skills shortages Objec;ve-‐C + iOS SDK, Mac Cost to develop ✗ across mul;ple Java + Android SDK plaNorms C++ or C#/.Net, XAML C/C++ Na;ve SDK (BB10) Blackberry Java SDK Mastering Enterprise Mobility with SAP 2012 | 8
- 9. Introducing HTML5 • HTML5 is not yet a W3C Standard. • It is a Working Drae, expected to be finalised in 2014 • First official update to HTML spec since HTML4.01 in 1999 “By 2015, Gartner predicts HTML5 will deliver 50% of all applica;ons that would have been na;ve in 2011” Mastering Enterprise Mobility with SAP 2012 | 9
- 10. HTML5 – A collecGon of features • A few of the useful features … Geoloca;on* 4 1 Applica;on Caching = Offline Capable 5 File API* (eg. Camera Access) 2 Local Storage Many other features: 6 Placeholder text, video, 3 Drawing Canvas CSS3* rounded corners, etc. * Not strictly part of HTML5 specifica;on but included as synonymous with HTML5 Mastering Enterprise Mobility with SAP 2012 | 10
- 11. HTML5 + CSS3 and Responsive Web Design The control which designers know in the print medium, and oeen desire in the web medium, is simply a func;on of the limita;on of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” John Allsopp, “A Dao of Web Design” hqp://www.alistapart.com/ar;cles/responsive-‐web-‐design/ Mastering Enterprise Mobility with SAP 2012 | 11
- 12. HTML5 Mobile Web Apps – Pros Leverage common web development skills ✔ HTML5 + CSS3 + Javascript ✔ Build cross-‐plaNorm apps (for mobiles, tablets, desktops etc.) more quickly and cheaply Mastering Enterprise Mobility with SAP 2012 | 12
- 13. HTML5 Mobile Web Apps – Cons Mobile web apps can compromise on ✗ op;mum user experience* Mobile web apps may not have access to all ✗ na;ve device capabili;es * Studies support asser;on that Mobile Web Apps rate lower than Na;ve apps in usability tests hqp://www.useit.com/alertbox/mobile-‐sites-‐apps.html Mastering Enterprise Mobility with SAP 2012 | 13
- 14. Nonetheless … HTML5 even capable of delivering games Source: Beginning HTML5 Mobile Game Programming with jQuery Mobile by The Rock n Coder hqp://therockncoder.blogspot.com.au/2012/10/beginning-‐html5-‐mobile-‐game-‐programming.html Mastering Enterprise Mobility with SAP 2012 | 14
- 15. HTML5 Apps with jQuery Mobile Free open source HTML5 mobile web framework Based on the very popular jQuery (Javascript) library Relies upon HTML5 + CSS3 + Javascript/jQuery skills Supports: Mastering Enterprise Mobility with SAP 2012 | 15
- 16. HTML5 Apps with jQuery Mobile -‐ Approach 2 Custom HTML5 jQuery 1 Mobile Custom Framework 3 Javascript (Javascript/CSS) Mastering Enterprise Mobility with SAP 2012 | 16
- 17. HTML5 Apps with jQuery Mobile – Sample Code Mastering Enterprise Mobility with SAP 2012 | 17
- 18. HTML5 Apps with jQuery Mobile – Development Rapid Interface Builder hqps://01.org/rib/online/ (Chrome browser only) Mastering Enterprise Mobility with SAP 2012 | 18
- 19. HTML5 Apps with jQuery Mobile – Theming jQuery Mobile Theme Roller hqp://jquerymobile.com/themeroller/index.php Enterprise Mobility with SAP 2012 | 19 Mastering
- 20. HTML5 Apps with jQuery Mobile -‐ Demo Mastering Enterprise Mobility with SAP 2012 | 20
- 21. HTML5 Apps with Sencha Touch Based on a pure Javascript framework genera;ng HTML5 Also supports na;ve hybrid packaging Available with a (free) commercial soeware license Supports: Mastering Enterprise Mobility with SAP 2012 | 21
- 22. HTML5 Apps with Sencha Touch -‐ Approach Custom 2 Javascript Source HTML5 Sencha 3 generated 1 Framework dynamically in (Javascript) mobile browser Mastering Enterprise Mobility with SAP 2012 | 22
- 23. HTML5 Apps with Sencha Touch – Sample Code Mastering Enterprise Mobility with SAP 2012 | 23
- 24. HTML5 Apps with Sencha Touch -‐ Development Mastering Enterprise Mobility with SAP 2012 | 24
- 25. HTML5 Apps with Sencha Touch Mastering Enterprise Mobility with SAP 2012 | 25
- 26. Hybrid Apps with PhoneGap Free open source framework for packaging mobile web apps in a Na;ve wrapper Exposes Javascript APIs to access na;ve device features Renamed to Apache Cordova Supports: Mastering Enterprise Mobility with SAP 2012 | 26
- 27. Hybrid Apps with PhoneGap -‐ Approach PhoneGap Embedded Web 1 Wrapper 2 App (eg. jQuery (na;ve code with Mobile, Sencha Javascript APIs) etc.) Embedding web browser view Mastering Enterprise Mobility with SAP 2012 | 27 Mastering Enterprise Mobility with SAP 2012 | 27
- 28. Hybrid Apps with PhoneGap : Features Mastering Enterprise Mobility with SAP 2012 | 28
- 29. Hybrid Apps with PhoneGap -‐ Demo Mastering Enterprise Mobility with SAP 2012 | 29
- 30. Hybrid Apps with Appcelerator Titanium Open source framework for building cross-‐plaNorm na;ve apps powered by Javascript Na;ve container provides full na;ve user experience, with underlying code driven by unified Javascript code-‐base Complementary cloud plaNorm services available Supports: Mastering Enterprise Mobility with SAP 2012 | 30
- 31. Hybrid Apps with Appcelerator Titanium – Sample Code Mastering Enterprise Mobility with SAP 2012 | 31
- 32. Hybrid Apps with Appcelerator Titanium – Development Mastering Enterprise Mobility with SAP 2012 | 32
- 33. Hybrid Apps with Appcelerator Titanium -‐ Approach 3 Cloud services Titanium Embedded 1 Wrapper 2 Javascript to (na;ve drive na;ve app wrapper with Javascript APIs) Mastering Enterprise Mobility with SAP 2012 | 33
- 34. Hybrid Apps with Appcelerator Titanium -‐ Demo Mastering Enterprise Mobility with SAP 2012 | 34
- 35. But …. How do you choose from all these? Mastering Enterprise Mobility with SAP 2012 | 35
- 36. It depends upon your prioriGes … Criteria NaGve HTML5 Hybrid User Experience ★★★★ ★★ ★★★ BYOD support (mul;-‐device) ★ ★★★ ★★ Leverage na;ve device features ★★★★ ★★ ★★★ Offline capability ★★★ ★★ ★★★ Ease of development & support ★ ★★ ★★ Ease of deployment ★★ ★★★ ★★ Mastering Enterprise Mobility with SAP 2012 | 36
- 37. Understand where SAP supports different OpGons = “SAP Mobile PlaNorm” Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 37
- 38. Pabern A: ABAP Web Server serves HTML5 and/or REST APIs • Custom build of REST APIs from within ABAP Internet Communica;on Framework (ICF) • Op;onally serve HTML5 apps using BSP, ICM file system, or alternate web server • Support any na;ve, HTML5 or Hybrid approach Reverse Proxies etc. • SAP offers SAP NetWeaver Gateway as a framework to alleviate custom build effort here Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 38
- 39. Pabern B: Portal on Device soluGon • Requires SAP NetWeaver Portal 7.3 SP07 or higher • Based on jQuery Mobile libraries Reverse Proxies etc. • Does not solve mobile-‐enablement of Business Suite content Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 39
- 40. Pabern C: Mobile app connecGng with NetWeaver Gateway • Mobile app interacts with ODATA REST APIs exposed by SAP NetWeaver Gateway • Support any na;ve, HTML5 or Hybrid approach Reverse Proxies etc. • SAP partnerships with Sencha & Appcelerator (Titanium) Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 40
- 41. Pabern D: Mobile app connecGng to Gateway via SUP • Mobile app interacts with ODATA REST APIs exposed by SAP NetWeaver Gateway • Sybase Unwired PlaNorm serves as proxy for communica;ons • Use ODATA SDK for Sybase Unwired PlaNorm (na;ve iOS, Android, Blackberry apps) Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 41
- 42. Pabern E: Mobile web app using SUP Hybrid Web Container • Hybrid web app interacts with mobile business objects (MBOs) in SUP; OR • Hybrid web app interacts with ODATA from SAP NetWeaver Gateway (new in SUP 2.2) • Hybrid Web Container ships with jQuery Mobile by default, but can be subs;tuted Reverse Proxies etc. • SAP supports use of PhoneGap in the Hybrid Web Container Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 42
- 43. Pabern F: NaGve Mobile App using Sybase Unwired Pladorm • Na;ve app interacts with mobile business objects (MBOs) in Sybase Unwired PlaNorm • Na;ve code genera;on to deliver baseline app (produc;vity aids) • Currently supports na;ve iOS, Android, Blackberry, Windows, Windows Mobile Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 43
- 44. Pabern G: Mobile App using SUP REST API • New in SUP 2.2 • Support any na;ve, HTML5 or Hybrid approach (eg. Windows 8, Sencha, Appcelerator Titanium etc.) Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 44
- 45. Pabern H: Mobile apps via Syclo Agentry • Configurable na;ve mobile apps provided out of box using proprietary Syclo framework Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 45
- 46. Pabern I: Mobile apps via Sybase Mobilizer • Solu;on for mobile consumer facing scenarios • Originated from mCommerce solu;on for financial ins;tu;ons Reverse Proxies etc. • Support na;ve, HTML5 or Hybrid approaches Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 46
- 47. Pabern J: Mobile apps via Business Objects Mobile • Na;ve mobile app (Webi / Crystal). SAP looking to deliver Excelsius on HTML5. • Not considered a target plaNorm for custom mobile app development Reverse Proxies etc. Firewalls / A B C D E F G H I J REST ODATA ODATA MBO MBO API Mobile Business Objects SAP NetWeaver Sybase Unwired Syclo BO Mobile Server Afaria Mobilizer Portal PlaNorm (SUP) Agentry Business Objects SAP NetWeaver Gateway SAP Business Suite Mastering Enterprise Mobility with SAP 2012 | 47
- 48. Key Points to Take Home • Before deciding upon your mobile development op;ons, carefully consider your priori;es and your dependencies. – Development and support costs versus na;ve high fidelity user experience – In-‐house skills, system integrator skills – Even when purchasing pre-‐built apps, understand any support implica;ons • Understand that currently HTML5 offers the best longer term opportunity to support a true mul;-‐channel strategy, whilst na;ve apps provide the best possible user experience Mastering Enterprise Mobility with SAP 2012 | 48
- 50. How to contact me: John Moy SAP Mentor Email john@BlueT.com.au Phone 0403 197727
- 51. References • HTML5 Dive into HTML5 hqp://diveintohtml5.info • jQuery Mobile www.jquerymobile.com SAP NetWeaver Portal on Smartphone (video) hqp://www.youtube.com/watch?v=GhgYdEa9_B0 SAP NetWeaver Portal on Tablet (video) hqp://www.youtube.com/watch?v=NA9W0MCwTtM • Sencha Touch www.sencha.com/products/touch SAP Partnership hqp://www.sencha.com/blog/sencha-‐touch-‐odata-‐connector-‐and-‐samples-‐for-‐sap/ • PhoneGap www.phonegap.com SCN Blog on using jQuery Mobile with PhoneGap hqp://bit.ly/HsnMJJ • Appcelerator Titanium hqp://www.appcelerator.com SAP Partnership www.appcelerator.com/sap Mastering Enterprise Mobility with SAP 2012 | 51