SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era
10 likes4,931 views
The document discusses the SOFEA (Service Oriented Front End Architecture) approach for building web applications. It provides an overview of existing web application architectures like web templating engines and MVC frameworks. It then introduces SOFEA as an architectural style that decouples the application download, presentation flow, and data interchange aspects of web applications by moving the presentation logic to the client and accessing backend services. The document outlines the benefits of SOFEA and provides examples of technologies that can be used to implement it.
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for the Cloud Era
- 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. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Agenda •Existing Web Application Architecture •SOFEA •Lessons learned
- 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. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Data Sources Big Data /Enterprise Infrastructure Visualization, Dashboards, Reports Focus
- 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. 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. 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. 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. 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. 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. 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. 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. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company web templating engines + MVC frameworks + a sprinkling of Ajax Today
- 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. SATURN 2013 Darryl Nelson Copyright©(2010) Raytheon Company SOFEA An architectural style for web applications in SOA (& Cloud) environments
- 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. 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. 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. 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. 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. 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. 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. 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. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company MVC in the Web Browser Web Server MVC Pattern Web Browser MODEL CONTROLLER VIEW
- 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. 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. 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. 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. SATURN 2013 Darryl Nelson Copyright©(2013) Raytheon Company Darryl Nelson Chief Scientist Raytheon Intelligence and Information Services [email protected] [email protected]
- 30. SATURN 2013 backup Darryl Nelson Copyright©(2013) Raytheon Company
- 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. 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