Forem: Vimal Maheedharan

Microfrontends Without Frameworks: A Simple, Vanilla JavaScript Approach

Vimal Maheedharan — Thu, 04 Dec 2025 18:05:20 +0000

The question: "Can we build microfrontends using only vanilla JavaScript, HTML, and CSS (without frameworks like React/Vue or build tools like Webpack)?"

Short answer: Yes — absolutely!

We can build microfrontends with plain HTML/JS/CSS using simple, browser-native patterns: Web Components (Custom Elements + Shadow DOM), dynamic script/ES module loading, or iframes.

Below, I'll provide the complete, copy-pasteable approach for a host and two remotes using custom elements and a tiny global event bus. This solution is minimal, framework-free, and easy to reason about. Perfect as a short engineering exercise or a workshop: lightweight, independent deployables, and easy to reason about.

Architecture overview

Host: Loads and orchestrates microfrontends (iframes)
Products: Microfrontend that emits cart:add events
Cart: Microfrontend that receives events and displays cart items

📁 Directory structure

host/
  index.html
products/
  products.html
cart/
  cart.html

Run each folder on a different local server:

Host → http://localhost:3000
Products → http://localhost:3001
Cart → http://localhost:3002

(You can use python -m http.server or VSCode Live Server.)

🖥️ Host app — host/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Host (iframes)</title>
  <style>
    nav{background:#222;color:#fff;padding:8px}
    #frameWrap{display:flex;gap:12px;padding:12px}
    iframe{width:48%;height:400px;border:1px solid #ccc;}
  </style>
</head>
<body>
  <nav>
    <button id="btnLoad">Load Microfrontends</button>
    <button id="btnSendAuth">Send Auth Token</button>
  </nav>

  <div id="frameWrap"></div>

  <script>
  const ALLOWED = {
    products: 'http://localhost:3001',
    cart: 'http://localhost:3002'
  };

  const frameWrap = document.getElementById('frameWrap');

  function createIframe(id, src, sandbox = 'allow-scripts allow-same-origin') {
    const f = document.createElement('iframe');
    f.id = id;
    f.src = src;
    f.sandbox = sandbox;
    f.loading = 'lazy';
    f.title = id;
    frameWrap.appendChild(f);
    return f;
  }

  // Handle messages from remotes
  window.addEventListener('message', (ev) => {
    const origin = ev.origin;
    const data = ev.data || {};
    if (!data.type) return;

    if (![ALLOWED.products, ALLOWED.cart].includes(origin)) {
      console.warn('Blocked message from unknown origin:', origin);
      return;
    }

    console.log('Host received:', data, 'from', origin);

    // Forward "cart:add" to Cart MFE
    if (data.type === 'cart:add') {
      const cartFrame = document.getElementById('cartFrame');
      if (cartFrame && cartFrame.contentWindow) {
        cartFrame.contentWindow.postMessage(data, ALLOWED.cart);
      }
    }

    // Handle auth requests
    if (data.type === 'auth:request') {
      const token = 'FAKE_TOKEN_12345';
      ev.source.postMessage({ type: 'auth:response', payload: { token } }, origin);
    }

    // Dynamic iframe resizing
    if (data.type === 'frame:resize' && ev.source === document.getElementById('productsFrame')?.contentWindow) {
      document.getElementById('productsFrame').style.height = data.payload + 'px';
    }
  });

  document.getElementById('btnLoad').onclick = () => {
    frameWrap.innerHTML = '';
    createIframe('productsFrame', ALLOWED.products + '/products.html');
    createIframe('cartFrame', ALLOWED.cart + '/cart.html');
  };

  document.getElementById('btnSendAuth').onclick = () => {
    const token = 'FAKE_TOKEN_12345';
    const prod = document.getElementById('productsFrame');
    const cart = document.getElementById('cartFrame');

    if (prod && prod.contentWindow) {
      prod.contentWindow.postMessage({ type:'auth:response', payload:{ token } }, ALLOWED.products);
    }
    if (cart && cart.contentWindow) {
      cart.contentWindow.postMessage({ type:'auth:response', payload:{ token } }, ALLOWED.cart);
    }
  };
  </script>
</body>
</html>

📦 Products microfrontend — products/products.html

<!doctype html>
<html>
<head><meta charset="utf-8"/><title>Products</title></head>
<body>
  <h3>Products (iframe)</h3>
  <div id="list"></div>

  <script>
  const ORIGIN_PARENT = 'http://localhost:3000';
  const products = [
    {id:1,name:'Widget A',price:199},
    {id:2,name:'Widget B',price:299}
  ];

  function render(){
    document.getElementById('list').innerHTML = products.map(p => `
      <div style="display:flex;justify-content:space-between;padding:6px;border-bottom:1px solid #eee">
        <div>${p.name} — ₹${p.price}</div>
        <button data-id="${p.id}">Add</button>
      </div>`).join('');

    document.querySelectorAll("button").forEach(btn => {
      btn.onclick = () => {
        const id = +btn.dataset.id;
        const item = products.find(x => x.id === id);
        parent.postMessage({ type:'cart:add', payload:item }, ORIGIN_PARENT);
      };
    });
  }
  render();

  // Request auth
  parent.postMessage({ type:'auth:request' }, ORIGIN_PARENT);

  // Listen for messages
  window.addEventListener('message', (ev) => {
    if (ev.origin !== ORIGIN_PARENT) return;
    if (ev.data.type === 'auth:response') {
      console.log('Products received token:', ev.data.payload.token);
    }
  });

  // Ask host to adjust height
  setTimeout(() => {
    parent.postMessage({ type:'frame:resize', payload: document.body.scrollHeight }, ORIGIN_PARENT);
  }, 200);
  </script>
</body>
</html>

🛒 Cart microfrontend — cart/cart.html

<!doctype html>
<html>
<head><meta charset="utf-8"/><title>Cart</title></head>
<body>
  <h3>Cart (iframe)</h3>
  <div id="items">No items</div>

  <script>
  const ORIGIN_PARENT = 'http://localhost:3000';
  const items = [];

  function render(){
    document.getElementById('items').innerHTML = items.length
      ? items.map(it => `<div>${it.name} — ₹${it.price}</div>`).join('')
      : 'No items';
  }
  render();

  window.addEventListener('message', (ev) => {
    if (ev.origin !== ORIGIN_PARENT) return;
    const msg = ev.data;

    if (msg.type === 'cart:add') {
      items.push(msg.payload);
      render();
    }

    if (msg.type === 'auth:response') {
      console.log('Cart received token:', msg.payload.token);
    }
  });

  // Request token at startup
  parent.postMessage({ type:'auth:request' }, ORIGIN_PARENT);
  </script>
</body>
</html>

How to test locally

cd host && python -m http.server 3000
cd products && python -m http.server 3001
cd cart && python -m http.server 3002

Visit: http://localhost:3000
Action: Click “Load Microfrontends”
Action: Click “Add” in Products — items should appear in Cart
Observe: Browser console logs for auth:request, auth:response, cart:add, etc.

🔐 Security and production notes

Origin checks: Verify ev.origin for every message handler. Never trust postMessage() without origin checks.
Iframe sandboxing: Use sandbox and grant minimal permissions (allow-scripts, allow-same-origin only if needed).
Token handling: Prefer short-lived tokens via postMessage (not URLs).
Transport: Serve over HTTPS in production.
CSP: Apply strict Content Security Policy headers on remote pages.

✅ Acceptance criteria

Host orchestration: Host loads two independent microfrontends in iframes.
Event flow: Products iframe sends cart:add events; host forwards them to Cart iframe.
UI: Cart displays added items correctly.
Security: Messages are origin-checked and tokens are exchanged via postMessage.
Isolation: Iframes can be swapped/updated independently.

Jai Chinjo

Next.js Middleware: The Zero-Latency Security Gateway for Enterprise Apps

Vimal Maheedharan — Wed, 03 Dec 2025 15:45:54 +0000

Summary: We often view Next.js Middleware as just a router, but for Architects, it's the ultimate tool for centralizing critical security checks at the edge. Stop running slow, redundant checks deep inside your API routes. It's time to leverage the Middleware for superior performance and enterprise-grade resilience.

Zero-Latency Authentication Checks Fail Fast at the Edge
Traditional server-side checks consume valuable compute time, but Middleware performs validation before the request even hits your core application logic.
The Power: By intercepting the request and checking the validity of the auth token (e.g., a signed JWT) immediately, you can execute a near zero-latency redirect for unauthenticated users.
Architectural Benefit: This is the ultimate "fail-fast" security principle, minimizing the attack surface and saving precious serverless function execution time.
Per-Route Role-Based Access Control (RBAC)
RBAC should be enforced at the gateway, not deep within a component. Middleware centralizes permission enforcement, preventing configuration drift across many routes.
How it Works: After validating the user's token, decode their roles (admin, contributor, etc.) and map them against the requested path.
Example Logic: If the user is requesting a path starting with /admin but their token lacks the admin scope, the Middleware immediately returns a 403 Forbidden response.
Enterprise Value: Ensures every new developer-created route automatically adheres to the organization's access control policy without writing boilerplate checks.
Geo-Blocking and Compliance Restriction
For global enterprises, compliance and legal requirements often dictate where your content can be consumed. Middleware provides an immediate solution.
The Mechanism: Next.js provides access to the user's geographical data (originating from the hosting platform) via the NextRequest object.
Use Case: Need to restrict access to a specific product or data based on regional data sovereignty laws (like GDPR or CCPA)? Implement a simple blocklist/allowlist right in the Middleware to restrict users originating from non-compliant regions.
Device Fingerprinting & Bot Mitigation
The first line of defense against scraping and automated attacks should always be the fastest.
The Defense: Use the Middleware to inspect request headers (User-Agent, Origin, etc.) for signs of suspicious, automated activity. You can integrate third-party services here to generate a quick, unique device fingerprint.
Actionable Outcome: If the request appears malicious or automated, you can immediately serve a lightweight CAPTCHA challenge or block the request outright, protecting your costly API bandwidth and database resources from abuse.

Architect Takeaway
Next.js Middleware isn't just a development convenience—it's a critical layer in the modern security perimeter. By placing these high-stakes checks at the edge, you simplify your backend, reduce latency, and create a fundamentally more resilient and compliant enterprise application.

Jai Chinjo!

Most Outages Are Preventable: Why Your System Needs Self-Healing Yesterday

Vimal Maheedharan — Tue, 02 Dec 2025 18:00:39 +0000

Self-healing systems are basically computer systems that can fix themselves automatically when something goes wrong.

Instead of waiting for a human to notice a problem and manually fix it ("reactive firefighting"), these systems are designed to be proactive. They are constantly watching (Continuous Monitoring) themselves to catch tiny signs of trouble or "degradation" (a slight performance drop or early error). When they find an issue, they automatically take steps to correct it (Automatic Correction). This might mean restarting a faulty component, rolling back a bad update, or isolating a sick part of the system.

Why Self-Healing Is Important?

Prevents outages before users feel them. Systems detect degradation (latency, memory spikes, failed health checks) and fix themselves before customer impact.
Eliminates on-call fatigue by freeing Ops teams from the 3 AM 'restart the pod' or 'scale up' fire drills.
Improves reliability & SLO compliance. Automated correction keeps availability high without waiting for humans.
Stabilizes microservice ecosystems. In distributed systems, failures cascade. Self-healing stops the chain reaction.
Faster recovery = better user experience. Automated rollback / restart / resync is faster than human debugging.

Key Tools Involved in Self-Healing Systems

Health Detection (Identifying the “Wound”)
This is how the system knows something is wrong.
Correction / Healing
Once a wound is identified, the corrective mechanism kicks in!
Self-Healing Steps
What Should Be Done During & After Self-Healing
To ensure stability, engineering must treat self-healing events as signals, not noise.

📘 4.1. Record the healing event

Timestamp
Pod/container ID
Failure reason
Metrics snapshot
Healing action performed
Success/failure status
This becomes a goldmine for RCA later.

📊 4.2. Analyze pattern trends

Look for:

Pods restarting frequently
High memory or CPU usage patterns
Latency bursts postpartum deploys
Issues always after autoscaling
Node-specific failures

🔁 4.3. Continuous RCA
Self-healing fixes symptoms. We must still fix root cause:

Memory leaks
Deadlocks
Bad deployments
Faulty infrastructure
Misconfiguration
Resource starvation

📣 4.4. Alert human only when needed

A healthy pattern:

1–2 self-heals/day → OK
3 in a short window → alert
Continual restarts → critical alert

🔒 4.5. Prevent recurrence

This is where teams automate permanent fixes:

Add throttling / rate-limit
Add retries with jitter
Add circuit breakers
Improve autoscaling thresholds
Enforce resource limits
Improve deployment validation
Apply Helm rollback policies

Summary

Self-healing is not just “auto restart.”
It’s a full ecosystem:

Detect → Diagnose → Heal → Verify → Learn → Fix permanently

Jai Chinjo!