Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
SATURN 2013 
Next Gen Web Architecture for the Cloud Era 
Darryl Nelson 
Chief Scientist, Raytheon 
Saturn 2013 
28 Apr - ...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Agenda 
•Existing Web Application Architecture 
•SOFEA 
•Le...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Audience 
Anyone interested in web technology 
who has a ba...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Data Sources 
Big Data /Enterprise Infrastructure 
Visualiz...
SATURN 2013 
Darryl Nelson 
Copyright©(2012) Raytheon Company 
Static HTML Pages 
CGI 
Servlets 
Web Templating Engines 
A...
SATURN 2013 
Darryl Nelson 
Copyright©(2012) Raytheon Company 
Web Templating Engines 
•Embedded code within static HTML e...
SATURN 2013 
Darryl Nelson 
Copyright©(2012) Raytheon Company 
Web Templating Engines cont. 
<html> 
Hello, 
<b>{$db.name....
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
MVC Frameworks 
•Model View Controller pattern 
•Server sid...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
AJAX 
•Asynchronous JavaScript And XML 
•Dynamic content ch...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
3 Processes of Web Applications 
1.Application Download Mob...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
Process Allocation for Web Templating Engines Frameworks 
N...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
Characteristics of Web Templating Engines and MVC Framework...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
web templating engines + MVC frameworks + a sprinkling of A...
SATURN 2013 
SOA & Cloud 
14 
Web Apps 
Mobile Devices 
Machine-to-Machine 
SaaS 
PaaS 
IaaS 
Data Schema 
Policies 
Cloud...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
SOFEA 
An architectural style 
for web applications in 
SOA...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
•Service Oriented Front End Architecture 
–Synonymous with ...
SATURN 2013 
SOFEA is now… 
Feasible because 
1)Maturity of the SOA paradigm in theory and practice 
2)Advancements in bro...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Legacy Enterprise Web Architecture 
Business Logic 
and 
Pe...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
SOFEA 
CLIENT 
SERVER 
Business Logic and Persistence 
Web ...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Process Allocation for SOFEA 
Network 
Business Logic 
Pers...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
3 Web Processes and SOFEA 
Web Browser 
Business Logic 
and...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
SOFEA Principles 
1.Application Download, Data Interchange,...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
SOFEA Lifecycle 
One Time 
Download 
Presentation 
Code 
(H...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
MVC in the Web Browser 
Web Server 
MVC Pattern 
Web Browse...
SATURN 2013 
Benefits of SOFEA 
•Scalability 
–Server has less work to do; no more presentation generation, just provide a...
SATURN 2013 
SOFEA Client Implementation Archetype 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Single HTML Page 
JS...
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
Lessons Learned 
•The web client is a “Priority 1” architec...
SATURN 2013 
•Life Above the Service Tier by Ganesh Prasad, Rajat Taneja and Vikrant Todankar 
–http://wisdomofganesh.blog...
SATURN 2013 
Darryl Nelson 
Copyright©(2013) Raytheon Company 
Darryl Nelson Chief Scientist Raytheon Intelligence and Inf...
SATURN 2013 
backup 
Darryl Nelson 
Copyright©(2013) Raytheon Company
SATURN 2013 
Darryl Nelson 
Copyright©(2010) Raytheon Company 
SOFEA Implementation Examples 
•Client 
–JavaScript: Dojo, ...
SATURN 2013 
Processing Request with Push Response Design Pattern 
32 
Adapted from J. Christensen, Using REST Web-Service...
Nächste SlideShare
Wird geladen in …5
×

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

3.727 Aufrufe

Veröffentlicht am

SOFEA (Service Oriented Front End Architecture) including Javascript, AJAX, MVC, etc. How

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

  1. 1. 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
  2. 2. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Agenda •Existing Web Application Architecture •SOFEA •Lessons learned
  3. 3. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Audience Anyone interested in web technology who has a basic understanding of web applications and Service Oriented Architectures (SOA)
  4. 4. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Data Sources Big Data /Enterprise Infrastructure Visualization, Dashboards, Reports Focus
  5. 5. SATURN 2013 Darryl Nelson Copyright©(2012) Raytheon Company 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
  6. 6. SATURN 2013 Darryl Nelson Copyright©(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)
  7. 7. SATURN 2013 Darryl Nelson Copyright©(2012) Raytheon Company 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
  8. 8. SATURN 2013 Darryl Nelson Copyright©(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
  9. 9. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company 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
  10. 10. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company 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)
  11. 11. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company 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
  12. 12. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company 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
  13. 13. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company web templating engines + MVC frameworks + a sprinkling of Ajax Today
  14. 14. 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
  15. 15. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company SOFEA An architectural style for web applications in SOA (& Cloud) environments
  16. 16. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company •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
  17. 17. 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 Copyright©(2013) Raytheon Company
  18. 18. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Legacy Enterprise Web Architecture Business Logic and Persistence Web Browser Web Page Construction Logic CLIENT SERVER Typical Enterprise Web Application Architecture
  19. 19. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company SOFEA CLIENT SERVER Business Logic and Persistence Web Browser Web Page Construction Logic Web Browser SERVICES Business Logic and Persistence
  20. 20. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Process Allocation for SOFEA Network Business Logic Persistence Browser Presentation Logic Application Data Interchange Presentation Flow Service Interface Application Download Service
  21. 21. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company 3 Web Processes and SOFEA Web Browser Business Logic and Persistence Presentation Flow Data Interchange Download Server Application Download Service Interface SERVICES
  22. 22. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company 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
  23. 23. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company SOFEA Lifecycle One Time Download Presentation Code (HTML, JavaScript) Data Only Web Browser Download Server 1. Web Browser SERVICES 2. Business Logic and Persistence
  24. 24. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company MVC in the Web Browser Web Server MVC Pattern Web Browser MODEL CONTROLLER VIEW
  25. 25. 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 Copyright©(2013) Raytheon Company
  26. 26. SATURN 2013 SOFEA Client Implementation Archetype Darryl Nelson Copyright©(2013) Raytheon Company Single HTML Page JSON HTTP SPDY Websockets Web Server REST Framework (JAX-RS) HTML-5 DOM MVC Web Workers JavaScript
  27. 27. SATURN 2013 Darryl Nelson Copyright©(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 –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
  28. 28. 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 Copyright©(2010) Raytheon Company Resources
  29. 29. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Darryl Nelson Chief Scientist Raytheon Intelligence and Information Services Darryl.Nelson@Raytheon.com Darryl.Nelson.Tech@Gmail.com
  30. 30. SATURN 2013 backup Darryl Nelson Copyright©(2013) Raytheon Company
  31. 31. SATURN 2013 Darryl Nelson Copyright©(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
  32. 32. 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

×