SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era

SATURN 2013
Next Gen Web Architecture for the Cloud Era
Darryl Nelson
Chief Scientist, Raytheon
Saturn 2013
28 Apr - 3 May
Copyright©(2013) Raytheon
UNCLASSIFIED

SATURN 2013
Darryl Nelson
Copyright©(2013) Raytheon Company
Agenda
•Existing Web Application Architecture
•SOFEA
•Lessons learned

SATURN 2013
Darryl Nelson
Audience
Anyone interested in web technology
who has a basic understanding of
web applications and
Service Oriented Architectures (SOA)

SATURN 2013
Darryl Nelson
Data Sources
Big Data /Enterprise Infrastructure
Visualization, Dashboards, Reports
Focus

SATURN 2013
Darryl Nelson
Static HTML Pages
CGI
Servlets
Web Templating Engines
AJAX
SOFEA
Arc of Web App Architecture History *
* NOT to scale!
MVC Frameworks
Early 90’s
today

SATURN 2013
Darryl Nelson
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)

SATURN 2013
Darryl Nelson
Web Templating Engines cont.
<html>
Hello,
<b>{$db.name.102}</b>
<html>
Web Template Engine
Web Browser
Hello, Bob
Web Template
Code
Markup
01 Ted 02 Susan . . . 101 Joe 102 Bob
Data Store

SATURN 2013
Darryl Nelson
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

SATURN 2013
Darryl Nelson
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
Img: http://courses.ischool.berkeley.edu/i153/s11/webapps-advanced

SATURN 2013
Darryl Nelson
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)

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

SATURN 2013
Darryl Nelson
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

SATURN 2013
Darryl Nelson
web templating engines + MVC frameworks + a sprinkling of Ajax
Today

SATURN 2013
SOA & Cloud
14
Web Apps
Mobile Devices
Machine-to-Machine
SaaS
PaaS
IaaS
Data Schema
Policies
Cloud Stack
SOA Stack
INTERFACE Endpoints
SERVICE BATTERY
GOVERNANCE
External Cloud

SATURN 2013
Darryl Nelson
SOFEA
An architectural style
for web applications in
SOA (& Cloud) environments

SATURN 2013
Darryl Nelson
•Service Oriented Front End Architecture
–Synonymous with “Single Page” Web Applications
•Life above the Service Tier How to Build Application Frontends in a ServiceOriented 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/UI’s
SOFEA

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
Growing dominance of Mobile clients
Darryl Nelson

SATURN 2013
Darryl Nelson
Legacy Enterprise Web Architecture
Business Logic
and
Persistence
Web Browser
Web Page Construction Logic
CLIENT
SERVER
Typical Enterprise Web Application Architecture

SATURN 2013
Darryl Nelson
SOFEA
CLIENT
SERVER
Business Logic and Persistence
Web Browser
Web Page Construction Logic
Web Browser
SERVICES
Business Logic and Persistence

SATURN 2013
Darryl Nelson
Process Allocation for SOFEA
Network
Business Logic
Persistence
Browser
Presentation
Logic
Application
Data Interchange
Presentation
Flow
Service Interface
Application Download
Service

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

SATURN 2013
Darryl Nelson
SOFEA Principles
1.Application Download, Data Interchange, and Presentation Flow must be decoupled
‒No part of the client should be evoked, generated or templated from the server-side.
2.Presentation Flow is a client-side concern only
3.All communication with the application server should be using services (REST, SOAP, etc)
4.The MVC design pattern belongs in the client, not the server

SATURN 2013
Darryl Nelson
SOFEA Lifecycle
One Time
Download
Presentation
Code
(HTML, JavaScript)
Data Only
Web Browser
Download
Server
1.
Web Browser
SERVICES
2.
Business Logic
and
Persistence

SATURN 2013
Darryl Nelson
MVC in the Web Browser
Web Server
MVC Pattern
Web Browser
MODEL
CONTROLLER
VIEW

SATURN 2013
Benefits of SOFEA
•Scalability
–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
•Organized programming model
–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 don’t care if services are Java, C#, Python, Cobol or a heterogeneous mix
Darryl Nelson

SATURN 2013
SOFEA Client Implementation Archetype
Darryl Nelson
Single HTML Page
JSON
HTTP SPDY Websockets
Web Server
REST
Framework
(JAX-RS)
HTML-5
DOM
MVC
Web Workers
JavaScript

SATURN 2013
Darryl Nelson
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
–Google’s SPDY
•Start cross-browser compatibility testing early in the development cycle
–Fight the “add IE support later” temptation
•SOFEA excellent choice for our customer’s bandwidth starved environments
–Very low latency for those customer’s with average-good network pipes

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/spdy
Darryl Nelson
Resources

SATURN 2013
Darryl Nelson
Darryl Nelson Chief Scientist Raytheon Intelligence and Information Services Darryl.Nelson@Raytheon.com Darryl.Nelson.Tech@Gmail.com

SATURN 2013
backup
Darryl Nelson

SATURN 2013
Darryl Nelson
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

SATURN 2013
Processing Request with Push Response Design Pattern
32
Adapted from J. Christensen, Using REST Web-Services and Cloud Computing to Create Next Generation Mobile Applications, ACM 978-60558-768-4/09/10
Send Request
1
Web App runs asynchronously from the request
2
Handle Request
3
Push Notification & Result Download
4
Task A
Task B
Web Services in the Cloud
Web App

SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era (20)

More from Kunal Ashar (20)

Recently uploaded (20)

SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era