web applications - universität des saarlandes · web applications must to implement the semantic...

108
Web Applications Software Engineering 2017 Alessio Gambi - Saarland University Based on the work of Cesare Pautasso, Christoph Dorn, Andrea Arcuri, and others

Upload: others

Post on 21-Jun-2020

1 views

Category:

Documents


0 download

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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

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

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

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
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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
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

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

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

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

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
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
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

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

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
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)