Modern Web Application Architecture Logical Diagram (DRAFT)

W
e
b

L
a
y
e
r

(
S
e
r
v
e
r
)
C
l
i
e
n
t

L
a
y
e
r
P
e
r
s
i
s
t
e
n
c
e

L
a
y
e
r
Architecture & Design Team: Long Le Date: June 11, 2013 Version 1.0 (DRAFT)
Repository Pattern
Unit of Work Pattern
D
a
t
a
L
a
y
e
r
Visible UI/UX
HTML 5/CSS3
P
r
e
s
e
n
t
a
t
i
o
n
L
a
y
e
r
Controller
B
u
s
i
n
e
s
s
L
a
y
e
r
Application Facade
Business
Workflows
Business
Entities/Models
Business
Components
Data Access
Components
Service
Agents
Data Helpers
& Utilities
Database
Services e.g. Bing
Maps, Facebook, etc.
C
r
o
s
s
-
C
u
t
t
i
n
g
S
e
c
u
r
i
t
y
O
p
e
r
a
t
i
o
n
a
l

M
a
n
a
g
e
m
e
n
t
C
o
m
m
u
n
i
c
a
t
i
o
n
Application Layer
Javascript
Data Access Layer
Javascript
Local Storage
(HTML5)
Navigation APIs
Javascript
Web UI
HTML5/CSS3/JS
Cache
Slow
changing data
D
a
t
a

S
e
r
v
i
c
e
s
O
D
A
T
A
MVVM Pattern & SPA
DI & IoC Pattern
Internet
e.g. logging, instrumentation,
configuration, tracing, , perf
counters, caching, etc.