Web Architecture

Web Architecture and Applications

Marco Monteiro
 WWW or Web 2

} WWW– World Wide Web, also know as “Web”

} Definition
} Philosophic (Tim Berners-Lee – web creator)
¨ “The World Wide Web is the universe of network-
accessible information, an embodiment of human
knowledge.”
} Technical:
¨ Set of resources and users of the Internet that use
the HyperText Transfer Protocol (HTTP) or HTTPS
 Web Architecture 3

} Web uses a Client-Server architecture

1 Client makes a request to the

server
[HTTP Request]

Server responds to the request

[HTTP Response] 2
 HTTP Protocol 4

} HTTP – Hypertext Transfer Protocol

} The HTTP, or secure alternative (HTTPS), is the
message protocol responsible for all Web interaction
} Client sends a HTTP request to the server
} After the server receives the HTTP request, it will send a
HTTP response
 HTTP Protocol 5

} Works in pairs of Request/Response

} Independent of the resource type
} Can transport HTML documents, images, CSS, Javascript, etc.
} Text based protocol
} Stateless
} The server does not retain information or state about each
user for the duration of multiple requests
} Each Request/Response pair is independent – after sending
a response to the client, the connection between the 2
(server and client) is terminated
 Resources 6

} Web servers provides resources to web clients.

Examples of resources types:
§ HTML documents
§ Images
§ CSS files
§ JavaScript files
§ Fonts
§ Data (XML; JSON; …)
§ ...

} Web clients (user agents a.k.a. browsers) consume

resources from servers, and display a representation of
the resources to the end user
 N:M Relation 7

} There is a N:M relation between web clients (user

agents a.k.a. browsers) and web servers
} A server provides resources to multiple clients
} A client consumes resources from multiple servers

Server 1 Client B Server 3 Client D

Client A Server 2 Client C

 N:M Relation 8

} One Web Page (what is presented to the end user) can

consume resources from multiple Web Servers.
Example:
§ HTML Document from 1 server
§ Images from multiple servers
§ CSS files from multiple servers
§ JavaScript files from multiple servers

} Web clients (user agents a.k.a. browsers), load resources

from multiple servers, processes them, and render the
content of the Web Page to the end user.
 9
Live Demo
• Analyze HTTP Requests and HTTP Responses
with Google Chrome & Postman
• http://<demourl>/simple.html
• http://<demourl>/oneimage.html
• http://<demourl>/img1.jpeg
• http://<demourl>/multipleimages.html
• http://<demourl>/multipleresources.html
• http://<demourl>/styles.css
• http://<demourl>/app.js
• http://<demourl>/multipleresources2.html
• http://somepage_from_somewhere
 Web Application 10

} What is a Web Application?

§ An application that is composed by a set of resources available
on the Web that work in a coherent and cohesive manner and
are accessed through a web client (browser)
} Main types of Web Applications:
§ Multi-page application
o Multiple web pages (HTML documents)
o The Web Server is responsible for creating the content (HTML document)
§ Single-page application (SPA)
o A single web page (HTML document)
o The content is created dynamically in the client (using JavaScript) within a
single web page.
o Instead of providing content, the server provides data to the client
 Web Application Development 11

} Typical components of a Web Application

(knowledge domain for a full-stack web developer)
§ On the server:
o Server-side programming language
• PHP; Java, C#, Python, Ruby, . . .
o Web-server framework
• PHP: Laravel, Zend, Symfony Java: Struts, JSF, Spring MVC
C#: ASP.Net MVC Python: Django Ruby: Ruby on Rails
o Relational database server
• MySQL; PostgreSQL, MsSQL, Oracle, MariaDB, . . .
o NoSQL databases: MongoDB, Redis, CouchDB, . . .
o Email server
o Queue server
o ...
 Web Application Development 12

} Typical components of a Web Application

(knowledge domain for a full-stack web developer)
§ On the client:
o Content specification: HTML
o Format and styling language: CSS
o CSS preprocessors: Sass, Less, Stylus, . . .
o Responsive CSS frameworks
o Tailwind, Bootstrap, Materialize, Bulma, . . .
o Client programming language: Javascript
• Languages that "compile" to JavaScript: TypeScript, CoffeeScript, . . .
o JavaScript frameworks
• Vue.JS, AngularJS, React, Alpine.js, Svelte, . . .
o ...
 Bibliography 13

} MDN Web Docs

} https://developer.mozilla.org/pt-PT/
} W3C (Web standards)
} http://www.w3.org/