Web Applications

Mobile Web Applications

Prof. Dr. Ansgar Gerlicher and Dr. Thomas Fankhauser

Architecture for Web Sites

Sites are static or dynamic documents
Often a 1 or 2-tier architecture

center 100%

Architecture for Web Applications

Applications involve complex interactions
Often a 2-tier architecture

center 100%

HTTP Protocol

HTTP is a text based protocol (we can read and understand it)
The definition of HTTP 1.1 is defined in RFC2616
Requests and Responses are split into a header and a body

Request

GET / HTTP/1.1
Host: www.hdm-stuttgart.de

Response

HTTP/1.1 302 Found
Date: Tue, 05 Sep 2017 12:32:40 GMT
Server: Apache
Location: https://www.hdm-stuttgart.de/
Content-Length: 213
Content-Type: text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="https://www.hdm-stuttgart.de/">here</a>.</p>
</body></html>

Example: HTTP via Telnet

telnet www.hdm-stuttgart.de 80
Trying 141.62.1.59...
Connected to www.hdm-stuttgart.de.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.hdm-stuttgart.de

HTTP/1.1 302 Found
Date: Tue, 05 Sep 2017 12:32:40 GMT
Server: Apache
Location: https://www.hdm-stuttgart.de/
Content-Length: 213
Content-Type: text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="https://www.hdm-stuttgart.de/">here</a>.</p>
</body></html>
Connection closed by foreign host.

REST: Representational State Transfer

Specification on top of HTTP
Specified by Roy Fielding in his PhD Dissertation, 2000
Everything is a resource that has a current state
HTTP methods can be used to transfer resources between states
Resources are identified by their URL
Collections are in plural form: users, messages, notifications, …
Entities are specified by their collection and id: users/5, messages/y8hd7dg3, notifications, …

Resource	GET	PUT	PATCH	POST	DELETE
http://api.example.com/users	List all users	Replace all users	-	Create a new user	Delete all users
http://api.example.com/users/5	Retrieve user 5	Replace or create user 5	Update user 5	-	Delete user 5

Resource can also be nested, e.g. http://api.example.com/users/5/messages is the collection of messages for user 5

Example APIs

DOM: Document Object Model

Specified by W3C Document Object Model Core
Describes the elements of the document as objects
Objects have properties that can be read and set using JavaScript
Vanilla JS == JavaScript without a framework

Select Elements

> document.querySelectorAll("h1")
(1) [h1]

> document.querySelectorAll("h2")
(18) [h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2, h2]

Remove Elements

> document.querySelector("h1").remove();

Create and Add Elements

> var e = document.createElement("h1")
undefined

> document.body.prepend(e)
undefined

> e.innerText = "hello"
"hello"

Change Styling

> document.querySelector("h2").style.color = "blue";
undefined
> document.querySelector("h2").classList.add("blue");
undefined
> document.querySelector("h2").classList.remove("blue");
undefined

Frameworks

Backend: Languages, Frameworks
Frontend: React, Vue, Angular

Deployment

Services, Containers, Docker