Introduction to Web Tech & Web Evolution: History, Models, and Trends

TAKEAWAYS:

• The web evolved from static pages (Web 1.0) to interactive, user-generated content (Web 2.0) and decentralized applications (Web 3.0).
• The client-server model is the backbone of modern web interactions, while peer-to-peer (P2P) networks enable decentralized sharing.
• Web protocols (HTTP/HTTPS, FTP) and standards (HTML, CSS, JavaScript) define how data is transmitted and displayed.
• Web browsers and servers act as intermediaries between users and web applications, processing requests and rendering content.
• Real-world applications like eSewa (payment gateways) and Daraz (e-commerce) rely on these models and protocols.
• Understanding the OSI and TCP/IP models helps visualize how data travels across networks and is processed by devices.

1. Introduction to Web Technology

Web technology refers to the collection of protocols, languages, and tools that enable the creation, delivery, and interaction with web-based applications. It includes:

• Frontend technologies: HTML, CSS, JavaScript (what users see and interact with).
• Backend technologies: Servers, databases, and scripting languages (e.g., PHP, Node.js).
• Networking protocols: HTTP/HTTPS, FTP, SMTP (how data is transmitted).
• Development frameworks: React, Angular, Django (for building scalable applications).

How the Web Works: A High-Level Overview

The web operates on a client-server architecture, where:

1. A user (client) requests content (e.g., a webpage) via a browser.
2. The browser sends a HTTP request to a web server.
3. The server processes the request, retrieves data (e.g., from a database), and sends back an HTTP response (e.g., HTML, JSON).
4. The browser renders the response, displaying the webpage to the user.

sequenceDiagram
    participant User
    participant Browser
    participant WebServer
    participant Database

    User->>Browser: Enters URL (e.g., daraz.com)
    Browser->>WebServer: HTTP GET Request
    WebServer->>Database: Query for product data
    Database-->>WebServer: Returns JSON/XML data
    WebServer-->>Browser: HTTP Response (HTML/JSON)
    Browser->>User: Renders webpage

Visualization of the Process: The above diagram shows a typical web request-response cycle, which is the foundation of how websites like Daraz or eSewa function. Notice how the browser acts as an intermediary between the user and the server.

2. Evolution of the Web

The web has evolved through distinct phases, each introducing new capabilities and user experiences:

Key Milestones in Web Evolution

• 1989: Tim Berners-Lee proposes the World Wide Web at CERN.
• 1993: Introduction of HTML 2.0, enabling basic web pages.
• 1995: JavaScript and CSS are introduced, allowing dynamic and styled content.
• 2004: Web 2.0 emerges with platforms like Facebook and YouTube.
• 2017: HTTP/2 and WebAssembly improve performance and security.
• 2020s: Web 3.0 focuses on decentralization (e.g., blockchain-based apps).

Real-World Example: eSewa and Web 2.0 eSewa, Nepal’s popular digital payment platform, relies on Web 2.0 technologies:

• User-generated content: Users can add their bank accounts, set up payment preferences, and leave reviews.
• Interactive features: Real-time transaction tracking, push notifications, and integration with e-commerce sites like Daraz.
• Social features: Sharing payment links via WhatsApp or SMS.

3. Web Models: Client-Server vs. Peer-to-Peer

Web applications primarily use two models: client-server and peer-to-peer (P2P).

Client-Server Model

• Definition: A centralized server hosts resources (e.g., websites, databases), while clients (users) request and receive data.
• How it works:
  1. Client (browser) sends a request to the server.
  2. Server processes the request and sends back a response.
• Advantages:
  • Scalable (servers can handle many clients).
  • Centralized control (easier to manage updates and security).
• Disadvantages:
  • Single point of failure (if the server crashes, the entire system may go down).
  • Higher server load during peak times.

Example: Daraz’s E-Commerce Platform Daraz uses the client-server model for its website and mobile app:

• When you search for a product, your request goes to Daraz’s servers.
• The server retrieves product data from its database and sends it back as an HTML page or API response.
• This model allows Daraz to manage inventory, process payments, and handle millions of users simultaneously.

Peer-to-Peer (P2P) Model

• Definition: Decentralized model where all participants (peers) act as both clients and servers. No central authority controls the network.
• How it works:
  1. Peers share resources directly with each other.
  2. No single server is required; data is distributed across all nodes.
• Advantages:
  • No single point of failure (if one peer goes offline, others can still share data).
  • Lower cost (no need for expensive servers).
• Disadvantages:
  • Harder to manage (no central control over content or security).
  • Slower performance (data may need to traverse multiple peers).

Example: BitTorrent (File Sharing) BitTorrent is a classic example of a P2P model:

• When you download a file via BitTorrent, your computer becomes a peer.
• Other peers in the network share parts of the file with you, and you share parts of the file with others.
• This model is used for large file downloads (e.g., movies, software) where a central server would be impractical.

Comparison Table: Client-Server vs. P2P

4. Web Protocols and Standards

Web protocols define how data is transmitted between clients and servers. Key protocols include:

HTTP/HTTPS

• HTTP (HyperText Transfer Protocol): The protocol used for transmitting web data. It works on the application layer of the OSI model.
  • HTTP/1.1: Supports persistent connections (reduces latency).
  • HTTP/2: Introduces multiplexing (multiple requests over a single connection).
  • HTTP/3: Uses QUIC protocol for faster, more reliable connections.
• HTTPS (HTTP Secure): HTTP with TLS/SSL encryption for secure data transmission.
  • Used by all major websites (e.g., eSewa, Daraz) to protect user data.

Visualization of HTTP Request/Response:

FTP (File Transfer Protocol)

• Used for uploading and downloading files between a client and server.
• Not secure by default (FTP uses plaintext for passwords; SFTP/FTPS are secure alternatives).

SMTP (Simple Mail Transfer Protocol)

• Used for sending emails (e.g., Gmail, Yahoo Mail).
• Works in conjunction with IMAP/POP3 for receiving emails.

Web Standards

Standards ensure consistency across browsers and devices. Key standards include:

• HTML: Structure of web pages.
• CSS: Styling of web pages.
• JavaScript: Interactivity and dynamic content.
• JSON/XML: Data formats for APIs and data exchange.

Example: Daraz’s API (Application Programming Interface) Daraz uses RESTful APIs (based on HTTP) to allow third-party developers to interact with its product catalog:

• When a developer requests product data, Daraz’s server sends back a JSON response.
• This enables apps like Pathao to integrate Daraz’s products into their delivery services.

5. Web Browsers and Servers

Web Browsers

• Definition: Software applications that allow users to access and interact with web content.
• Key Features:
  • Render HTML, CSS, and JavaScript.
  • Handle HTTP requests and responses.
  • Provide user interfaces (e.g., address bar, tabs).
• Popular Browsers:
  • Google Chrome, Mozilla Firefox, Safari, Microsoft Edge.

Example: Chrome’s Rendering Engine When you visit eSewa’s website, Chrome’s rendering engine:

1. Parses the HTML to build the DOM (Document Object Model).
2. Applies CSS styles to the DOM.
3. Executes JavaScript for interactivity (e.g., real-time balance updates).

Web Servers

• Definition: Software/hardware that stores, processes, and delivers web content to clients.
• Key Features:
  • Hosts websites and applications.
  • Processes HTTP requests and sends responses.
  • Manages static (HTML, images) and dynamic (PHP, Node.js) content.
• Popular Servers:
  • Apache, Nginx, Microsoft IIS.

Example: Nginx vs. Apache

• Nginx: Often used for high-traffic sites like YouTube and Netflix due to its efficiency in handling concurrent connections.
• Apache: More flexible for custom configurations; used by many small to medium-sized websites.

6. OSI and TCP/IP Models

Understanding how data travels across networks requires knowledge of the OSI (Open Systems Interconnection) and TCP/IP (Transmission Control Protocol/Internet Protocol) models.

OSI Model (7 Layers)

The OSI model is a conceptual framework for network communication:

Layer 7: Application (HTTP, FTP, SMTP)
Layer 6: Presentation (Encryption, Compression)
Layer 5: Session (Session management)
Layer 4: Transport (TCP, UDP)
Layer 3: Network (IP, Routing)
Layer 2: Data Link (MAC, Switches)
Layer 1: Physical (Cables, Hubs)

TCP/IP Model (4 Layers)

The TCP/IP model is the practical implementation of the OSI model:

Layer 4: Application (HTTP, DNS, SMTP)
Layer 3: Transport (TCP, UDP)
Layer 2: Internet (IP, ICMP)
Layer 1: Network Access (Ethernet, Wi-Fi)

How Data Travels from Client to Server (TCP/IP Example)

1. Application Layer: HTTP request is created (e.g., GET /products).
2. Transport Layer: TCP breaks the request into segments and adds sequence numbers.
3. Internet Layer: IP adds source/destination addresses (e.g., 192.168.1.1 to 203.107.195.1).
4. Network Access Layer: Ethernet frame is created with MAC addresses.

Real-World Example: Pathao’s Ride Request When you request a ride on Pathao:

1. Your phone sends an HTTP request to Pathao’s server via Wi-Fi or mobile data.
2. The request travels through TCP/IP layers, crossing routers and ISPs (e.g., NTC, Ncell).
3. Pathao’s server processes the request, checks driver availability, and sends back a response (e.g., "Ride available in 2 minutes").

7. Real-World Applications

1. eSewa: Payment Gateways (Client-Server Model + HTTPS)

• How it uses this unit’s ideas:
  • Client-Server Model: Users (clients) interact with eSewa’s servers to process payments.
  • HTTPS: Ensures secure transmission of financial data.
  • APIs: Allows integration with banks and e-commerce sites (e.g., Daraz).
• Worked Example: When you pay for a Daraz order via eSewa:
  1. Daraz sends a payment request to eSewa’s server.
  2. eSewa’s server authenticates your account and deducts the amount from your linked bank.
  3. A confirmation is sent back to Daraz, and your order is marked as paid.

2. Daraz: E-Commerce Platform (Dynamic Websites + APIs)

• How it uses this unit’s ideas:
  • Dynamic Content: Uses JavaScript and server-side scripts (e.g., PHP) to update product listings in real-time.
  • Client-Server Model: Servers host product catalogs and process orders.
  • HTTP/HTTPS: Ensures secure transactions.
• Worked Example: When you search for "Nike shoes" on Daraz:
  1. Your browser sends an HTTP request to Daraz’s server with your search query.
  2. The server queries its database for matching products.
  3. The server sends back an HTML page with the results (or a JSON API response if accessed by another app).
  4. Your browser renders the page, showing filters, images, and prices.

3. YouTube: Video Streaming (P2P + CDN)

• How it uses this unit’s ideas:
  • Content Delivery Network (CDN): Uses a network of servers to deliver videos efficiently (closer to the user).
  • HTTP/HTTPS: Streams video chunks to your browser.
  • Peer-Assisted Streaming: Some videos use P2P to reduce server load (e.g., during live streams).
• Worked Example: When you watch a video on YouTube:
  1. Your browser requests the video from YouTube’s CDN (e.g., a server in Kathmandu).
  2. The CDN breaks the video into small chunks and streams them to your browser.
  3. Your browser buffers and plays the video in real-time.

8. In the Real World

1. eSewa: Secure Transactions with HTTPS

   • eSewa uses HTTPS to encrypt all payment data, ensuring that transactions between your device and eSewa’s servers are secure. Without HTTPS, hackers could intercept sensitive information like credit card numbers or bank details. This is why you see the padlock icon in your browser’s address bar when visiting eSewa.

2. Daraz: Client-Server Architecture for Scalability

   • Daraz’s website and mobile app rely on a client-server model to handle millions of users simultaneously. When you browse products or add items to your cart, your request is sent to Daraz’s servers, which retrieve the data from databases and return a response. This model allows Daraz to scale during peak shopping seasons (e.g., during festivals like Dashain or Christmas).

3. Pathao: Real-Time Ride Matching (APIs and WebSockets)

   • Pathao uses real-time APIs and WebSocket technology to match riders with drivers instantly. When you request a ride, Pathao’s backend checks driver availability in your area and updates the ride status in real-time. This relies on dynamic web technologies and server-client communication to provide a seamless experience.

9. Exam Tip

This unit is highly conceptual and often tested with:

1. Short-answer questions on definitions (e.g., "Explain the client-server model.").
2. Diagram-based questions (e.g., draw the OSI or TCP/IP model and label layers).
3. Application-based questions (e.g., "How does eSewa use HTTPS? Explain with a diagram.").
4. Comparison questions (e.g., "Compare Web 2.0 and Web 3.0 with examples.").

How to Score Full Marks:

• For definitions: Use clear, concise language and include real-world examples (e.g., "eSewa uses the client-server model...").
• For diagrams: Always label all parts (e.g., in the OSI model, label Layers 1-7 and give examples for each).
• For applications: Tie concepts to products you know (e.g., "Daraz uses dynamic content via JavaScript...").
• For comparisons: Use a table format (like the one above) to highlight differences clearly.

Common Pitfalls to Avoid:

• Mixing up HTTP and HTTPS: Always specify that HTTPS is secure (uses encryption).
• Ignoring real-world examples: Examiners love it when you connect theory to apps like eSewa or Daraz.
• Overcomplicating answers: Stick to the key points—examiners reward clarity over complexity.