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

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