Next Gen Web Architecture For The Cloud Era

UNCLASSIFIED
Next Gen Web

Architecture
for the Cloud Era
Darryl Nelson
Chief Scientist, Raytheon
Saturn 2013
28 Apr - 3 May
Copyright(2013) Raytheon
SATURN 2013
Agenda
Existing Web Application Architecture
SOFEA
Lessons learned
Darryl Nelson
SATURN 2013
Copyright(2013) Raytheon Company
Audience
Anyone interested in web technology
who has a basic understanding of
web applications and
Service Oriented Architectures (SOA)
Darryl Nelson
SATURN 2013
Focus
Data
Sources
Darryl Nelson
Big Data
/Enterprise
Infrastructure
SATURN 2013
Visualization,
Dashboards,
Reports
Arc of Web App Architecture History *
Servlets
MVC
Frameworks
AJAX
today
CGI
Early 90s
SOFEA
Static HTML Pages

Darryl Nelson
Web Templating
Engines
SATURN 2013
* NOT to scale!
Web Templating Engines
Embedded code within static HTML elements

Mix of static and dynamic HTML
"Model 1" Architecture
Examples
Java Server Pages (JSP)
PHP
Active Server Pages (ASP)
Darryl Nelson
SATURN 2013
Web Templating Engines cont.

Code
Web Template
<html>
Hello,
<b>{$db.name.102}</b>
Markup
Web Template Engine
<html>
Web Browser
Hello, Bob
01 Ted
02 Susan
.
.
.
101 Joe
102 Bob
Darryl Nelson
Data Store
SATURN 2013
MVC Frameworks
Model View Controller pattern

Server side framework
Model 2 Architecture
Examples
ASP.NET MVC Framework (.Net)
Struts, Spring MVC (Java)
Ruby on Rails (Ruby)
Django (Python)
Grails (Groovy)
Darryl Nelson
SATURN 2013
Web Browser
view
controller
model
Data Store
server
AJAX
Asynchronous JavaScript
And XML
Dynamic content changes
without reloading the
entire page
interactive and dynamic web
apps approaching rich client
capability
HTML/CSS + DOM +
XmlHttpRequest Object +
JavaScript + JSON/XML
Darryl Nelson
SATURN 2013
Img: http://courses.ischool.berkeley.edu/i153/s11/webapps-advanced
3 Processes of Web Applications

1. Application Download
Mobile code (JavaScript, HTML, Applets, Flash) download
to the client (web browser)
2. Presentation Flow
Dynamic visual rendering of the UI (screen changes, new
screens, etc) in response to user input and data state
changes
3. Data Interchange
The exchange of data between two software components
or tiers (search, updates, retrieval, etc)
Darryl Nelson
SATURN 2013
Process Allocation for

Web Templating Engines Frameworks
Service
Interface
Application Download,
Presentation Flow
Presentation
Logic
Network
Browser
(web server)
Data
Interchange
Darryl Nelson
Business
Logic
Data
Interchange
SATURN 2013
Persistence
Application
Characteristics of Web Templating Engines

and MVC Frameworks
Tight coupling between presentation flow and data
interchange (both in the web server)
Triggering a Presentation Flow in a web application always initiates a
Data Interchange operation
Every Data Interchange operation results in a Presentation Flow
operation
Presentation flow and data interchange are

orthogonal concerns that should be decoupled
Separate concerns
Darryl Nelson
SATURN 2013
Today
web templating engines +
MVC frameworks +
a sprinkling of Ajax
Darryl Nelson
SATURN 2013
SOA & Cloud

Cloud Stack
Web Apps
SOA Stack
SaaS
GOVERNANCE
SERVICE
BATTERY
INTERFACE
Endpoints
PaaS
IaaS
Data Schema
Mobile Devices
Machine-to-Machine
External Cloud
Policies
SATURN 2013
14
SOFEA
An architectural style
for web applications in
SOA (& Cloud) environments
Darryl Nelson
SATURN 2013
SOFEA
Service Oriented Front End Architecture
Synonymous with Single Page Web Applications
Life above the Service Tier
How to Build Application Front-ends in a Service-Oriented World
Ganesh Prasad, Rajat Taneja, Vikrant Todankar
Architectural Style
Not an implementation
Prasad, et al propose that the SOA revolution has left

behind application front ends/UIs
Darryl Nelson
SATURN 2013
SOFEA is now
Feasible because
1) Maturity of the SOA
paradigm in theory and
practice
2) Advancements in
browser-based client
technologies, especially
JavaScript browser
engines and AJAX toolkits
Necessary because
1) SOA is the defacto
delivery mechanism for
cloud-based services
(Cloud and SOA are
complementary
technologies)
2) Diversity of client
platforms
-
Darryl Nelson
Growing dominance of
Mobile clients
SATURN 2013
Legacy Enterprise
Web Architecture
CLIENT
SERVER
Web Browser
Web Page
Construction
Logic
Business Logic
and
Persistence
Typical Enterprise Web Application Architecture

Darryl Nelson
SATURN 2013
SOFEA
Web Browser
Web Browser
Darryl Nelson
SERVER
Web Page Business Logic

and
Construction
Persistence
Logic
SERVICES
CLIENT
SATURN 2013
Business Logic
and
Persistence
Process Allocation for SOFEA

Presentation
Flow
Service
Interface
Application Download
Application
Network
Service
Browser
Data
Interchange
Darryl Nelson
SATURN 2013
Business
Logic
Persistence
Presentation
Logic
3 Web Processes and SOFEA

Application
Download
Download
Server
SERVICES
Presentation
Flow
Web Browser
Data Interchange
Darryl Nelson
SATURN 2013
Business Logic
and
Persistence
Service
Interface
SOFEA Principles
1.
Application Download, Data Interchange, and Presentation

Flow must be decoupled
2.
3.
4.
No part of the client should be evoked, generated or templated

from the server-side.
Presentation Flow is a client-side concern only

All communication with the application server should be
using services (REST, SOAP, etc)
The MVC design pattern belongs in the client, not the
server
Darryl Nelson
SATURN 2013
SOFEA Lifecycle
One Time
Download
Presentation
Code
(HTML, JavaScript)
1.
Download
Server
Web Browser
2.
Darryl Nelson
Web Browser
SERVICES
Data Only
SATURN 2013
Business Logic
and
Persistence
MVC in the Web Browser

CONTROLLER
MODEL
MVC Pattern
VIEW
Web Server
Darryl Nelson
Web Browser
SATURN 2013
Benefits of SOFEA
Scalability
Organized programming model
Server has less work to do; no

more presentation generation,
just provide a services
Higher ROI for each LOC

Expanded opportunity space due
to the inherent reusable nature
of SOA
Better user response

Low latency == happy end users
After the app download, no
presentation is transported over
the wire, only business data
Natural fit into SOA and Cloud

environments
Darryl Nelson
Client developers concentrate on

the UI
Server-side developers concentrate
on Services
Offline applications
When the network crashes,
decoupled client can dynamically
switch out their model objects
Interoperability
Easier integration with lower
overhead from multiple platforms
Clients dont care if services are
Java, C#, Python, Cobol or a
heterogeneous mix
SATURN 2013
SOFEA Client Implementation Archetype

JSON
JavaScript
Web
Server
HTML-5
Single
HTML
Page
REST
MVC
Web Workers
DOM
HTTP
SPDY
Websockets
Darryl Nelson
SATURN 2013
Framework
(JAX-RS)
Lessons Learned
The web client is a Priority 1 architecture tier, not an after thought
Object-Oriented Analysis and Design principles

Design Patterns
Continuous integration, performance testing, etc
Critical to expend significant engineering time and energy on the client architecture
Use a mature client-side frameworks

Dojo, JQuery, AngularJS, etc
The RESTful model is natural fit for SOFEA systems

Architects & developers should bake-in asynchronicity between the server
and client layers
Leverage newer technologies where appropriate
HTML-5 Web Workers & Websockets
Googles SPDY
Start cross-browser compatibility testing early in the development cycle

Fight the add IE support later temptation
SOFEA excellent choice for our customers bandwidth starved environments

Very low latency for those customers with average-good network pipes
Darryl Nelson
SATURN 2013
Resources
Life Above the Service Tier
by Ganesh Prasad, Rajat Taneja and Vikrant Todankar
http://wisdomofganesh.blogspot.com/2011/10/life-above-service-tier-change-of-links.html
JavaScript Frameworks
Dojo: http://dojotoolkit.org/
JQuery: http://jquery.com/
AngularJS: http://angularjs.org/
KnockoutJS: http://knockoutjs.com/
JavaScript Design Patterns Book

http://addyosmani.com/resources/essentialjsdesignpatterns/book/
SOA & Cloud

http://www.infoq.com/articles/ieee-software-engineeering-services-cloudcomputing
Web Sockets
http://www.websocket.org/
Google SPDY
http://www.chromium.org/spdy
Darryl Nelson
SATURN 2013
Darryl Nelson
Chief Scientist
Raytheon Intelligence and Information
Services
Darryl.Nelson@Raytheon.com
Darryl.Nelson.Tech@Gmail.com
Darryl Nelson
SATURN 2013
backup
Darryl Nelson
SATURN 2013
SOFEA Implementation Examples

Client
JavaScript: Dojo, JQuery, ExtJS, angularjs.org,
knockoutjs.com, Twitter Bootstrap
Flex*
Silverlight*
Java Applets*
Services
WS-* (SOAP/WSDL)
Axis, Weblogic, Websphere
REST
Jersey, RESTEasy, RESTlets, Drop Wizard
Darryl Nelson
SATURN 2013
Processing Request with Push Response Design

Pattern
Web Services in the Cloud
3 Handle Request
1 Send Request
Web App
Task A
Push Notification
4
& Result Download
2 Web App runs

asynchronously
from the request
SATURN 2013
Adapted from J. Christensen, Using REST Web-Services and Cloud Computing to Create Next Generation Mobile Applications, ACM 978-60558-768-4/09/10
Task B
32

Next Gen Web Architecture For The Cloud Era

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Next Gen Web Architecture For The Cloud Era

Transféré par

Droits d'auteur :

Formats disponibles

UNCLASSIFIED

Next Gen Web

Arc of Web App Architecture History *

Static HTML Pages

Web Templating Engines

Embedded code within static HTML elements

Web Templating Engines cont.

Model View Controller pattern

3 Processes of Web Applications

Process Allocation for

Characteristics of Web Templating Engines

Presentation flow and data interchange are

SOA & Cloud

Life above the Service Tier

How to Build Application Front-ends in a Service-Oriented World

Ganesh Prasad, Rajat Taneja, Vikrant Todankar

Prasad, et al propose that the SOA revolution has left

Typical Enterprise Web Application Architecture

Web Page Business Logic

Process Allocation for SOFEA

3 Web Processes and SOFEA

Application Download, Data Interchange, and Presentation

No part of the client should be evoked, generated or templated

Presentation Flow is a client-side concern only

MVC in the Web Browser

Organized programming model

Server has less work to do; no

Higher ROI for each LOC

Better user response

Natural fit into SOA and Cloud

Client developers concentrate on

SOFEA Client Implementation Archetype

Object-Oriented Analysis and Design principles

Use a mature client-side frameworks

The RESTful model is natural fit for SOFEA systems

Start cross-browser compatibility testing early in the development cycle

SOFEA excellent choice for our customers bandwidth starved environments

JavaScript Design Patterns Book

SOA & Cloud

SOFEA Implementation Examples

Processing Request with Push Response Design

2 Web App runs

Vous aimerez peut-être aussi