Unit 2 – Web Architecture

What is Web Architecture?

Web Architecture refers to the conceptual framework and structural design of a
web-based system. It outlines the components, interactions, and organization
required for delivering content and services over the internet. It includes the
protocols, tools, and systems that enable communication between clients (e.g.,
browsers, apps) and servers.

Web Browser –
A web browser is a software application that allows users to access, retrieve, and
interact with information on the World Wide Web. It is a client-side application
that translates web content (HTML, CSS, JavaScript) from web servers into a
visual and interactive format for users.
 • Key Functions of a Web Browser
1. Fetching Resources:
1. Uses URLs to request web resources from servers using the HTTP/HTTPS
protocol.
2. Rendering Web Pages:
1. Interprets HTML, CSS, and JavaScript to display web pages.
3. User Interaction:
1. Allows users to navigate, interact with web forms, download files, and run
web-based applications.
4. Security:
1. Implements measures like sandboxing, SSL/TLS encryption, and anti-phishing
to protect users.
5. Extensions and Plugins:
1. Supports additional functionality through browser extensions (e.g., ad
blockers, password managers).
 • Components of a Web Browser
1. User Interface (UI):
1. Visible components for user interaction, including:
1. Address bar (URL input).
2. Back, forward, refresh, and home buttons.
3. Tabs for managing multiple pages.
4. Bookmarks and settings menu.
2. Browser Engine:
1. Mediates communication between the UI and the rendering engine.

3. Rendering Engine:
1. Renders HTML, CSS, and JavaScript into interactive web pages.
2. Examples:
1. Blink (used in Chrome, Edge).
2. Gecko (used in Firefox).
3. WebKit (used in Safari).
 4) Networking Component:
•Handles network requests (HTTP/HTTPS, caching, cookies).

5) JavaScript Engine:
•Executes JavaScript code to enable dynamic web content.
•Examples:
•V8 (used in Chrome, Edge).
•SpiderMonkey (used in Firefox).

6) Data Storage:
•Stores data like cookies, session storage, and cache for faster loading and offline
functionality.

7)Security Module:
•Protects against malicious sites, phishing, and unauthorized data access.
 How a Web Browser Works
1.User Inputs URL:
•The user types a URL (e.g., www.example.com) into the address bar.
2.DNS Resolution:
•The browser converts the domain name into an IP address using a DNS server.
3.HTTP/HTTPS Request:
•The browser sends a request to the server hosting the website.
4.Server Response:
•The server sends back the requested resources (HTML, CSS, JavaScript, images).
5.Rendering:
•The browser parses and renders the resources into a visible web page.
6.JavaScript Execution:
•The browser's JavaScript engine executes any dynamic scripts.
7.User Interaction:
•The browser responds to user inputs like clicks, form submissions, or scrolling.
 • Popular Web Browsers
1. Google Chrome:
1. Rendering Engine: Blink.
2. Known for speed, simplicity, and extensive extension library.
2. Mozilla Firefox:
1. Rendering Engine: Gecko.
2. Focused on privacy and open-source principles.
3. Apple Safari:
1. Rendering Engine: WebKit.
2. Optimized for macOS and iOS devices.
4. Microsoft Edge:
1. Rendering Engine: Blink (Chromium-based).
2. Integrated with Windows ecosystem.
5. Opera:
1. Rendering Engine: Blink.
2. Features like built-in VPN and ad blocker.
6. Brave:
1. Rendering Engine: Blink.
2. Focused on privacy with built-in ad blocking
 • Key Features of Modern Web Browsers
1. Tab Management:
1. Multiple web pages can be opened in tabs.
2. Private Browsing:
1. Does not save browsing history, cookies, or cache (e.g., Incognito mode).
3. Extensions and Add-ons:
1. Enhance browser functionality with tools like password managers, ad blockers.
4. Bookmarks and History:
1. Save frequently visited sites and track past browsing.
5. Syncing Across Devices:
1. Sync bookmarks, history, and passwords between devices using a user account.
6. Developer Tools:
1. Built-in tools for debugging and testing websites.
 • Security Features in Browsers
1. HTTPS Support:
1. Encrypts data using SSL/TLS(Secure Sockets Layer, and TLS stands for
Transport Layer Security).
2. Sandboxing:
1. Isolates web pages to prevent unauthorized access to the system.
3. Popup Blockers:
1. Prevents malicious pop-ups.
4. Phishing and Malware Protection:
1. Alerts users to unsafe websites.
5. Content Security Policy (CSP):
1. Prevents Cross-Site Scripting (XSS) and data injection attacks.
 • Common Issues and Solutions
1. Slow Loading Pages:
1. Solution: Clear cache, disable unnecessary extensions, or check internet
speed.
2. Broken Website Layouts:
1. Solution: Update the browser or clear cookies and cache.
3. Security Warnings:
1. Solution: Avoid unsafe sites and ensure HTTPS is used.
4. High Memory Usage:
1. Solution: Close unused tabs or disable resource-intensive extensions.
 Web Server -
• A web server is a software or hardware system designed to host websites and
web applications by handling and responding to HTTP (or HTTPS) requests from
clients, such as web browsers or other devices.

• Key Functions of a Web Server:

1. Receiving Client Requests:
1. A web server listens for requests from clients over the network using HTTP or
HTTPS protocols.
2. Serving Content:
1. It retrieves and serves static content (e.g., HTML, CSS, JavaScript files, and
images) directly from its file system.
2. For dynamic content, it interacts with backend application servers, scripts, or
databases to generate and serve responses.
3. Managing Connections:
1. It handles multiple concurrent client connections efficiently using threading,
process pools, or event-driven architectures.
4.Enforcing Security:
2. Implements HTTPS for secure communication.
3. May include features such as authentication, access control, and protection
against cyber threats like DDoS attacks.
5.Error Handling:
4. Returns appropriate HTTP status codes (e.g., 404 for Not Found, 500 for
Server Error) along with error pages when something goes wrong.
 •Interact with application servers or scripts to generate content dynamically before sending
it to the client.
•Example: LAMP stack (Linux, Apache, MySQL, PHP).

• Common Web Servers:

• Apache HTTP Server:
• A widely-used, flexible, and customizable open-source web server.
• Nginx:
• Known for high performance, scalability, and use as a reverse proxy and load balancer.
• Microsoft Internet Information Services (IIS):
• A web server integrated with Windows operating systems.
• LiteSpeed:
• Offers high speed and resource efficiency.
• Caddy:
• Simple to set up with built-in HTTPS support.
 How Web Servers Work:
.Client Sends a Request:
•A web browser sends an HTTP request to the server (e.g., requesting
https://example.com/index.html).
.Web Server Processes the Request:
•Locates the requested resource or forwards the request to an application server.
.Response is Sent Back:
•Returns the requested resource (e.g., the index.html file) or dynamically generated content.
.Browser Renders the Response:
•The client processes the response and displays it to the user.
 •Looks up the requested file (for static content) or communicates with an application
server for dynamic content.
•Sends an HTTP response back to the browser, including the content.
4.The browser renders the response.

• Real-World Usage:
• Web servers are essential for hosting websites, APIs, and web applications. They are also
used in:
• Reverse Proxying: Forwarding requests to backend servers for load balancing.
• Content Delivery Networks (CDNs): Distributing web content across multiple servers
globally.
• Microservices: Acting as a gateway in service-oriented architectures.
• Web servers form the backbone of the internet, enabling seamless communication
between users and web applications.
 HTTP Protocol -
• The HTTP protocol (HyperText Transfer Protocol) is the foundation of
communication on the World Wide Web. It defines how messages are formatted,
transmitted, and understood between clients (such as web browsers) and servers.
It plays a central role in web architecture by enabling the exchange of information
in a request-response model.

• Key Features of HTTP Protocol:

1. Request-Response Model:
1. A client sends a request to the server, and the server responds with the
requested resource or an error message.
2. Stateless Protocol:
1. Each HTTP request is independent, and the server does not retain any state
information about previous requests.
1. Application Layer Protocol:
1. Operates at the application layer of the OSI model, enabling communication
between web applications.
2. Text-Based Communication:
1. HTTP messages are plain text, making them human-readable and easy to
debug.
• HTTP Request-Response Cycle:
1. Client Request:
2. A client (e.g., browser) sends an HTTP request to the server.

Eg.
• GET /index.html HTTP/1.1
• Host: www.example.com
2) Server Response:
• The server processes the request and sends back an HTTP response.
• Eg.
• HTTP/1.1 200 OK
• Content-Type: text/html
• Content-Length: 1234

• <html>...</html>
• Components of HTTP:
1) HTTP Request:
• Method: Specifies the type of action (e.g., GET, POST, PUT, DELETE).
• URL/Path: Identifies the resource being requested.
• Headers: Provide metadata (e.g., content type, authorization, cookies).
• Body: Contains data for methods like POST or PUT.

2) HTTP Response:
• Status Code: Indicates the result of the request (e.g., 200 OK, 404 Not Found).
• Headers: Provide metadata about the response (e.g., content type, cache
control).
• Body: Contains the resource data (e.g., HTML, JSON, or image).
 • HTTP Methods:
1. GET:
1. Requests data from the server.
2. Example: Fetching a web page.
2. POST:
1. Sends data to the server to create a resource.
2. Example: Submitting a form.
3. PUT:
1. Updates or creates a resource on the server.
2. Example: Updating a user profile.
4. DELETE:
• Deletes a resource from the server.
• Example: Removing an item from a cart.
5. HEAD:
1. Similar to GET but retrieves only headers without the body.
2. Useful for checking resource existence or metadata.
6. OPTIONS:
3. Retrieves the HTTP methods supported by the server for a specific resource.
7. PATCH:
4. Partially updates a resource.
 • HTTP Versions:
1. HTTP/1.0:
1. Simple and stateless.
2. Each request opens a new connection.
2. HTTP/1.1:
1. Introduced persistent connections (reuse of TCP connections).
2. Added chunked transfer encoding and improved caching.
3. HTTP/2:
1. Supports multiplexing (multiple requests on a single connection).
2. Improves performance with header compression and server push.
4. HTTP/3:
1. Built on QUIC (UDP-based) for faster and more reliable connections.
2. Reduces latency and enhances security.
 • Role in Web Architecture:
1. Communication Backbone:
1. Facilitates the exchange of data between clients and servers.
2. Scalability and Flexibility:
1. Works seamlessly with modern technologies like RESTful APIs and
microservices.
3. Interoperability:
1. Universal protocol supported by all web clients and servers.
4. Security:
1. HTTPS (HTTP Secure) encrypts communication using TLS, ensuring data
privacy and security.
 Example Architecture:
HTTP Flow in a Web Application:
1.User opens a browser and enters www.example.com.
2.The browser sends an HTTP GET request to the server.
3.The server processes the request and sends back an HTTP response with the requested web page.
4.If dynamic content is required, the server communicates with a backend service or database to fet
5.The browser renders the response, displaying the website.
HTTP enables seamless interaction in web architecture, powering everything from basic webs ites
to advanced web applications and APIs.