web applications - universität des saarlandes · web applications must to implement the semantic...
TRANSCRIPT
![Page 1: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/1.jpg)
Web ApplicationsSoftware Engineering 2017
Alessio Gambi - Saarland University
Based on the work of Cesare Pautasso, Christoph Dorn, Andrea Arcuri, and others
![Page 2: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/2.jpg)
ReCap
![Page 3: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/3.jpg)
Software Architecture
A software system’s architecture is the set of principal design decisions made
about the system. N. Taylor et al.
Abstraction Communication
Visualization and Representation Quality Attributes
![Page 4: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/4.jpg)
Every system a software architecture has
What designers want
![Page 5: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/5.jpg)
Design
• Architectural Styles
• Architectural Patterns
• Building Blocks - Software Components - Component API/Interfaces - Software Connectors
![Page 6: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/6.jpg)
Send HTTP request, and get HTTP response containing the HTML page
Browser visualizes it
SendaHTTPrequest,andgetbackaHTMLpagewhichwillbevisualizedinthebrowser
![Page 7: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/7.jpg)
Client/Server• Many clients, active, close to users
• One server, passive, close to data
• Single point of failure, scalability
• Security, scalability
![Page 8: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/8.jpg)
HTTPThe Hypertext Transfer Protocol
![Page 9: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/9.jpg)
HTTPThe Hypertext Transfer Protocol
Connector or Component ?
![Page 10: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/10.jpg)
HTTPThe Hypertext Transfer Protocol
Connector or Component ?
Synch or Asynch ?
![Page 11: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/11.jpg)
HTTPThe Hypertext Transfer Protocol
Connector or Component ?
Synch or Asynch ?
Stateful or stateless ?
![Page 12: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/12.jpg)
HTTP Request
• Action: verb, express the intent
• Headers: meta-data
• Body: optional, can be anything, a stream of bytes, form data, session information, etc.
![Page 13: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/13.jpg)
HTTP Actions Have precise semantic, and
a web application might not implement all of them
Web applications must to implement the semantic right
GET retrieve a resource
POST send data and/or create a resource
PUT replace an existing resource
DELETE delete a resource
HEAD retrieve HEADers but not body
OPTIONS check the methods available on the resource
![Page 14: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/14.jpg)
HTTP ResponseHeaders and status
Status codes, organized in families: 1xx: information 2xx: success 3xx: redirection 4xx: user error 5xx: server error
Delivers a resource: a page HTML, a CSS file for the style, images, JS libraries, etc.
![Page 15: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/15.jpg)
HTTP Body• Transfer the main part of the data, but not the only
way to send data query params, custom headers
• Required in POST and PUT requests
• Required in responses to GET requests
• HEAD must not provide one
![Page 16: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/16.jpg)
HTMLThe Hypertext Markup Language
![Page 17: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/17.jpg)
Linkstootherfiles
• Todisplaythepageinthepreviousslide,afteraGEToftheindex.htmlpage,thebrowserwilldotwofurtherHTTPGETrequests• Thosefurther2requestscouldbedoneinparallelontwodifferentTCPconnections
Resources
One request per resources, multiple requests in parallelAll requests must complete before a page is fully displayed
![Page 18: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/18.jpg)
Static vs Dynamic PagesStatic:
Files are served as they are (index.html) content does not change
![Page 19: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/19.jpg)
Static vs Dynamic PagesStatic:
Files are served as they are (index.html) content does not change
Dynamic:
The HTML (or part of it) is generated upon request based on data
![Page 20: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/20.jpg)
State-Logic-Display
cluster elements that change at the same rate
![Page 21: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/21.jpg)
Server-Side HTML Rendering
• The HTML page is created on the server and sent back to the client
• Overhead in processing each request if the page is created from scratch
• Same content for different displays Desktop vs Tablet vs Mobile
![Page 22: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/22.jpg)
Presenter-Viewextract the content from the model to be presented
from the rendering into screens/web pages
![Page 23: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/23.jpg)
Server-Side HTML Rendering
• Based on HTML templates that mix together HTML tags, data, and code
http://www.embeddedjs.com/getting_started.html
![Page 24: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/24.jpg)
Server-Side HTML Rendering
• Based on HTML templates that mix together HTML tags, data, and code
• Different technologies: PHP scripts — index.php JavaServer Faces (JSF) — index.xhtml Embedded Ruby (ERB) — index.html.erb
![Page 25: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/25.jpg)
![Page 26: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/26.jpg)
Server-Side HTML Rendering• Based on HTML templates that mix together HTML
tags, data, and code
• Different technologies: PHP scripts — index.php JavaServer Faces (JSF) — index.xhtml Embedded Ruby (ERB) — index.html.erb
• Templates do not necessarily target the entire page and they might not be stored in “files”
![Page 27: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/27.jpg)
Components
![Page 28: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/28.jpg)
Content Management Systems (CMS)
![Page 29: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/29.jpg)
![Page 30: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/30.jpg)
Design
![Page 31: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/31.jpg)
3-Tier Architecture
Web Browser
Front End App Server Back End
Business logic
Presentation
Data source
![Page 32: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/32.jpg)
Layered (Style)
• Communications 1 layer up/down
• Information hiding, no circular deps
• Possibly bad performance
• Good evolvability
![Page 33: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/33.jpg)
18!
Where to run the layers? What run where?
thin-client fat-client
![Page 34: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/34.jpg)
3-Tier Architecture
Web Browser
Front End App Server Back End
Business logic
Presentation
Data source
![Page 35: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/35.jpg)
Data LayerWeb Browser
Front End App Server Back End
• Persistence
• Storage
![Page 36: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/36.jpg)
A Mapping Problem
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Domain model
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Data storage
![Page 37: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/37.jpg)
Domain Model
• Represent concepts in the domain and their relations, not as rows in a database
• Network of interconnected concepts
• Abstract Data Type data and the behavior
![Page 38: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/38.jpg)
Storage modelHow to store data?
• Key-Value Model list of keys and values (hashtable style)
• Relational Model traditional SQL model
• Document-oriented Model schema-less documents
• Graph-oriented Model data is stored as an interconnected graph
![Page 39: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/39.jpg)
Key-Value• Implement a map
• Values have no schema
![Page 40: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/40.jpg)
Relational• Set-theory
• Collection of tables with rows and columns
![Page 41: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/41.jpg)
Document-oriented• Data stored in
document but not relations
• Extends Key-Value
![Page 42: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/42.jpg)
Graph-oriented• Data stored as network
graph
• Relations first-class citizens
![Page 43: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/43.jpg)
Polyglot PersistenceMultiple ways to store data
User Sessions
Financial Data
Shopping Cart
Recommendation
Product Catalog
ReportingRelational
Document KeyValue
Graph
![Page 44: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/44.jpg)
3-Tier Architecture
Web Browser
Front End App Server Back End
Business logic
Presentation
Data source
![Page 45: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/45.jpg)
Application LayerWeb Browser
Front End App Server Back End
• Data access, navigation, and persistence
• Data processing (Business logic)
![Page 46: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/46.jpg)
Plugin• Explicit extension points
• Static/Dynamic composition
• Low security (3rd party code)
• Extensibility and customizability
![Page 47: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/47.jpg)
A Different Problem (?)
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Programming Language
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Storage Architecture
![Page 48: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/48.jpg)
Data Access API
Relational Database
(e.g. MySQL)
REST API REST API
Object-based storage (e.g. S3)
Document-based
Database
Relational Database
Service API Tool-specific API
• Add an abstraction layer that the represent the database in the application
• Wrap the communication with the data store and expose it as domain model
![Page 49: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/49.jpg)
Data Source Patterns• Row Data Gateway
One instance per row returned by a query
• Table Data Gateway One instance per table
• Active Record Encapsulates DB access and adds business logic to data
• Data Mapper loads DB into Domain Model, and vice-versa
![Page 50: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/50.jpg)
Row and Table Gateways
• Based on table structure
• Conversion of object type to database format
• Typically stateless
• Push back and forth data
![Page 51: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/51.jpg)
Active Record
static get(int id)insertupdatedelete
calculateRecognitions()
productIdproductName
Product
Data Store
Row Data Gateway + Business Logic
• Methods for: - Create instances from SLQ results - Insert new instances in the data store - Update data store based on instances data - Find relevant instances
![Page 52: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/52.jpg)
Data Mapper
calculateRecognitions()
productIdproductName
ProductData Store
get(int id)insertupdatedelete
ProductMapper
• Decouple objects structure from database structure
• There may be more than one mapper per domain object
![Page 53: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/53.jpg)
Navigate (Relational) Data
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Traverse object graph
20!
Core Problem
Conceptual mismatch
Programming Language Objects
Native Database Structure (e.g., relations)
Join over foreign keys
![Page 54: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/54.jpg)
Lazy Loading
![Page 55: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/55.jpg)
Lazy Loading
Interrupt the load at some point and resume it later only if needed
![Page 56: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/56.jpg)
Lazy Loading Patterns• Lazy Initialization
Checks if field is null at every access
• Value Holder Wraps lazy-loaded objects
• Virtual Proxy Mocks field access and loads values on the demand
• Ghost Real object but partially loaded, missing data loaded on first access
![Page 57: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/57.jpg)
3-Tier Architecture
Web Browser
Front End App Server Back End
Business logic
Presentation
Data source
![Page 58: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/58.jpg)
Front EndWeb Browser
Front End App Server Back End
• Generate the HTML based on request and data from the backend
• Can handle client side interactions both inside the server and the client’s browser
• Security, input validation, responsiveness, etc.
![Page 59: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/59.jpg)
Web Frameworks
![Page 60: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/60.jpg)
Plugin• Explicit extension points
• Static/Dynamic composition
• Low security (3rd party code)
• Extensibility and customizability
![Page 61: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/61.jpg)
Client Side
![Page 62: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/62.jpg)
JavaScript• a programming language executed in the browser
nothing to do with java
• JS files/libraries referenced by the web page like any other resource
• Can be inlined
• Dynamically manipulates the page Document Object Model (DOM) to alter page’s content, structure, and behavior
![Page 63: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/63.jpg)
AJAX Asynchronous JavaScript and XML
![Page 64: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/64.jpg)
JS not so (well designed) easy
![Page 65: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/65.jpg)
JS Frameworks
![Page 66: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/66.jpg)
Case Study
![Page 67: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/67.jpg)
Main Scenarios
• A user requests an article during normal operation and gets the rendered article HTML page.
• An editor saves an edited article during normal operation and the article is saved.
![Page 68: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/68.jpg)
![Page 69: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/69.jpg)
![Page 70: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/70.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleViewSubmit Logic
UI Page
Skinning Localization
Static Resources
![Page 71: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/71.jpg)
Qualities
• “Basic” implementation
- Limited scalability
- Single point of failure
- Limited Security
![Page 72: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/72.jpg)
Performance Tactics
• Control Resource Demand - Increase the resource efficiency (caching) - Reduce overhead (pre-generate HTML from PHP)
• Manage Resources - Schedule resources (load balancer)
https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application
![Page 73: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/73.jpg)
Load Balancingdeploy many replicated instances of the server
on multiple machines
![Page 74: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/74.jpg)
![Page 75: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/75.jpg)
![Page 76: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/76.jpg)
Caching + Load Balancing
FrontEnd(Apache)
![Page 77: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/77.jpg)
Caching + Load Balancing
Squid(Caching) Apache
![Page 78: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/78.jpg)
![Page 79: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/79.jpg)
Caching + Load Balancing
Squid(Caching) Apache
![Page 80: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/80.jpg)
Caching + Load Balancing
Squid ApacheLoadBalancer(Squid) LoadBalancer
![Page 81: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/81.jpg)
Caching + Load Balancing
Squid ApacheLoadBalancer(Squid) LoadBalancer
Squid ApacheLoadBalancer LoadBalancer
Squid
Squid
Apache
Apache
![Page 82: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/82.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleViewSubmit Logic
UI Page
Skinning Localization
Static Resources
![Page 83: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/83.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleViewSubmit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache Cache
CacheCache
![Page 84: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/84.jpg)
Performance Tactics
• Control Resource Demand - Prioritize events (deferred article updates)
• Manage Resources - Introduce concurrency (distributed database) - Schedule resources (load balancer) - Multiple copies of data and computations
https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application
![Page 85: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/85.jpg)
Master/Slavesplit a large job into smaller independent
partitions which can be processed in parallel
![Page 86: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/86.jpg)
Distribution + Replication
Database
More reads than writesNear-live updates (no strict consistency requirements)
![Page 87: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/87.jpg)
Distribution + Replication
DB Slave
Load Balancer
ReadsWrites
DB Master
More reads than writesNear-live updates (no strict consistency requirements)
![Page 88: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/88.jpg)
Clear data separation (Article Name: A-B, C-D, etc..)
Distribution + ReplicationData Sharding
![Page 89: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/89.jpg)
Distribution + Replication
DB Slave
Load Balancer
ReadsWrites
DB Master
![Page 90: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/90.jpg)
Distribution + Replication
DB Slave
Load Balancer(Master)
ReadsWrites
DB Master(Shard)
Partition Logic(Sharding, Relication
![Page 91: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/91.jpg)
Visualization
![Page 92: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/92.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleViewSubmit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache Cache
CacheCache
![Page 93: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/93.jpg)
Backend
Parser
ArticleEdit
Reads
Writes
ArticleView
Submit Logic
UI Page
Skinning Localization
ParserCache
Static Resources
Loader
CachedCached
Cached
Job Runner
Writes
Job Queue
HTML File Cache
Precompile/Recompile
Regenerate/Invalidate
![Page 94: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/94.jpg)
Security/Availability Tactics• Prevent Attacks
• Challenge Tokens (CSRF) • Validation (User) and Sanitization (SQL Injection, XSS)
• Resist Attacks • Maintain multiple copies of computations • Maintain multiple copies of data
• Recover from Attacks • DB Versioning (Recovery from data loss)
![Page 95: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/95.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleViewSubmit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache Cache
CacheCache
![Page 96: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/96.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache Cache
CacheCache
Sanitizer Pipeline
User Access
![Page 97: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/97.jpg)
Backend
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache
CacheSanitizer
Cache
Cache
![Page 98: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/98.jpg)
Additional Qualities
![Page 99: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/99.jpg)
Extensibility
Backend
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache
CacheSanitizer
Cache
Cache
![Page 100: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/100.jpg)
Extensibility
Backend
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache
CacheSanitizer
Cache
Cache
Hook EngineRegister Callback
Notify
Notify
NotifyNotify
Notify
External Module
![Page 101: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/101.jpg)
Configurability/Customizability
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache
CacheSanitizer
Cache
Cache
![Page 102: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/102.jpg)
Global Variables and Configurations
ParserArticleEdit
ReadsWrites
ArticleView
Submit Logic
UI Page
Skinning Localization
Static Resources
Loader
Cache
CacheSanitizer
Cache
Cache
Configurability/Customizability
![Page 103: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/103.jpg)
Process View
![Page 104: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/104.jpg)
Read ArticleA user requests an article during normal operation and gets the rendered article
HTML page.
![Page 105: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/105.jpg)
GET Article
HTML Cache
LoadBalancer Select DB
Article Exists
Parser Cache
Get Article from DB
Parse Content
Render Content
Missing Page
Y
Y
Y
N
N
Read Article
![Page 106: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/106.jpg)
Write/Edit Article
An editor saves an edited article during normal operation and the article is saved.
![Page 107: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/107.jpg)
Submit Logic
User Authorized
LoadBalancer Select DB
Article Edit
WriteConflictError Page
Create Edit Form
Render Content
Y
Y
Update Job
Write/Edit Article
![Page 108: Web Applications - Universität des Saarlandes · Web applications must to implement the semantic right GET retrieve a resource POST send data and/or create a resource PUT replace](https://reader033.vdocument.in/reader033/viewer/2022060308/5f0a2c837e708231d42a5e0e/html5/thumbnails/108.jpg)
Summary• Work incrementally
• Use different architectural views
• Start the design from the domain model and go up in the layers
• Use frameworks whenever possible
• Each design decision has a rationale (hoisting)