Post on 01-Jun-2018
transcript
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
2/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
Agenda
Existing Web Application Architecture SOFEA
Lessons learned
8/9/2019 Next Gen Web Architecture for the Cloud Era
3/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
Audience
Anyone interested in web technologywho has a basic understanding of
web applications andService Oriented Architectures (SOA)
8/9/2019 Next Gen Web Architecture for the Cloud Era
4/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
DataSources
Big Data/Enterprise
Infrastructure
Visualization,Dashboards,
Reports
Focus
8/9/2019 Next Gen Web Architecture for the Cloud Era
5/32
SATURN 2013Darryl NelsonCopyright(2012) Raytheon Company
Static HTML Pages
CGI
Servlets
Web TemplatingEngines
AJAX
SOFEA
Arc of Web App Architecture History *
* NOT to scale!
MVCFrameworks
Early 90s
today
8/9/2019 Next Gen Web Architecture for the Cloud Era
6/32
SATURN 2013Darryl NelsonCopyright(2012) Raytheon Company
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)
8/9/2019 Next Gen Web Architecture for the Cloud Era
7/32
SATURN 2013Darryl NelsonCopyright(2012) Raytheon Company
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/9/2019 Next Gen Web Architecture for the Cloud Era
8/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
9/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
10/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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)
8/9/2019 Next Gen Web Architecture for the Cloud Era
11/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
12/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
13/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
web templating engines +MVC frameworks +a sprinkling of Ajax
Today
8/9/2019 Next Gen Web Architecture for the Cloud Era
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
15/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
SOFEA
An architectural style
for web applications in
SOA (& Cloud) environments
8/9/2019 Next Gen Web Architecture for the Cloud Era
16/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
18/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
Legacy EnterpriseWeb Architecture
Business Logicand
Persistence
Web BrowserWeb Page
Construction
Logic
CLIENT SERVER
Typical Enterprise Web Application Architecture
8/9/2019 Next Gen Web Architecture for the Cloud Era
19/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
SOFEACLIENT SERVER
Business Logicand
Persistence
Web BrowserWeb Page
ConstructionLogic
Web Browser
S E R V I C E S Business Logic
andPersistence
8/9/2019 Next Gen Web Architecture for the Cloud Era
20/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
21/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
22/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
23/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
24/32
SATURN 2013Darryl NelsonCopyright(2013) Raytheon Company
MVC in the Web Browser
Web Server
MVC Pattern
Web Browser
MODEL
CONTROLLER
VIEW
8/9/2019 Next Gen Web Architecture for the Cloud Era
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
Darryl NelsonCopyright(2013) Raytheon Company
8/9/2019 Next Gen Web Architecture for the Cloud Era
26/32
8/9/2019 Next Gen Web Architecture for the Cloud Era
27/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
29/32
8/9/2019 Next Gen Web Architecture for the Cloud Era
30/32
SATURN 2013
backup
Darryl NelsonCopyright(2013) Raytheon Company
8/9/2019 Next Gen Web Architecture for the Cloud Era
31/32
SATURN 2013Darryl NelsonCopyright(2010) Raytheon Company
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
8/9/2019 Next Gen Web Architecture for the Cloud Era
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