HTML5 Mobile Hybrid Application Framework

1. HTML5
MOBILE
FRAMEWORK
1

2. 1.
Challenges
with
Implementing
Mobile
Application
How
do
We
accommodate
all
the
How
do
I
design
and
develop
a
different
mobile
platforms?
high-­‐quality
User
Experience?
• Highly
fragmented
set
of
…
• High
quality
user
experience
is
a
• Platforms
and
devices
requirement
• Languages,
APIs,
and
tools
• Quality
inOluenced
as
much
by
• Native
programming
models
design
as
it
is
by
function
not
portable
across
platforms
We
need
to
develop
different
apps
We
need
to
connect
my
apps
to
for
different
Customers
–
quickly.
existing
systems
(DMS,
DMS-­‐HO)
• Higher
frequency
of
• Existing
services
typically
need
releases
and
updates
to
be
adapted
for
mobile
• Added
pressure
on
teams
to
• Enterprise
wireless
networks
deliver
on
time
and
with
quality
are
running
out
of
bandwidth
for
employee
devices
Version
0.5
(Draft)
2

3. 1.2.
Evolving
Mobile
Landscape
Development
Challenges
q Mobile
Development
is
more
expensive
than
traditional
Web
App
Development:
v Which
smartphone?
Which
tablet?
Which
form
factor?
àAndroid,
iOS,
Windows
Phone,
then
Blackberry
v Skills?
à
Web
or
native
apps?
Java
or
Objective
C?
Or
other?
v Maintenance?
à
Separate
software
stacks
for
each
major
OS
à
Separate
applications
for
each
major
OS
à
How
do
We
keep
software
current?
v Enterprise
Integration?
à
How
do
I
build
cross-­‐channel
app?
How
do
I
use
existing
authentication
frameworks,
customer
proOile
repositories,
Reuse
existing
investments
in
backends?
v Security?
à
Encryption?
Authentication?
Response
to
stolen/lost
devices?
v Management?
à
Can
I
see
my
apps?
Can
I
disable
them
remotely?
q Since
the
Mobile
Oield
is
still
evolving,
so
an
enterprise
would
want
to
pick
a
platform
that
can
adapt
to
the
future.
Version
0.5
(Draft)
3

4. 1.4.
Delivering
for
Multiple-­‐Mobile-­‐Platforms
Client
Challenge
Using
standards-­‐based
technologies
and
tools
and
delivering
an
enterprise-­‐grade
services
layer
that
meets
the
needs
of
mobile
employees
and
customers
Key
Capabilities
Mobile
optimized
middleware
§ Open
approach
to
3rd-­‐party
integration
§ Strong
authentication
framework
§ Encrypted
ofOline
availability
§ Enterprise
back-­‐end
connectivity
§ UniOied
push
notiOications
§ Data
collection
for
analytics
§ Direct
updates
and
remote
disablement
§ Packaged
runtime
skins
Version
0.5
(Draft)
4

5. 1.5.
Native
Apps
VS
Web
Apps
• Existing
Native
Apps:
Android,
iOS,
Win8,
Blackberry.
• Existing
Web
Apps:
DMS,
Portal,
ERP
…
• What
if
we
can
develop
apps
with
beneOits
from
both
Native
and
Web
Apps?
Version
0.5
(Draft)
5

6. 1.6.
Hybrid
Apps
–
Why
not?
• What
if
we
can
develop
with
beneOits
from
both
Native
and
Web
apps?
Hybrid
Apps
• But
Company
regulatory,
audit,
legal
or
time-­‐to-­‐market
restrictions
?
Version
0.5
(Draft)
6

7. 1.1.
HTML5
&
CSS3
Performance
Semantics
Styling
Multimedia
3D
Effects
OfOline
&
Storage
Connectivity
Device
Access
Version
0.5
(Draft)
7

8. 1.3.
Old
School
Web
Browser
Cloud
Platform
Data
Model
Integration
Back
End
Data
HTML
Sync
Engine
1) Browser
to
Server:
HTTP
Get
2) Server
to
Browser:
Dynamically
generated
HTML
Version
0.5
(Draft)
8

9. 1.3.
AjaxiOied
Web
Browser
Cloud
Platform
Data
Model
Integration
Run
JS
Back
End
Data
HTML
Display
Data
Sync
Engine
1) “Run
JS”
to
Server:
HTTP
Get
2) Server
to
Browser:
Data
only
3) Browser:
Display
Data
Version
0.5
(Draft)
9

10. 1.3.
OfOline-­‐able
Data
Browser
Cloud
Platform
Data
Model
Integration
Run
JS
Back
End
Data
HTML
Display
Data
Sync
Engine
1) “Run
JS”
to
Server:
HTTP
Get
2) Server
to
Browser:
Data
only
3) Browser:
Local
Storage
4) Browser:
Display
Data
Version
0.5
(Draft)
10

11. OfOline-­‐able
Web
Apps
Browser
Cloud
Platform
Data
Model
Integration
Run
JS
Back
End
Display
Data
Sync
Engine
1) Browser:
using
Cached/Local
HTML
2) OfOline-­‐able
Data:
Run
JS
à
Local
Storage
à
Display
Data
3) Sync
via
HTTP
POST
+
GET
when
online
Version
0.5
(Draft)
11

12. 2.
Hybrid-­‐App
MVC
q Model
–
View
–
Controller
q Store:
act
as
a
cache,
which
contains
a
collection
of
Models.
q ProOile:
enable
to
easily
customize
UI
for
tablets
&
phones
Version
0.5
(Draft)
12