HTML5 Mobile Web Framework - High Level Design

1. ENTERPRISE
HYBRID-­‐APPS
MOBILE
FRAMEWORK
Version
2.0
by
Sun.SmartBiz@gmail.com
1

2. Agenda
Version
1.0
1. Introduction
2. HTML5
+
Native
Hybrid-­‐Apps
3. Mobile
Chart:
TBD
4. Mobie
Map
5. Reference
2

3. 61%
of
CIOs
put
mobile
as
priority
increased
productivity
with
mobile
apps
45%
10
Billion
devices
by
2020
①
Mobile
Cloud
for
the
ENTERPRISE

4. Challenges
with
Implementing
Mobile
Application
Ø Highly
fragmented
set
of
…
• Platforms
and
Devices
• Languages,
APIs,
and
tools
Ø Native
programming
models
not
portable
across
platforms
Accommodate
different
Mobile
Platforms:
iOS,
Android,
Windows
8,
Blackberry
10,
…
Ø Higher
frequency
of
releases
and
updates
Ø Added
pressure
on
teams
to
deliver
on
time
and
with
quality
We
need
to
develop
different
Applications
for
different
Customers
–
quickly.
Ø Existing
services
typically
need
to
be
adapted
for
mobile
Ø Enterprise
Integration
and
Bring
Your
Own
Device
(BYOD)
We
need
to
connect
to
existing
systems:
DMS,
Cloud
Gateway,
Azure,
SAP,
Salesforce
Ø High
quality
user
experience:
• Pro[ile:
Phone
vs.
Tablet
• Native
API:
Push,
Camera,
…
Ø Quality
in[luenced
as
much
by
design
as
it
is
by
function
How
do
I
design
and
develop
a
High-­‐Quality
User
Experience?
4

5. 1.3.
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
pro[ile
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
[ield
is
still
evolving,
so
an
enterprise
would
want
to
pick
a
platform
that
can
adapt
to
the
future.
Version
0.5
(Draft)
5

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

7. 1.5.
Native
Apps
VS
Web
Apps
• Existing Native Apps: iOS, Android, MonoTouch …
• Existing Web Apps: Map, Dashboard, Collaboration, …
• What
if
we
can
develop
apps
with
bene[its
from
both
Native
and
Web
Apps?
Version
0.5
(Draft)
7

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

9. 1.7.
Open,
Cost-­‐effective,
Cross-­‐Platform
App
Development
Compatible
with
prominent
HTML5
libraries
and
tools:
App
development
using
native
and/or
familiar
web
technologies:
•
HTML5
•
CSS3
•
JavaScript
App
delivery
in
variety
of
forms:
•
Mobile
Web
App
•
Hybrid
App
•
Native
Version
0.5
(Draft)
9

10. Mobile
Cloud
Platform
for
Enterprise
Mobile
Cloud
Solution
10

11. Mobile
Applications
File
System
(Mobile
Device)
Native
Container
HTML,
CSS,
JavaScript
Mobile
Operating
System
Combine
the
best
of
both
worlds:
• Mostly
written
in
HTML5,
CSS,
JS
• Allowing
total
access
to
device
features.

12.
Mobile-­‐Cloud
Business
to
Enterprise
10/8/12
Mobile
Cloud
Solution
12
Device
and
back-­‐end
diversity
Device
choice
Device
and
App
management
Security
Ease
of
use
Apps
and
more
Apps
End-­‐user
requirements
Enterprise
requirements
Development
Tools
and
TCD/TCO
(*)
(*)
Total
cost
of
deployment/total
cost
of
ownership

13. ERP
CRM
ECM
Portal
CLOUD
GATEWAY
Mobile
Solution
for
the
ENTERPRISE
1.
Market
Trend
Market
Trend
Mobile-­‐Cloud
Business
to
Enterprise
2.
Cross-­‐Platforms
Mobile
Cloud
Mobile
Application:
Cross-­‐Platform
&
Native
API
Cloud-­‐SaaS
Enterprise
Mobility
Platform
Cross-­‐Platform
Mobile-­‐Application
Seamly
Integrated
to
Enterprise
Data
Access
BYOD
–
Bring
Your
Own
Device
Manage
Mobile
Application
Lifecycle
Mobile
Device
Management
Enterprise
Data
Access
Local
Device
Data
Catching,
Sync,
Security,
NotiNication
Enterprise
Service
Bus
(ESB)

14. ①
Comprehensive
BYOD
Approach
–
Why?
Simple
Approach
Comprehensive
Approach
I
Can
Use
iPads/Androids
on
My
Network
End
User
Drive
New
Business
Models
Enabled
by
Mobile
Devices
Reduce
Costs
and
Increase
Employee
Productivity
with
BYOD
Business
Increase
Agility
Through
Enabling
Mobile
Collaboration
Attract/Retain
Top
Talent
Who
Highly
Value
Their
Devices
à
2
Devices:
company
&
personal
10/8/12
Mobile
Cloud
Solution
14
Bring
Your
Own
Device
(BYOD)
strategy
is
the
extent
that
an
IT
organization
prohibits,
tolerates,
supports
or
embraces
the
use
of
personal
mobile
devices
at
work
and
the
controls
to
enforce
such
policy.

15. Challenges
q Proliferation
of
mobile
devices
on
corporate
networks
impacts
security
q Consumers
are
setting
the
rules
with
personal
and
mobile
device
and
application
use
q IT
teams
need
visibility
and
control;
user,
device,
application,
data
and
network
Risks
q
Data
loss
Lost
phone
or
laptop
Unauthorized
access
Compromised
system
Unknown
data
protection
q
Malware
Phishing,
access
mobile/app
q Compliance
Rogue
devices,
unauthorized
apps,
inconsistent
policy
10/8/12
Mobile
Cloud
Solution
15
①
BYOD
–
Challenges
&
Risks

16. CONNECT
Heterogeneous Sources
DB, FILES
MULTIMEDIA
REST-WS
JSON, ODATA
AZURE, SAP
SALESFORCE
USER AUTH
(LDAP/AD)
CONSUME
ARDROID
IOS
WINPHONE 8
BLACKBERY
Heterogeneous Devices
SENCHA /
PHONEGAP
CREATE
MOBILE HYBRID-APPS
Development Platform
MOBILEBUSINESSOBJECTS
HYBRID MOBILE APPLICATION
MVC CHART MAP
HTML5 & CSS3
NATIVE APPLICATION
DEVICE API PUSH STORAGE
MOBILE NATIVE DEPLOYMENT
ECLIPSE /
XCODE
MDM
CONTROL (BYOD)
MAM

17. Mobile
Components
Version
0.5
(Draft)
17

18. 1.1.
HTML5
&
CSS3
Version
0.5
(Draft)
18
Performance
3D
Effects
Semantics
Of[line
&
Storage
Styling
Connectivity
Multimedia
Device
Access

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

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

21. 1.3.
Of[line-­‐able
Data
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)
21
Data
Model
Cloud
Platform
Sync
Engine
Back
End
Integration
Browser
Run
JS
Display
Data
HTML
Data

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

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

24. 3.
Native
API
q Native
Device
q Native
Libs:
Barcode
scanning,
biometrics
Version
0.5
(Draft)
24

25. Push
Noti[ication
Back-­‐end
System
Back-­‐end
System
Back-­‐end
System
Back-­‐end
System
Polling
Adapters
Message-­‐bas
ed
Adapters
Uni[ied
Push
API
Noti[ication
State
DB
User-­‐Device
Database
iOS
Dispatcher
Android
Dispatcher
Apple
Push
Servers
(APNS)
Google
Push
Servers
(GCM)
3rd
Party
SMS
Gateway
Administrative
Console
SmartMobile
Client-­‐Side
Push
Services
SmartMobile
Client-­‐Side
Push
Services
iOS
Push
API
Android
Push
API
SMS
API
SMS
Dispatcher

26. REQUIREMENTS
REUSE
Why
do
we
need
it?
§ Performance
monitoring
and
compliance
§ Facilitate
in
impact
analysis
§ Reduce
elicita:on
and
analysis
effort
§ Assist
in
maintenance
of
exis:ng
solu:ons
§ Corporate
governance
§ Consistency
across
enterprise
What
do
we
need
to
do?
§ Iden:fy
requirements
that
are
candidates
for
long-­‐term
usage
by
the
enterprise
§ Reference
Organiza:onal
Process
Assets
§ Manage
requirements
traceability
What
are
the
reusable
requirements?
§ On-­‐going
(approved)
§ Sa:sfied
(approved)
§ Deferred
(unapproved)
What
are
the
output?
§ Suitable
for
long-­‐term
usage
across
enterprise
…
key
factors:
•
Packaging,
classifying,
tracing
•
Stored
in
a
common
repository
•
Easily
available;
easy
to
find
and
access
•
Clearly
named
and
described

27. MANAGE
REQUIREMENTS
TRACEABILITY
Traceability
helps
manage
scope
by
connecting
requirements
to
the
business
need
behind
an
initiative.
It
also
assists
in
making
sure
that
the
implemented
solution
“conforms
to
requirements”,
and
in
turn
supports
the
business
need.
Derivation
Allocation

28. VISUALIZATION
Reusable
Requirements
Repos
itory
Artefacts
Global
Product
UOM
Global
Product
UOM
Proj
#1
Product
UOM
Proj
#2
Product
UOM
Proj
#3
Product
UOM
Artefacts
Proj
#2
Product
UOM
OR
A
Business
Analyst
Solution
Requirements
Business
&
Stakeholder
Needs
Con[iguration
File

29. SCRUM Master
Validate
Products
Product Owne
r
Assess
Products
• Business Problem
• Business Opportunit
y
• Business Vision
• Resources
• Supporting Materials
• Business Goals
• Business Objectives
• Strategies
• Resources
• Supporting Materials
FSB
to
define
and
align
our
products
business
goals,
objec:ve
s
and
strategies.
This
will
align
our
team
and
products
to
achieve
the
business
targets
set
by
FSB.
FSU3
to
provide
the
current
and
future
business
problems,
o
pportuni:es
and
their
desired
outcome
(vision)
1. Product
owner
interacts
with
FSU3
2. Collect
informa:on
from
FSU3
3. Assess
product
to
ensure
it
meet
the
business
needs
1. Scrum
Master
interacts
with
FSB
2. Validate
product
to
ensure
the
product’s
futures
are
ali
gn
and
meet
the
business
goal
&
objec:ves.
3. Validate
product
to
ensure
it
brings
value
to
FSB.
R&D
Soldiers
to
analyse
the
collected
informa:on
from
FSU3
and
align
the
m
to
FSBs
&
Consultants
goals,
objec
:ves,
&
strategies.
To
make
sure
they
will
bring
business
value
to
the
orga
niza:on,
before
they’ll
be
developed.

30. Informa:on
Requirements
Decomposi:on
• Naviga:on
• Mock-­‐up
• Business
Rules
Manageable
Stories
Product
Backlog
R&D
Soldiers
define
the
requirements
and
solu:on
scope,
based
on
the
given
informa:on
from
FSU3.
This
will
ensure
FSB
will
have
the
full
control
and
o
wnership
of
the
solu:ons
and
products.
Further
it
will
help
us
focus
on
research
&
development.

31. 1.
Discover
Stakeholder
Needs
2.
Analyze,
Prioritize
and
Decide
3.
Make
Architectural
Trade-­‐Offs
4.
Communicate
Your
Plan
5.
Build,
Deploy
and
Validate
6.
Scale
Mobile
Solution

32. Mobile
Center
of
Excellence
Executive
Leadership
Project
Teams
Mobile
Stakeholders
Advise
Executive
Leadership
Centralize
Project
Coordination
Facilitate
Stakeholder
Communication

33. 33
Mobility
Framework
Detail
Architecture
Security
Applications
Process
People
Strategy
§ Application
Procurement
/
Development
§ Deployment
§ Quality
control
§ Architectural
Governance
§ Project
Planning
and
Management
§ Support
§ Mobility
Center
of
Excellence
§ Update
Security
Policies
§ Assign
Membership
/
Policies
§ Track
Assets
§ Monitor
/
Track
Security
Violations
§ Disable
Lost
/
Stolen
device
§ Remote
Kill
/
Lock
§ Over
The
Air
Application
Updates
§ Over
The
Air
Client
delivery
§ Compliance
Activity
logging
§ Application
Portfolio
Management
§ Mobile
App
Roadmap
§ Mobile
App
Store
§ User
/
Stakeholder
Communities
§ Usability
/
Functionality
/
Reliability
§ Access
Management
§ Authentication
§ Styles
of
computing
§ Device
/
platform
standards
§ Integration
with
enterprise
systems
§ Development
tooling
§ Device
testing
§ Frameworks
§ Aligned
with
overall
business
strategy
§ Business
opportunities
roadmap
§ Mobile
capabilities
roadmap
§ Mobile
device
management
strategy
§ Mobility
Governance
§ Roles
and
responsibilities
de[inition
§ Talent
Management
/
Skills
Optimization
§ Recruiting
§ Training

34. Reference
• http://scn.sap.com/community/mobile/
blog/2012/12/21/building-­‐sap-­‐mobile-­‐
apps-­‐with-­‐sencha-­‐touch-­‐-­‐part-­‐1
• http://www2.developerforce.com/mobile
• http://www.sencha.com/blog/sencha-­‐
touch-­‐spotlight-­‐xero
• http://www.sencha.com/products/touch/
whos-­‐using/
Version
1.0
34