Caching & Client-Side Techniques in Web Apps

Key Concepts & How They Work

1. Caching: Speeding Up Web Applications

Caching stores frequently accessed data in a temporary storage layer to reduce server load and improve response time. It works by storing copies of data (e.g., HTML, images, API responses) closer to the user or application.

Types of Caching

How Caching Works in ASP.NET Core

graph LR
    A["Client Request"] --> B{"Cache Check"}
    B -->|"Hit"| C["Return Cached Data"]
    B -->|"Miss"| D["Fetch from DB/API"]
    D --> E["Store in Cache"]
    E --> C

• Cache Providers in ASP.NET Core:
  • MemoryCache (in-memory, short-lived)
  • DistributedCache (external, e.g., Redis)
  • Response Caching (HTTP-level caching via ResponseCache)

Worked Example: Caching a Product List in Daraz

// Enable caching for a controller action
[ResponseCache(Duration = 60)] // Cache for 60 seconds
public IActionResult GetProducts()
{
    var products = _dbContext.Products.ToList();
    return View(products);
}

• Benefits:
  • Reduces database queries by ~70% for repeated requests.
  • Lowers server CPU usage by ~50%.
• Drawbacks:
  • Stale data if not invalidated properly.
  • Higher memory usage for large caches.

2. Client-Side Techniques: JavaScript, jQuery, and Validation

Client-side scripting executes in the user’s browser, enabling dynamic interactions without full page reloads.

A. JavaScript Basics

• Purpose: Handle events (clicks, form submissions), manipulate DOM, and fetch data via AJAX.
• Example: Auto-suggest search in Google or Daraz.

B. jQuery: Simplifying DOM Manipulation

jQuery is a library that simplifies JavaScript tasks like:

• DOM Traversal: $("#userInput").val() (get input value).
• AJAX Calls: $.ajax({ url: "/api/products", success: ... }).
• Animations: $("#loading").fadeOut().

Worked Example: Client-Side Form Validation (eSewa-like)

<!-- HTML Form -->
<input type="text" id="amount" placeholder="Enter amount">
<span id="error" style="color:red;"></span>

<!-- jQuery Validation -->
<script>
$(document).ready(function() {
    $("#amount").blur(function() {
        var amount = $(this).val();
        if (isNaN(amount) || amount <= 0) {
            $("#error").text("Invalid amount!");
        } else {
            $("#error").text("");
        }
    });
});
</script>

• Why Use jQuery?
  • Cross-browser compatibility.
  • Reduces 100+ lines of vanilla JS to ~10 lines.

C. Single Page Applications (SPAs)

• Definition: Apps that load a single HTML page and dynamically update content via JavaScript (e.g., React, Angular).
• Example: WhatsApp Web (messages load without page refresh).

3. State Management on the Client Side

Worked Example: Storing a User’s Cart in localStorage (Daraz)

// Add to cart
function addToCart(productId) {
    let cart = JSON.parse(localStorage.getItem("cart")) || [];
    cart.push(productId);
    localStorage.setItem("cart", JSON.stringify(cart));
}

// Retrieve cart
let cart = JSON.parse(localStorage.getItem("cart")) || [];
console.log("Cart items:", cart);

In the Real World

1. eSewa (Nepal)

   • What it uses: Client-side caching (localStorage) to store transaction history and server-side caching (Redis) for user sessions.
   • Why? Reduces login delays by ~40% and prevents duplicate transactions.

2. Daraz (Nepal/Global)

   • What it uses: jQuery for AJAX cart updates and distributed caching (Redis) for product listings.
   • Why? Enables real-time stock updates without page reloads.

3. YouTube (Global)

   • What it uses: Client-side caching (HTML5 Cache API) for offline videos and CDN caching for static assets.
   • Why? Saves ~60% bandwidth for repeat viewers.

4. Ncell (Nepal)

   • What it uses: SessionStorage to remember login status temporarily.
   • Why? Improves UX by avoiding repeated logins during a session.

Exam Tip

1. Caching Questions:
   • Always explain where (client/server/distributed) and how (MemoryCache, Redis) caching is applied.
   • Compare Response Caching vs. DistributedCache in terms of scope (HTTP-level vs. app-level).

2. Client-Side Scripting:

   • For jQuery questions, show a snippet (e.g., AJAX call or DOM manipulation).
   • Differentiate between localStorage (persistent) and sessionStorage (temporary).

3. SPAs:

   • Define SPAs and contrast them with traditional multi-page apps.
   • Mention frameworks like React/Angular if asked about modern implementations.

4. Validation:

   • Combine client-side (jQuery) and server-side (Data Annotations) validation in answers.
   • Example: Validate email format in jQuery and use [EmailAddress] attribute in C#.

Visual Summary