Web Application

Web Application Basics

  • A web application is a software system that operates on the internet, where users interact through a web browser.

  • Client-Server Pattern / Request-Response Model: At the heart of any web application lies the Client-Server architecture, a fundamental pattern where:

    • Client: Initiates a request (usually the browser or frontend app).

    • Server: Responds to the request, usually by sending back a web page, data, or performing some action.

  • Benefits of Client-Server Architecture

    • Centralized Security: Easier to apply security patches and enforce policies at the server level.

    • Centralized Data Access: Data stored in one place is easier to manage and back up.

    • Ease of Maintenance: Updates and bug fixes are done on the server and are instantly reflected across all users.

  • Variations of the Client-Server Model

    • Peer-to-Peer (P2P) Applications: No dedicated server, clients act as both providers and consumers.

    • Application Servers: Middleware between frontend and database, handling business logic.

    • Asynchronous Requests: Web browsers don’t block while waiting for server responses.

AJAX (Asynchronous JavaScript and XML)

  • AJAX is a client-side technique for making asynchronous requests to the server without reloading the entire page.

  • Key Features

    • Partial page updates = faster and smoother user experience.

    • Communicates with the server using XMLHttpRequest or the modern Fetch API.

    • Common in Single-Page Applications (SPAs) built with React, Angular, Vue, etc.

  • Workflow:

    • A JavaScript function is triggered by user interaction (e.g., typing in a field).

    • It sends an asynchronous HTTP request to the server.

    • The server responds with data (usually JSON).

    • JavaScript updates the DOM based on the response.

    • All of this happens without a full-page reload.

  • Use Cases

    • Auto-suggestions (e.g., Google Search typing).

    • Live form validations (e.g., checking if a username is taken).

    • Background sync (e.g., fetching new messages in Gmail).

URL Structure and Domain Name System (DNS)

  • A URL (Uniform Resource Locator) is the address used to access resources on the internet. It tells the browser where to locate a resource and how to retrieve it.

  • Example URL: https://blog.example.com:443/about/team?user=John#section2

  • Components of a URL

    • Scheme (Protocol): Specifies the protocol used to access the resource. (HTTP, HTTPS).

    • Host (Domain Name): The domain name or IP address of the server hosting the resource. (e.g., www.example.com).

    • Port: Defines the server’s listening port (e.g., 80 for HTTP, 443 for HTTPS).

    • Path: indicates the exact location of the resource (like file or endpoint) on the server. Example: /about/team

    • Query Parameters: Key-value pairs used to pass extra information. (?user=John).

    • Fragment (#): Scrolls to a section of a webpage (#section2).

    • Subdomain: A prefix to the domain name to categorize or separate content.

      • Example: blog.example.com (where blog is the subdomain)

  • Types of URLs

    • Absolute URL: Complete address including scheme, domain, and path. (http://example.com/page.html).

    • Relative URL: Partial address that is relative to the current page. Example: (/about.html or ../images/logo.png).

    • Anchor Links/ Fragment (#): Used to navigate within the same page.

  • Domain Name System (DNS)

    • DNS translates human-friendly domain names (like www.google.com) into machine-readable IP addresses (like 142.250.190.14).

    • This allows browsers to locate and communicate with web servers over the internet.

    • Hierarchical Structure of DNS: DNS is a hierarchical system with different types of servers working together to resolve domain names into IP addresses.

      • Root DNS Servers: Start the name resolution process.

        • The starting point of the DNS resolution.

        • Return references to Top-Level Domain (TLD) servers.

        • There are 13 main root servers (A–M).

      • Top-Level Domain (TLD) Servers: Manage .com, .org, etc.

        • Manage domain extensions like .com, .org, .gov, etc.

        • Example:

          • .com TLD → www.google.com

          • .gov TLD → www.nasa.gov

        • The TLD server does not store actual website IP addresses, but it knows where to find them.

      • Authoritative Name Servers: Store domain-specific records.

        • The final step in DNS resolution. Stores actual IP addresses for domain names.

        • Example: xyz.com has an authoritative name server storing IP mappings like

          • www.xyz.com → 192.168.1.1

          • mail.xyz.com → 192.168.1.2

        • If the authoritative server does not have the requested record, it may redirect the query to another name server.

    • DNS Query Flow: When a user enters www.xyz.com :

      • Browser Checks Cache: Checks its local DNS cache for a previously resolved IP.

      • OS Checks Cache: If not in browser cache, the Operating System checks its DNS cache.

      • DNS Resolver (ISP’s DNS Server): If still unresolved, the request goes to the ISP’s DNS Resolver.

        • If cached, IP is returned.

        • If not, the resolver initiates a recursive lookup.

      • Query to Root DNS Server: Returns the address of the relevant TLD server.

      • Query to TLD Server: Returns the address of the Authoritative Name Server for the domain.

      • Query to Authoritative Server: Returns the final IP address for www.xyz.com.

      • IP Address Returned: Resolver sends the IP back to the browser.

      • Browser Sends HTTP Request: Browser uses the IP to load the web page.

Content Delivery Network (CDN)

  • A CDN is a network of geographically distributed servers that cache content closer to users.

  • When a user requests content, it is served from the nearest CDN server rather than the origin server, reducing physical distance and network latency.

  • Working Steps:

    • When a user requests a resource, the CDN routes the request to the nearest edge server.

    • If the edge server has the cached content, it delivers it immediately.

    • If not, the CDN fetches the content from the origin server, caches it, and then serves it to the user.

    • CDNs use intelligent routing and load balancing to avoid network congestion and outages

  • Benefits

    • Improves website load times by reducing latency.

    • Reduces bandwidth costs by minimizing data transfer.

    • Enhances availability and security with redundancy.

    • Many CDNs provide DDoS protection, TLS/SSL encryption, firewalls, and bot mitigation.

  • Use Cases

    • Caching static assets (CSS, JS, images).

    • Load balancing to handle traffic spikes.

    • Serving video streaming content (e.g., YouTube, Netflix).

  • Key Concepts & Technologies Used:

    • Edge Servers: Geographically located caching servers.

    • PoPs (Points of Presence): Locations that host edge servers.

    • TTL (Time To Live): Defines how long content is cached before being refreshed.

    • Cache Invalidation: Mechanism to purge or update stale cached data.

    • Anycast Routing: Directs requests to the nearest or least-loaded server using the same IP address across multiple locations.

Web Hosting & Technology Stacks

  • Web hosting: Web Hosting is a service that provides the necessary infrastructure (servers, storage, bandwidth, security) to publish and access websites and web applications on the internet. It allows individuals and businesses to make their content available to users globally.

  • Types of Web Hosting

    • Shared Hosting: Multiple websites are hosted on the same physical server, sharing CPU, RAM, and storage.

    • VPS (Virtual Private Server) Hosting: A physical server is divided into virtual machines, each with its own OS and dedicated resources.

    • Dedicated Hosting: A complete physical server is dedicated to a single client.

    • Cloud Hosting: Uses a cluster of virtual servers across the cloud (e.g., AWS, GCP, Azure).

    • Serverless Hosting / Managed Hosting: Developers deploy functions or code snippets without managing servers. Billed per execution.

  • Frontend Development: The frontend (client-side) is responsible for user interface, responsiveness, and interactivity.

    • Core Technologies: HTML, CSS, JavaScript.

    • Frameworks/Libraries: React.js, Angular, Vue.js.

    • CSS Frameworks: Bootstrap, Tailwind CSS.

    • Key Concerns:

      • Responsive Design – Adapts to various screen sizes.

      • Cross-Browser Compatibility – Consistent behavior across browsers.

      • Performance Optimization – Lazy loading, minimizing scripts.

  • Backend Development: The backend (server-side) is responsible for processing requests, managing databases, handling security, and providing business logic.

    • Programming Languages: Node.js, Python (Django, Flask), PHP, Java (Spring Boot).

    • Frameworks: Express.js, Laravel, Ruby on Rails.

    • Security: Authentication, authorization, data validation.

  • Databases: Databases store and manage application data (e.g., users, orders, transactions).

    • Relational Databases: MySQL, PostgreSQL.

    • NoSQL Databases: MongoDB, Cassandra.

  • Other Components: Other essential technologies enhance performance, security, and scalability.

    • Caching Systems: Redis, Memcached.

    • Web Servers: Apache, Nginx.

    • Load Balancers & Proxy Servers: AWS ELB, Cloudflare.

Full-Stack Development Stacks

  • JavaScript-Based Stacks: JavaScript-based full-stack development is popular due to its versatility, as JavaScript can be used for both frontend and backend development.

    • MEAN (MongoDB, Express, Angular, Node.js)

    • MERN (MongoDB, Express, React, Node.js)

    • MEVN (MongoDB, Express, Vue.js, Node.js)

  • Python-Based Stacks

    • Django or Flask (Backend Framework)

    • SQLAlchemy (ORM)

    • Django REST Framework (API Development)

    • Frontend Options: React, Angular, Vue.js.

Rendering Patterns

  • Critical Rendering Path: The Critical Rendering Path is the series of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Optimizing it results in faster page load, better performance, and improved user experience.

  • Steps in the Critical Rendering Path

    • HTML Parsing → DOM Creation (Document Object Model)

      • Browser reads HTML and creates a DOM tree.

      • Each HTML tag becomes a node in this tree.

    • CSS Parsing → CSSOM Creation (CSS Object Model)

      • CSS is parsed to create the CSSOM (CSS Object Model), representing styles of each DOM element..

    • Render Tree Construction (DOM + CSSOM): The DOM and CSSOM are combined to build the Render Tree.

      • Only visible elements are included (display: none is ignored).

    • Layout Calculation (Determining Positions & Sizes) / Reflow

      • The browser calculates the position and size of each element in the Render Tree. This process is also known as "reflow."

    • Painting (Rendering Pixels on Screen): The browser paints the elements onto the screen with colors, text, and images.

  • Optimizing the Critical Rendering Path

    • Defer Non-Critical Resources: Use async and defer attributes in <script> to prevent render-blocking.

      • async: Load script in parallel and execute immediately.

      • defer: Load script in parallel, execute after HTML is parsed.

    • Optimize External Resources: Place <script> at the bottom of the page or use defer to avoid blocking DOM construction.

    • Optimize Images: Compress and resize images.

      • Use responsive images to serve based on screen size.

      • Prefer modern formats like WebP.

    • Reduce Number of Requests:

      • Bundling: Combine multiple CSS and JavaScript files into a single file to reduce the number of HTTP requests.

      • HTTP/2: Utilize HTTP/2 for multiplexing multiple requests over a single connection.

      • Use techniques like image sprites to combine multiple images into a single file.

    • Leverage Browser Caching: Set appropriate cache headers(e.g., Cache-Control) to store static resources in the user's browser, reducing the need to re-download them on subsequent visits.

    • Prioritize Above-the-Fold Content: Ensure that the content visible without scrolling (above-the-fold) loads quickly by prioritizing its resources.

    • Minify & Remove Unused Code: Minify CSS, JavaScript, and HTML files to reduce their size and improve load times.

      • Tree shaking removes dead (unused) code in modules.

      • Name Mangling: Name mangling is often used during the minification process to shorten variable and function names, reducing the overall size of the code

    • Optimize CSS Delivery: Inline critical CSS, load the rest asynchronously.

      • Use media attributes or JS to load CSS conditionally.

      • Resource hints (Preloading Strategies): Resource hints are directives that we can provide to the browser to optimize the loading of resources. They help improve performance by indicating to the browser which resources it should prioritize. Here are some common resource hints:

        • Preload: Preload critical resources like CSS, JavaScript, fonts, and images before the browser starts parsing the HTML. This ensures they are available as soon as needed.

          • <link rel="preload" href="styles.css" as="style">

          • <link rel="preload" href="script.js" as="script">

        • Preconnect: Establish early connections to important third-party origins. This reduces the time it takes to set up the connection when the actual request is made.

          • <link rel="preconnect" href="https://example.com">

        • Prefetch: Low-priority fetch of resources likely needed for future navigation.

          • <link rel="prefetch" href="next-page.js">

        • DNS-Prefetch: Resolve domain names (DNS lookup) early, so that when the browser needs to make a request to a domain, it can skip the DNS resolution step.

          • <link rel="dns-prefetch" href="https://example.com">

        • Pre-render: Load and render the entire page in background for faster future navigation.

    • Reduce DOM Complexity: Avoid deep DOM nesting and unnecessary elements.

    • Lazy Load Images and Videos: Defer the loading of images and videos that are not immediately visible on the page until the user scrolls to them.

      • <img src="image.jpg" loading="lazy" alt="Optimized Image">

      • React.lazy(): In React, we can use the React.lazy() function to lazily load components when they are needed

    • Code Splitting: Load only the JS needed for the current page/view.

      • Built into Webpack, Vite, etc.

      • It can be particularly useful in single-page applications (SPAs) where the entire application is often bundled into a single file.

      • Webpack: A module bundler for JavaScript applications.

        • Bundles multiple files into one bundle.js.

        • Can optimize assets, handle dependencies, and transpile JS.

        • A popular module bundler that supports code splitting out of the box. It allows us to split your code into smaller chunks and load them on demand

      • Compilation vs. Transpilation

        • Compilation: Converts high-level code to machine code (e.g., C, Java).

        • Transpilation: Converts modern JavaScript (ES6+) to older versions for browser compatibility (Babel).

    • Use a CDN (Content Delivery Network): Serves static files from locations closer to the user.

    • Reduce the reflow: Try to reduce the reflow by controlling and using Flex Grid, Controlling Animations, Reduce complex selectors

    • Document fragment: Used for batch DOM manipulation reducing the number of reflows.

      • Changes made in DocumentFragment do not trigger reflows or repaints until inserted into DOM.

  • Client-Side Rendering (CSR): Content is loaded dynamically via JavaScript in the browser.

    • Slower Time to First Contentful Paint (FCP) impacts user experience.

    • Minimal HTML with no actual content initially which will be rendered by the browser. A blank page before JavaScript execution impacts SEO.

    • Advantages: Reduces server load.

    • Disadvantages:

      • Poor SEO (unless optimized with SSR).

      • Initial load can be slow.

  • Server-Side Rendering (SSR): Prerendering

    • HTML is pre-generated on the server and sent to the client.

    • Search engines can crawl and index content easily since they receive pre-rendered HTML.

    • SSR reduces initial load time because:

      • HTML is rendered on the server instead of being processed in the browser.

      • Users don’t have to wait for JavaScript to load and execute.

    • Advantages:

      • Better SEO.

      • Faster initial page load.

    • Disadvantages:

      • More server processing.

  • Static Site Generation (SSG): Pages are prebuilt during build time(e.g., with Gatsby, Jekyll, Hugo).

    • Advantages:

      • Fast performance (pre-rendered pages).

      • Low server cost (served via CDN).

    • Disadvantages:

      • Not suitable for dynamic content.

      • Rebuild required for content changes.

  • ISR (Incremental Static Regeneration)

    • Hybrid approach → Static pages update at intervals.

PreviousApplication DevelopmentNextHyperText Transfer Protocol (HTTP)

Last updated