Department of Computer Science Institute for System Architecture, Chair for Computer Networks

Basic aspects of
Web Applications
 Introduction

1. Request/send data
Logic
Presentation
2. Process
Logic Hypertext Transfer
request / sent
Protocol
data
Data
Data
Client side 3. Delivery data
(Web browser) Server side

Means for providing Transfer efficiency? Efficiency?

modern User Protocol features? Integration of existing
Interfaces apart from Functional range? logic?
form-based UIs with Simplicity of application
rich media and development?
comfortable user
interaction?

slide 2
REST model

The Representational State Transfer (REST) is a model for

distributed hypermedia systems that predominantly fits to
applications in the World Wide Web
It is based on a client/server architecture with a stateless
communication protocol
Every message contains all necessary context information
thus neither the server nor the client has to store context
data
In contrast to Remote Procedure Call (RPC) requests in a
REST system are not directed to procedures but to
resources (documents) using a generic interface with
standard semantics
Every resource has to be available through a unique identifier

Client 1. GET document Server with

REST
3. Manipulate
2. interface
document

4. PUT document

slide 3
Outline

The lecture presents selected principles and technologies

of Web applications:
Evolution of web technology
Short survey of technology evolution
Server-side aspects
Architecture of a web server
Communication aspects
HTTP Communication details
Aspects of HTTP 1.1
HTTP/2
Client-side aspects
Web browser architecture
Overview and selected features of HTML 5

slide 4
 Development

Client tier

Presentation Engine Presentation Engine Presentation Engine Presentation Engine

Presentation logic Presentation logic Presentation logic Presentation logic

Business logic Business logic

HTTP 1.0 HTTP 1.1 HTTP 1.1 HTTP 1.1

Presentation logic Presentation logic

Business logic Business logic Business logic

Data Data Data Data

Server tier

Classical Web Current Web

applications applications
slide 5
Web server architecture

A web server is a software that makes resources available

through an interface that is accessible by HTTP
Web servers that deliver static content only have to extract
a requested document from the file system and pass it to
the web browser

1. Request for document 2. Request for document

Web
Browser server File system
4. Delivery of document 3. Delivery of document

Due to the need for low latency time and to handle high load
current web servers are structured in a hierarchical way that
allows parallel request processing

slide 6
 Web server architecture

Web browser
On start-up the web server creates a
2 pool of entities for client handling and
1
opens an interface for incoming
Web server 1 connection requests

Connector Web browser initiates communication on

entity 2 the basis of TCP through this interface
which is handled by a connector entity
3 5
The connector entity creates a client
Delegation 3 descriptor which is the endpoint of a
process communication path to the client and
passes it to the delegation process
4
The delegation process chooses an
1
available pregenerated processing
Processing Processing Processing 4
entity and forwards the client
entity entity entity descriptor to it

Communication with the web browser

5
is finally realized through HTTP
Processing pool

Client descriptor slide 7

 Server-side logic

Web applications are based on dynamic content which is

generated by application logic based on e.g.:
Common Gateway Interface (CGI) Scripts
Java Servlet Container
Application Server that provides further services such as
transaction, security or directory services and thus
enables development of complex logic

Application engine
Request for processing
Web Processing Application logic
browser entity Generated Content
(X)HTML engine
(X)HTML
template
The application engine may use an (X)HTML engine to
combine dynamic content with (X)HTML templates to
generate resulting documents that finally are delivered to
the web browser
slide 8
 Web browser architecture

Early web browsers only requested documents and

presented them after a rendering process to the user
Today web browsers are extended by further technologies
as especially XML support, script engines and plug-in
engines

Web browser reference architecture

User interface

Data
Browser engine persistence

Rendering engine

Display
Networking XML parser Script engine Plug-in engine
Backend

slide 9
Web browser architecture

User interface: Front-end for displaying a page to the user

Browser engine: Embedded component that provides a high
level interface for querying and using the rendering engine
Rendering engine: Performs parsing and layout for (X)HTML
documents enriched with other languages such as CSS
Networking: Realises HTTP communication with the server
XML parser: Parses XML content
Script engine: Executes scripts embedded in (X)HTML pages
Display backend: Provides drawing and windowing
primitives, user interface widgets and fonts (e.g. GNU Image
Manipulation Program Toolkit (GTK+))
Data persistence: Stores associated data (cached pages,
cookies etc.)
Plug-in engine: Dynamic extension point for plug-ins e.g. an
Web feed reader plug-in
Further subsystems such as e.g. an integrated Extensible
Stylesheet Transformation (XSLT) processor are not shown

slide 10
 HTTP

The Hypertext Transfer Protocol (version 1.1 RFCs 7230-7235)

realises communication on top of TCP by the exchange of messages
in a request-response manner
Every message is divided into a header and a body

HTTP Header Divided into several

sub-headers
HTTP Body

The header specifies the operation that should be performed on the

addressed resource and includes parameters (passed as key-value
pairs)
Resources are addressed by the request through Uniform Resource
Identifiers (URI) which in this context are simple strings that identify
a resource via name, location or any other characteristic:
Request-URI = "*" | absolute URI | absolute Path

Used if no resource is Absolute path to the

Path to the resource on the server
associated with the resource on the server
combined with the server address
request e.g. /index.html
e.g. http://www.serv.com/index.html

slide 11
 HTTP 1.1

In contrast to version 1.0 default behaviour of HTTP 1.1 defines

establishment of a persistent connection (connection: keep-alive)
that makes communication more efficient
HTTP 1.0 HTTP 1.1
Establish TCP connection Establish TCP connection

Close TCP connection

Establish TCP connection

...

Close TCP connection Close TCP connection

...

Web browser Web server Web browser Web server

slide 12
 HTTP 1.1 pipelining C S
Establish TCP connection
Pipelining is a technique that Req 1
makes it possible to send
Req 2
further requests to the server Resp. 1
without the need to wait for Req 3 Resp. 2
the response of previous
requests Resp. 3

Responses are transmitted in

the order in which the
associated requests were sent Close TCP connection
Not supported by all common
browsers

HTTP/1.0 HTTP/1.1 HTTP/1.1

Persistent Pipeline
Multiple HTTP
Packets from client to server 226 70 25 messages
can be sent
Packets from server to client 271 153 58
with the
Total number of packets 497 223 83 same TCP
segment
Taken from http://www.w3.org/Protocols/HTTP/Performance/Pipeline.html
slide 13
 HTTP 1.1 request message

Specifies the method to be performed, the

Request Line associated web resource and the HTTP version
Example: GET /news/index.html HTTP/1.1

Gives general information such as the type of

General Header connection (e.g. close, keep-alive) or the date of
request generation

Order of Allows to pass information about the request and

header about the client to the server such as e.g. the
content Request Header
accepted content encoding
elements is
irrelevant
Delivers meta information about the body content
Entity Header (if available) such as e.g. the content length

CRLF Content is separated by new line (CRLF)

Represents the content (if available) of the

Message body request such as e.g. parameters passed to the
server

slide 14
 HTTP 1.1 response message

Specifies the HTTP protocol version and a status

Status Line code of request processing in numeric and textual
representation; Example: HTTP/1.1 200 OK

Gives general information such as the type of

General Header connection (e.g. close, keep-alive) or the date of
response generation

Order of Provides additional information about the

header response such as e.g. product data of the web
content Response Header
server that produced the response
elements is
irrelevant
Delivers meta information about the body content
Entity Header such as e.g. the content length

CRLF Content is separated by new line (CRLF)

Represents the content (e.g. HTML-data of a

Message body requested web page)

slide 15
HTTP 1.1 methods

Methods specify the resource by passing its absolute or relative

Uniform Resource Identifier (URI)
If no resource is needed an asterisk is passed
HTTP 1.1 defines an expandable set of methods:

GET Requests for delivery of the specified resource

HEAD Identical to GET except the message body of the response is empty
thus the client only receives meta information of the header; can e.g.
be used to determine the type of a file or its length without the need
to receive the file
POST Submits the message body content to the specified resource
PUT* Instructs the server to make the passed content available under the
specified URL
DELETE* Deletes the specified resource
OPTIONS* Requests communication options from server such as e.g. the methods
that are supported by the server
TRACE* Echoes back the send request; can be used for diagnostic purposes
CONNECT* Reserved name for use by proxy servers

* Not defined by HTTP 1.0 slide 16

 HTTP 1.1 status codes

Numeric representation of status codes consists out of a

three digit value
The first digit describes the category of the status

Code Status category Description Example : Explanation

1xx Informational Request received, continuing 100 : Client should continue
processing sending the request (e.g.
extensive request)
2xx Success The action was successfully 200 : Request has
received, understood and accepted succeeded
3xx Redirection Further action must be taken in 301 : Requested resource
order to complete the request has been moved
permanently to new URI
4xx Client error The request contains bad syntax or 404 : Server has not found
(Request error) cannot be fulfilled anything matching the
Request-URI
5xx Server error The server failed to fulfil an 501 : Server does not
apparently valid request support the functionality
required to fulfil the request

slide 17
 HTTP 1.1 communication details

Web Web
browser server
HEAD /folder/indx.html HTTP/1.1\r\n
Required if Host: www.webmailer.ws\r\n
resource is Connection: close\r\n
specified by Accept-Encoding: gzip\r\n
absolute path Accept: text/xml,application/xml,text/html,*/*\r\n
Accept-Language: en-gb\r\n
Content User-Agent: Mozilla\r\n
compressed \r\n
by the gzip
algorithm is
HTTP Status Code: HTTP/1.1 404 Not Found\r\n
accepted
Server: Apache (Unix) PHP\r\n
Content-Type: text/html\r\n
Content-Length: 0\r\n
Date: Fri, 12 Jan 14:25:15 GMT\r\n
Connection: close\r\n
\r\n

slide 18
 HTTP 1.1 communication details

Web POST /cgi/login HTTP/1.1\r\n Web

browser Host: www.webmailer.ws\r\n server
Connection: Keep-Alive\r\n
Accept-Encoding: gzip\r\n
Accept: text/xml,application/xml,text/html,*/*\r\n
Accept-Language: en-gb\r\n
User-Agent: Mozilla\r\n
Content-type: application/x-www-form-urlencoded\r\n
HTML form Content-length: 41 \r\n
input is \r\n
transmitted login=me@webmailer.ws&password=pass123
inside the
message body HTTP/1.1 200 OK\r\n
Date: Fri, 12 Jan 12:26:16 GMT\r\n
Server: Apache (Unix) PHP\r\n
Last-Modified: Wed, 26 Oct 14:38:41 GMT\r\n
Content-Encoding: gzip\r\n
Content-Length: 1922\r\n
Content-Type: text/html\r\n
Keep-Alive: timeout=5, max=1024\r\n
Connection: Keep-Alive\r\n
\r\n
...........}yw......9....n.....5.{d[I.z.....{{|..X..K...
..)...o. )..dmv...K(..`.......O.
...
Gzip encoded slide 19
HTML content
 HTTP download of associated resources

Web browser
Web
<html> server
<head>
<title>Example.com</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src="banner.jpg" />
<h1 class="center">Welcome!</h1>
<br/>
... 2 1

1
After receiving the
document it is
analyzed for css
2
associated resources
that have to be
downloaded for jpg
presentation purpose
slide 20
 HTTP user agent detection

Web Server
POST /cgi/login HTTP/1.1\r\n
// Excerpt from server-side code
User-Agent: Android


String userAgent = request.getUserAgent();
if(userAgent.contains(Android"))
Web pageType = HTML;
Browser else if(userAgent.contains("240x320"))
pageType = 240_320_ADAPTED;
else
Web Page pageType = XHTML;

return pageType;

HTTP header information makes adaptation of delivered content to the

needs of user agents possible
Example for user-agent strings:
Mozilla (compatible; MSIE; Windows; .NET CLR; .NET CLR)
Mozilla [en] (Android)
Mozilla (compatible; MSIE; Windows Mobile; PPC; 240x320)
Analogous with e.g. content language adaptation (Accept-Language)

slide 21
 Session handling

A session context establishes a state for Web applications

During a session the browser can store information about a
user in a special data structure
For identification purpose the web server sends a session id
to the web browser which is included into later requests thus
allowing the server to associate the right session data
structure with the originator of a request
Famous technique for session id exchange is the use of
cookies which are small pieces of data stored on client-side

Session data structure on web server Browsers data persistence layer

sid: 1f2e22f467ab1
login:me@webmailer.ws
logintime:12:45p.m.
sid: 3134feabfe123
login:herb@webmailer.ws
logintime:10:45p.m.
sid:1f2e22f467ab1
Cookie-name1
Source:webmailer.ws
sid:65136536fcea2
Cookie-name2
Source:example.com

slide 22
 HTTP/2

HTTP 1.1 has been optimized for simplicity and for applicability to a wide
range of use cases
Though the performance has been improved by HTTP 1.1, the protocol
has not been optimized for performance
Goal of HTTP/2: Provide an optimized transport for HTTP semantics using
multiplexing and header compression
HTTP methods, status codes and semantics are not modified by HTTP/2
Has been approved by the steering group of the IETF for publication as
standards-track RFCs in February 2015
channel
TCP connection

Message 1 Message 2 Message 2 Message 1

DATA (Body) DATA (Body) HEADER HEADER

Two HTTP messages have been split into a sequence of four

Server interleaved frames Client
Frames are embedded into a channel and may be prioritized
enabling faster delivery of selected frames
Per TCP connection several parallel channels can be
established slide 23
HTTP/2 will be further discussed in the exercise
HTML5 - Overview

HTML5, being still in the standardization process, is intended

to be the next generation of HTML addressing current Web
applications requirements
Enables mobile and desktop Web site designers to deliver
the advantages of client-side and server-side development
to their users simultaneously
Proposed standard of HTML5 aggregates several previously
separated developments
Enhanced Web document structure
with new HTML elements and
Enhanced HTML attributes

~= + Improved text and object styling and

improved animation effects via CSS 3
Cascading Style Sheets
+ Standardization of partially existing
APIs and introduction of new APIs:
JavaScript APIs e.g. Web storage for storing data on
client-side, Web Workers for
parallelizing tasks, JavaScript
Geolocation API for locating a user
slide 24
 HTML5 - Document structure
HTML5 introduces several important structural elements used for
grouping (not for positioning for this purpose CSS is applied):

Website <header>: group of introductory

or navigational aids
<header>
<section>: generic document or
application section - used for
<section> grouping purposes

<header> <article>: independent piece of

content of a document, such as blog
entry or news article
<article>
<nav> <aside> <footer>: represents a footer for
the section or the page containing
<footer> information e.g. about the author or
copyright information

<section> <nav>: section of navigation

<aside>: represents content that

is only slightly related to the rest of
<footer> the page (e.g. a list of links to
external Web resources)
slide 25
 HTML5 - Audio and Video support
HTML5 introduces built-in media support via the <audio> and <video>
elements in addition to well-defined JavaScript APIs for media control

Document type of <!doctype html>

HTML5 pages is <html>
specified as html
<button onclick="playPause()">Play/Pause</button>
Alternative video <br />
formats can be <video id="video1" width="320" height="240">
provided <source src="lecture.mp4" type="video/mp4" />
<source src="lecture.ogg" type="video/ogg" />
specifies text tracks
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"/>
e.g. in the form of <track src="subtitles_de.vtt" kind="subtitles" srclang="de"/>
subtitles </video>
Implementation of <script type="text/javascript">
var myVideo=document.getElementById("video1");
start/stop video
function playPause(){
control functionality if (myVideo.paused)
myVideo.play();
Example subtitles else
WEBVTT myVideo.pause();
}
00:11.000 --> 00:13.000 </script>
Overview of HTML5 </html>
00:13.000 --> 00:16.000 Web VTT (Web Video Text Tracks) format: slide 26
HTML5 document structure
http://dev.w3.org/html5/webvtt
 HTML5 - Web Workers
Web Worker = JavaScript that runs in the background, independently of
further user interface (UI) scripts thus allowing parallel processing
Important for performing computationally expensive tasks without
interrupting the UI
Interaction between Web Workers and UI thread is event-based

Creates and starts new Web Website

Worker executing the code in
the file counter_code.js JavaScript fragment
presented below 1
var worker = new Worker("counter_code.js");
worker.onmessage=function(event){
Event-handler onmessage is
document.getElementById("result")
executed and thus the value
.innerHTML=event.data;};
of the counter variable is
3
displayed within the Website

Web Worker Sends a message back to the Website

JavaScript fragment (counter_code.js) that initialized the Web Worker
var i=0; containing the value of the variable "i"
function timedCount(){ (messages from the Website to the
i=i+1; 2 Web Worker can be sent in the same
postMessage(i); manner: worker.postMessage(value))
setTimeout("timedCount()",500);
}
slide 27
timedCount();
 HTML5 - Storage
HTML5 offers three different means for storing data on client side: Web
Storage, Indexed Database API, Web SQL Database
All of them apply the "same-origin-policy": script can only access data that
a script from the same source (identified by protocol+hostname+port) has
stored
simple key/value persistence system
Advantage: Very simple API, supported by most browsers
Web Storage Disadvantage: only for simple use cases:
does not offer any query languages, no
schemas, no transactional safety

API that allows to operate on a set of indexable object stores

Indexed persisted in a client's web browser environment
Database API Advantage:simplifies the programming model for interacting with
databases though offering a powerful persistence layer
Disadvantage: Not implemented in all browsers yet

simplified SQL implementation embedded into the browser

Web SQL Advantage: Efficient and feature-rich SQL implementation (including
joins, inner selects etc.)
Database Disadvantage: Specification effort has been stopped by World Wide
Web Consortium due to lack of implementation
slide 28
 HTML5 - Web Storage
A key-value pair storage framework that provides behavior similar
to cookies but with larger storage capacity and improved API
Access is realized via getter and setter methods
Two scopes of storage are available:
Session: valid as long as top-level browsing context (=usually
window or tab of browser) is active
Browser tab 1
JavaScript fragment store Session
sessionStorage Storage
.setItem('myKey', 'myValue');

Browser tab 2 load

JavaScript fragment
var myVar = sessionStorage
.getItem('myKey');

Local: no temporal restrictions, data can be accessed from

different windows or tabs of browser
Via removeItem('itemKey') a single item with key 'itemKey' can
be removed and via clear() all stored items can be removed
slide 29
 HTML5 - Web Storage
Storage Browser tab 2
JavaScript fragment
Event var myVar = localStorage
Browser tab 1 .getItem('myKey');
JavaScript fragment
localStorage
.setItem('myKey', 'myValue'); Browser tab 3
JavaScript fragment
var myVar = localStorage
.getItem('myKey');

Data in localStorage can be accessed from different browser

windows/tabs
As soon as data in localStorage is modified, a storage event is
propagated and can be handeled via registered event listeners
Event name for which listener is registered

window.addEventListener('storage',
function(event) {
console.log('Value for ' + event.key + ' was changed from'
+ event.oldValue + ' to ' + event.newValue);
});
slide 30
function is called if storage event appears
 HTML5 - Indexed Database API
Indexed Database API (IndexedDB) is an API for client-side storage
of significant amounts of structured data and for high
performance searches on this data using keys, indexes or cursors
Database operation result in DOM event that has to be handeled

var request = window.indexedDB.open("BookDB"); Open a database with name

request.onsuccess = function(event){ "BookDB" if the method call
1 var database = event.result; is successful, the onsuccess
write("Database Opened", database); event handler is executed
};

Object store named

objectStore = database.createObjectStore "BookList" with index
2
("BookList", "id"); named "id" is created in the
database

Stores the value of the variable

var book = {"bookName" : " Web Applications",
"price" : 20, "rating":"excellent"};
3 var request = objectStore.add(book);
request.onsuccess = function(event){
document.write("Saved using id ", event.result)
var key = event.result; };
"book" in the created object
store if this step is
successful, the onsuccess event
handler is executed and the
key of the object can be read

Realization of key-, index- and cursor-based access to the database slide 31

will be discussed in the exercise

Conclusion
Web browser

JavaScript Web server

engine
Establish TCP connection Connector
entity
Client
handling is
HTML 5
delegated to
parser
GET XHTML document

Rendering HTTP Header

engine HTTP Body
Server
Processing side
Browser entity logic
GET associated CSS file
engine
HTTP Header
Web HTTP Body
storage

Close TCP connection Processing Processing

entity entity

slide 32
 References

HTML5 http://www.w3.org/TR/html5/
Working Draft

HTML5 demos http://html5demos.com/

and examples

RFCs:
HTTP 1.0 spec. http://tools.ietf.org/html/rfc1945
HTTP 1.1 spec. (besides further RFCs)
http://tools.ietf.org/html/rfc7230
http://tools.ietf.org/html/rfc7231

Details about the REST architecture:

REST http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

HTTP/2 spec. http://tools.ietf.org/html/draft-ietf-httpbis-http2-17

slide 33