Next Gen Web Architecture for the Cloud Era

8/9/2019 Next Gen Web Architecture for the Cloud Era

1/32

SATURN 2013

Next Gen WebArchitecture

for the Cloud EraDarryl Nelson

Chief Scientist, Raytheon

Saturn 201328 Apr - 3 May

Copyright(2013) Raytheon

UNCLASSIFIED


2/32

SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company

Agenda

Existing Web Application Architecture SOFEA

Lessons learned


3/32


Audience

Anyone interested in web technologywho has a basic understanding of

web applications andService Oriented Architectures (SOA)


4/32


DataSources

Big Data/Enterprise

Infrastructure

Visualization,Dashboards,

Reports

Focus


5/32


Static HTML Pages

CGI

Servlets

Web TemplatingEngines

AJAX

SOFEA

Arc of Web App Architecture History *

* NOT to scale!

MVCFrameworks

Early 90s

today


6/32


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)


7/32


Web Templating Engines cont.

Hello, {$db.name.102}

Web Template EngineWeb Browser

Hello, Bob

Web Template Code

Markup

01 Ted

02 Susan...101 Joe102 Bob

Data Store


8/32


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)

Data Store

controller

model

Web Browser

view

server


9/32


AJAX Asynchronous JavaScript

And XML Dynamic content changes

without reloading the

entire page interactive and dynamic web

apps approaching rich clientcapability

HTML/CSS + DOM + XmlHttpRequest Object +JavaScript + JSON/XML

Img: http://courses.ischool.berkeley.edu/i153/s11/webapps-advanced


10/32


3 Processes of Web Applications

1. Application Download Mobile code (JavaScript, HTML, Applets, Flash) downloadto the client (web browser)

2. Presentation FlowDynamic visual rendering of the UI (screen changes, newscreens, etc) in response to user input and data statechanges

3. Data InterchangeThe exchange of data between two software componentsor tiers (search, updates, retrieval, etc)


11/32


Process Allocation forWeb Templating Engines Frameworks

Network PresentationLogic

(web server)

BusinessLogic

P e r s i s t e n c e

Browser

Application

DataInterchange

DataInterchange

Application DownloadPresentation Flow

ServiceInterface


12/32


Characteristics of Web Templating Enginesand MVC Frameworks

Tight coupling between presentation flow and datainterchange (both in the web server)

Triggering a Presentation Flow in a web application always initiates aData Interchange operation

Every Data Interchange operation results in a Presentation Flowoperation

Presentation flow and data interchange areorthogonal concerns that should be decoupled

Separate concerns


13/32


web templating engines +MVC frameworks +a sprinkling of Ajax

Today


14/32

SATURN 2013

SOA & Cloud

14

Web Apps

Mobile Devices

Machine-to-Machine

SaaS

PaaS

IaaS

Data Schema

Policies

Cloud Stack

SOA Stack

I N T E R F A C E

E n

d p o

i n t s

S E R V I C E

B A T T E R Y

G O V E R N A N C E

E x

t e r n a

l C l o u

d


15/32


SOFEA

An architectural style

for web applications in

SOA (& Cloud) environments


16/32


Service Oriented Front End Architecture Synonymous with Single Page Web Applications

Life above the Service TierHow 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

SOFEA


17/32

SATURN 2013

SOFEA is now

Feasible because

1) Maturity of the SOAparadigm in theory and

practice2) Advancements in

browser-based clienttechnologies, especiallyJavaScript browserengines and AJAX toolkits

Necessary because

1) SOA is the defactodelivery mechanism for

cloud-based services(Cloud and SOA arecomplementarytechnologies)

2) Diversity of clientplatforms

Growing dominance ofMobile clients

Darryl NelsonCopyright(2013) Raytheon Company


18/32


Legacy EnterpriseWeb Architecture

Business Logicand

Persistence

Web BrowserWeb Page

Construction

Logic

CLIENT SERVER

Typical Enterprise Web Application Architecture


19/32


SOFEACLIENT SERVER

Business Logicand

Persistence

Web BrowserWeb Page

ConstructionLogic

Web Browser

S E R V I C E S Business Logic

andPersistence


20/32


Process Allocation for SOFEA

Network BusinessLogic

P e r s i s t e n c e Browser

Presentation

Logic

Application

DataInterchange

PresentationFlow Service

Interfacepplication Download

Service


21/32


3 Web Processes and SOFEA

Web BrowserBusiness Logic

and

Persistence

Presentation

Flow

Data Interchange

DownloadServer

ApplicationDownload

ServiceInterface

S E R V I C E S


22/32


SOFEA Principles

1. Application Download, Data Interchange, and PresentationFlow must be decoupled

No part of the client should be evoked, generated or templatedfrom the server-side.

2. Presentation Flow is a client-side concern only3. All communication with the application server should beusing services (REST, SOAP, etc)

4. The MVC design pattern belongs in the client, not theserver


23/32


SOFEA LifecycleOne TimeDownload

PresentationCode

(HTML, JavaScript)

Data Only

Web BrowserDownload

Server1.

Web Browser

S E R V I C E S

2.Business Logic

andPersistence


24/32


MVC in the Web Browser

Web Server

MVC Pattern

Web Browser

MODEL

CONTROLLER

VIEW


25/32

SATURN 2013

Benefits of SOFEA Scalability

Server has less work to do; nomore presentation generation,

just provide a services Higher ROI for each LOC

Expanded opportunity space dueto the inherent reusable natureof SOA

Better user response Low latency == happy end users After the app download, no

presentation is transported overthe wire, only business data

Natural fit into SOA and Cloudenvironments

Organized programming model Client developers concentrate on

the UI Server-side developers concentrate

on Services Offline applications

When the network crashes,decoupled client can dynamicallyswitch out their model objects

Interoperability Easier integration with lower

overhead from multiple platforms Clients dont care if services are

Java, C#, Python, Cobol or aheterogeneous mix



26/32


27/32


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


28/32

SATURN 2013

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-cloud-

computing Web Sockets

http://www.websocket.org/ Google SPDY

http://www.chromium.org/spdyDarryl Nelson

Copyright(2010) Raytheon Company

Resources


29/32


30/32

SATURN 2013

backup



31/32


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


32/32

SATURN 2013

Processing Request with Push Response DesignPattern

32

Send Request1

Web App runsasynchronouslyfrom the request

2

Handle Request3

Push Notification& Result Download 4

Task A Task B

Web Services in the Cloud

Web App

Next Gen Web Architecture for the Cloud Era

Documents

Transcript of Next Gen Web Architecture for the Cloud Era