Upload
john-moy
View
6.854
Download
5
Tags:
Embed Size (px)
DESCRIPTION
Updated version of presentation 'A Dummies Guide to Native, HTML5 and Hybrid Mobile Apps' delivered at Mastering Enterprise Mobility with SAP conference in Melbourne 2012. Accompanying blog can be found on the SAP Community Network here ... http://scn.sap.com/community/mobile/blog/2012/11/15/a-dummies-guide-to-understanding-native-hybrid-and-html5-mobile-apps-with-sap
Citation preview
Supported by: Produced by:
John Moy SAP Mentor
A Dummies Guide to Understanding Na;ve, HTML5 and Hybrid Mobile Apps
UPDATED 15 November 2012
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
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
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
NaGve Apps
Mastering Enterprise Mobility with SAP 2012 | 6
NaGve Apps -‐ Pros
Mastering Enterprise Mobility with SAP 2012 | 7
✔ Op;mum device fidelity and user experience
Fully leveraging all na;ve device features
✔
NaGve Apps -‐ Cons
Mastering Enterprise Mobility with SAP 2012 | 8
Objec;ve-‐C + iOS SDK, Mac
Java + Android SDK
C/C++ Na;ve SDK (BB10) Blackberry Java SDK
C++ or C#/.Net, XAML
✗ Skills shortages
Cost to develop across mul;ple plaNorms
✗
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
Mastering Enterprise Mobility with SAP 2012 | 9
“By 2015, Gartner predicts HTML5 will deliver 50% of all applica;ons that would have been na;ve in 2011”
• A few of the useful features …
HTML5 – A collecGon of features
Mastering Enterprise Mobility with SAP 2012 | 10
1 Applica;on Caching
2 Local Storage
3 Drawing Canvas
4 Geoloca;on*
5 File API* (eg. Camera Access)
6 Many other features: Placeholder text, video, CSS3* rounded corners, etc.
* Not strictly part of HTML5 specifica;on but included as synonymous with HTML5
= Offline Capable
HTML5 + CSS3 and Responsive Web Design
hqp://www.alistapart.com/ar;cles/responsive-‐web-‐design/ Mastering Enterprise Mobility with SAP 2012 | 11
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”
HTML5 Mobile Web Apps – Pros
Mastering Enterprise Mobility with SAP 2012 | 12
✔ Leverage common web development skills HTML5 + CSS3 + Javascript
✔ Build cross-‐plaNorm apps (for mobiles, tablets, desktops etc.) more quickly and cheaply
HTML5 Mobile Web Apps – Cons
Mastering Enterprise Mobility with SAP 2012 | 13
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
Nonetheless … HTML5 even capable of delivering games
Mastering Enterprise Mobility with SAP 2012 | 14
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
HTML5 Apps with jQuery Mobile
Mastering Enterprise Mobility with SAP 2012 | 15
Free open source HTML5 mobile web framework
Based on the very popular jQuery (Javascript) library
Relies upon HTML5 + CSS3 + Javascript/jQuery skills
Supports:
HTML5 Apps with jQuery Mobile -‐ Approach
Mastering Enterprise Mobility with SAP 2012 | 16 Mastering Enterprise Mobility with SAP 2012 | 16
1 jQuery Mobile Framework (Javascript/CSS)
2 Custom HTML5
3 Custom Javascript
HTML5 Apps with jQuery Mobile – Sample Code
Mastering Enterprise Mobility with SAP 2012 | 17
HTML5 Apps with jQuery Mobile – Development
Mastering Enterprise Mobility with SAP 2012 | 18 Rapid Interface Builder hqps://01.org/rib/online/ (Chrome browser only)
HTML5 Apps with jQuery Mobile – Theming
Mastering Enterprise Mobility with SAP 2012 | 19 jQuery Mobile Theme Roller hqp://jquerymobile.com/themeroller/index.php
HTML5 Apps with jQuery Mobile -‐ Demo
Mastering Enterprise Mobility with SAP 2012 | 20
HTML5 Apps with Sencha Touch
Mastering Enterprise Mobility with SAP 2012 | 21
Based on a pure Javascript framework genera;ng HTML5
Also supports na;ve hybrid packaging
Available with a (free) commercial soeware license
Supports:
HTML5 Apps with Sencha Touch -‐ Approach
Mastering Enterprise Mobility with SAP 2012 | 22
2 Custom Javascript Source
3 HTML5 generated dynamically in mobile browser
1 Sencha Framework (Javascript)
HTML5 Apps with Sencha Touch – Sample Code
Mastering Enterprise Mobility with SAP 2012 | 23
HTML5 Apps with Sencha Touch -‐ Development
Mastering Enterprise Mobility with SAP 2012 | 24
HTML5 Apps with Sencha Touch
Mastering Enterprise Mobility with SAP 2012 | 25
Hybrid Apps with PhoneGap
Mastering Enterprise Mobility with SAP 2012 | 26
Free open source framework for packaging mobile web apps in a Na;ve wrapper
Exposes Javascript APIs to access na;ve device features
Supports:
Renamed to Apache Cordova
Hybrid Apps with PhoneGap -‐ Approach
Mastering Enterprise Mobility with SAP 2012 | 27
Mastering Enterprise Mobility with SAP 2012 | 27
2 Embedded Web App (eg. jQuery Mobile, Sencha etc.)
1 PhoneGap Wrapper (na;ve code with Javascript APIs) Embedding web browser view
Hybrid Apps with PhoneGap : Features
Mastering Enterprise Mobility with SAP 2012 | 28
Hybrid Apps with PhoneGap -‐ Demo
Mastering Enterprise Mobility with SAP 2012 | 29
Hybrid Apps with Appcelerator Titanium
Mastering Enterprise Mobility with SAP 2012 | 30
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
Supports:
Complementary cloud plaNorm services available
Hybrid Apps with Appcelerator Titanium – Sample Code
Mastering Enterprise Mobility with SAP 2012 | 31
Hybrid Apps with Appcelerator Titanium – Development
Mastering Enterprise Mobility with SAP 2012 | 32
Hybrid Apps with Appcelerator Titanium -‐ Approach
Mastering Enterprise Mobility with SAP 2012 | 33 Mastering Enterprise Mobility with SAP 2012 | 33
2 Embedded Javascript to drive na;ve app
1 Titanium Wrapper (na;ve wrapper with Javascript APIs)
3 Cloud services
Hybrid Apps with Appcelerator Titanium -‐ Demo
Mastering Enterprise Mobility with SAP 2012 | 34
But …. How do you choose from all these?
Mastering Enterprise Mobility with SAP 2012 | 35
It depends upon your prioriGes …
Mastering Enterprise Mobility with SAP 2012 | 36
Criteria NaGve HTML5 Hybrid
User Experience ★★★★ ★★ ★★★
BYOD support (mul;-‐device) ★ ★★★ ★★
Leverage na;ve device features ★★★★ ★★ ★★★
Offline capability ★★★ ★★ ★★★
Ease of development & support ★ ★★ ★★
Ease of deployment ★★ ★★★ ★★
Understand where SAP supports different OpGons
Mastering Enterprise Mobility with SAP 2012 | 37
= “SAP Mobile PlaNorm”
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
Afaria BO Mobile Server
Firewalls /
Reverse Proxies etc.
A B C D E F H I J
ODATA ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern A: ABAP Web Server serves HTML5 and/or REST APIs
Firewalls /
Reverse Proxies etc.
A B C
• 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 • SAP offers SAP NetWeaver Gateway as a framework to alleviate custom build effort here
ODATA
Mastering Enterprise Mobility with SAP 2012 | 38
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern B: Portal on Device soluGon
Firewalls /
Reverse Proxies etc.
A C
• Requires SAP NetWeaver Portal 7.3 SP07 or higher • Based on jQuery Mobile libraries • Does not solve mobile-‐enablement of Business Suite content
B
ODATA
Mastering Enterprise Mobility with SAP 2012 | 39
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern C: Mobile app connecGng with NetWeaver Gateway
Firewalls /
Reverse Proxies etc.
A
• Mobile app interacts with ODATA REST APIs exposed by SAP NetWeaver Gateway • Support any na;ve, HTML5 or Hybrid approach • SAP partnerships with Sencha & Appcelerator (Titanium)
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 40
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern D: Mobile app connecGng to Gateway via SUP
Firewalls /
Reverse Proxies etc.
A
• 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)
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 41
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern E: Mobile web app using SUP Hybrid Web Container
Firewalls /
Reverse Proxies etc.
A
• 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 • SAP supports use of PhoneGap in the Hybrid Web Container
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 42
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern F: NaGve Mobile App using Sybase Unwired Pladorm
Firewalls /
Reverse Proxies etc.
A
• 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
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 43
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern G: Mobile App using SUP REST API
Firewalls /
Reverse Proxies etc.
A
• New in SUP 2.2 • Support any na;ve, HTML5 or Hybrid approach (eg. Windows 8, Sencha, Appcelerator Titanium etc.)
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 44
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA REST API
Mobile Business Objects
MBO MBO
G
Pabern H: Mobile apps via Syclo Agentry
Firewalls /
Reverse Proxies etc.
A
• Configurable na;ve mobile apps provided out of box using proprietary Syclo framework
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 45
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern I: Mobile apps via Sybase Mobilizer
Firewalls /
Reverse Proxies etc.
A
• Solu;on for mobile consumer facing scenarios • Originated from mCommerce solu;on for financial ins;tu;ons • Support na;ve, HTML5 or Hybrid approaches
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 46
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Pabern J: Mobile apps via Business Objects Mobile
Firewalls /
Reverse Proxies etc.
A
• Na;ve mobile app (Webi / Crystal). SAP looking to deliver Excelsius on HTML5. • Not considered a target plaNorm for custom mobile app development
B C
ODATA
Mastering Enterprise Mobility with SAP 2012 | 47
SAP Business Suite
SAP NetWeaver Portal
SAP NetWeaver Gateway
Sybase Unwired PlaNorm (SUP)
Mobilizer Syclo
Agentry Business Objects
BO Mobile Server
Afaria
D E F H I J
ODATA
G
REST API
Mobile Business Objects
MBO MBO
Key Points to Take Home
Mastering Enterprise Mobility with SAP 2012 | 48
• 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
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