Introduction to web architectures
1. Client/service architecture
2. 3-tier web architecture
3. Web services evolution
4. SOA arquitecture
5. Relevant aspects in web architecture
6. Server-side development technologies
7. Client-side development technologies
8. Services required for web applications
2024, Mercedes Rodríguez
Intro to web architectures
Client-server paradigm
• Mainly, internet services (application layer) rely on client-
server paradigm:
– A model for network applications where processes in
different hosts play one of two different roles:
• a server process or server offers resources: is dedicated to
managing access to some resources (printer, files,…).
• client processes or clients requieres resources: access the server
to use these resources to complete a task.
• Clients and services communicate each other in a
conversational mode ruled by a particular protocol.
2
Intro to web architectures
Example of client-server paradigm: HTTP
Web service requires a conversation between a client (browser)
and a Web server via HTTP protocol.
3
Intro to web architectures
Example of client-server protocol: HTTP
• The HTTP client sends a request; the HTTP server accepts
requests to port 80; the server sends back a response.
• The service name: “World Wide Web” aka “web”.
• The client is known as “browser”:
– Mozilla Firefox, Google Chrome, Internet Explorer/Edge, …
• The server is a running application (daemon):
– Apache, nginx, IIS …
• Offered resources are web pages, either static or dynamic.
4
Intro to web architectures
3-tier web architectures
• Presentation layer (front-end)
– Runs on the client. It has an application interface.
– Consists on web pages (sytatic/dynamic): HTML, CSS, JavaScript, ...
– Lately, there are client-side frameworks, like Angular, React, Vue.
• Business logic/service layer (middle and back-end)
– Usually runs on the server but can be partly distributed to the client.
– Comprises the business rules to be enforced in the programming (eg. a
worker must be at least 16-year old).
• Persistence layer
– Runs on the server.
– Responsible for storing the information that must be saved in the
system.
– Database management system, XML files, ...
5
Intro to web architectures
Web services evolution
• Web 1.0
– 1991, Tim Berners-Lee, CERN
– 1st web server (httpd), HTTP 1.0
– Static contents, HTML pages
• Web 1.5
– 1st dynamic web apps that interact with DBMS
• Web 2.0, “the Social Web”
– Total interaction with the user, supports blogs, social networks
– CSS (Cascade Style Sheets)
– JSON (JavaScript Object Notation)
• Lightweight format for storing and transporting data, often used when data is sent from a server to a
web page.
– AJAX (Asynchronous JavaScript And XML)
• Web pages updated asynchronously by exchanging data with a web server behind the scenes. It is
possible to update parts of a web page, without reloading the whole page.
• Web 3.0, “semantic web”, big leap to AI
– W3.CSS, modern CSS framework with built-in responsiveness
– Multimedia web, web3D (CSS3, HTML5,…)
• Web 4.0, “Intelligent or Symbiotic Web,” next
– Cutting-edge technologies: AI, ML (Machine Learning), IoT, XR (VR, MR, AR,…), and blockchain
6
Intro to web architectures
SOA, service-oriented architectures
• SOA-based applications:
– SOA breaks large, complex enterprise applications into small, flexible components:
• Multiple distributed multi-tier applications that have presentation, business logic and persistence
layers.
– Services are the building blocks, reusable between different enterprise apps:
• Services typically use standard interfaces (i.e. web services), e.g. REST (
• Every service embodies the code and data required to execute a complete, discrete business
function. (e.g. signing into a website, calculating a monthly loan payment or checking a
customer’s credit).
– Implemented in cloud environments. .
• SOA uses the find-bind-execute paradigm:
– Service providers register their service in a public
registry.
– Consumers use the registry to find services.
– If the registry has such a service, it provides the
consumer with a contract and an endpoint
address for that service.
7
Intro to web architectures
RESTful API
• What is a REST API? It provides a flexible, lightweight way to integrate
applications and to connect components in microservices. It makes the
communication process with the server easier for us by giving us various HTTP
request methods.
• Most commonly used methods:
• GET: The get method is used to Read data on the server.
• POST: The post method is used to Create data.
• PATCH/PUT: The patch method is used to Update data.
• DELETE: The delete method is used to Delete data.
• These methods allow CRUD operations easily:
Create => POST
Read => GET
Update => PATCH/PUT
Delete => DELETE
• So, if we are to make a request to a server to retrieve data, we are going to
make a GET request to an endpoint/resource provided by the server. The
endpoint is similar to a URL.
• If the request made is OK, then the server will respond with the data
requested and a status code where 200 is OK and 400 is a client error.
8
Intro to web architectures
Relevant aspects in web architecture
• Bandwidth
– Volume of information that can be sent over a connection in a measured
amount of time (Mbps)
• Server computing capacity/scalability
– Speed of operations
– Ability to handle an increase in users and workload, without perfomance
disruption
• Storage
– Local data/DBMS/big data
– Structured/unstructured data storage
– Storage arrays/server-based arrays
• Information
– Static/dynamic/interactive
• Infraestructura: encompasses all previous
– high availability, remote backup, node redundancy against H/W+S/W failures,
cloud
• Development tecnology
– Server based/client based
9
Intro to web architectures
Server-side development technologies
• https://developer.mozilla.org/en-US/docs/Learn/Server-
side/First_steps/Introduction
• CGI (Common Gateway Interface) (deprecated)
– Standard way for the web server to interface with CGI scripts
• Programming languagues
– Java, PHP, Python,…
– JSP (JavaServer Pages): Java
– Back-end frameworks
• Ms ASP.NET (Active Server Pages): C#
• Servlets
• Spring, Symphony, Rubi,…
• DBMS
– SQL
• MySQL, PostgreSQL, Microsoft Access, SQL Server, Oracle,…
– NoSQL
• MongoDB, Hbase, Cassandra, Neo4J
• Persistence frameworks
– Hibernate (ORM, Object Relational Mapping): objects to relational tables
10
Intro to web architectures
Client-side development technologies
• Displaying
– HTML, CSS,…
– Front-end frameworks
• JSF (JavaServer Faces)
• Bootstrap
• Programming
– Javascript, Ms VBScript (old),…
– Front-end frameworks
• jQuery, Angular,…
• Information storage/transfer languages
– XML, JSON
11
Intro to web architectures
Services required for web applications
• Web servers / web apps servers
• DNS
• FTP
• LDAP
• SSH
• DHCP
12
Credits
• Image: https://hackernoon.com/http-made-easy-understanding-the-web-client-server-communication-
yz783vg3
• Three-tier architecture https //www.ibm.com/cloud/learn/three-tier-architecture
• Service-Oriented Architecture (SOA):
• https://www.oracle.com/technical-resources/articles/javase/soa.html
• https://www.ibm.com/cloud/blog/soa-vs-microservices
• HTTP 1.0: https://datatracker.ietf.org/doc/html/rfc1945
• W3C: https://www.w3.org/
• Client-Side Development Technologies
https://docs.oracle.com/cd/E13218_01/wlp/docs102/clientdev/ria.html
• Web Application Development with JSP and XML Part I: Fast Track JSP
https://www.oracle.com/technical-resources/articles/javase/webappdev.html
• What is JSON? https://www.w3schools.com/whatis/whatis_json.asp
• What is AJAX? https://www.w3schools.com/whatis/whatis_ajax.asp
• What is W3.CSS? https://www.w3schools.com/whatis/whatis_w3css.asp
• Kubernetes vs. Docker: https://azure.microsoft.com/en-us/topic/kubernetes-vs-docker/
• DBMS vs RDBMS vs NoSQL: https://www.besanttechnologies.com/dbms-vs-rdbms-vs-nosql
• Videos
• Another sight on n-tier architecture “n-tier architecture for kids”: https://youtu.be/8gfTBQhh1kM
• What is a Database Management System: https://youtu.be/FR4QIeZaPeM
• What is .NET? https://youtu.be/eIHKZfgddLM
13
