Advance Web Dev: DuckDB-Wasm & In-Browser Analytics

Historically, every interactive chart and data filter required sending a round-trip network request to a backend Python server. DuckDB-Wasm and Danfo.js revolutionize modern web development by executing high-speed SQL queries and DataFrame operations directly inside the client's browser via WebAssembly.

The Modern Zero-Backend Architecture

Hands-On Web Dev: Running SQL in Browser JavaScript with DuckDB-Wasm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>In-Browser Analytics with DuckDB-Wasm</title>
  <script type="module">
    import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/+esm';

    async function initDuckDB() {
      // 1. Select optimal WebAssembly bundle
      const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
      const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
      
      const worker = new Worker(bundle.mainWorker);
      const logger = new duckdb.ConsoleLogger();
      const db = new duckdb.AsyncDuckDB(logger, worker);
      await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
      
      const conn = await db.connect();
      console.log("DuckDB-Wasm initialized in client browser!");

      // 2. Query remote Parquet file via HTTP Range Request
      await conn.query(`
        CREATE TABLE sales AS 
        SELECT * FROM 'https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv'
      `);

      // 3. Execute analytical SQL aggregation instantly
      const result = await conn.query(`
        SELECT Postal, Population 
        FROM sales 
        WHERE Population > 5000000 
        ORDER BY Population DESC
      `);
      
      console.log("Browser Query Output:", result.toArray());
      document.getElementById("output").innerText = JSON.stringify(result.toArray(), null, 2);
    }
    initDuckDB();
  </script>
</head>
<body>
  <h2>DuckDB-Wasm Client-Side SQL Execution</h2>
  <pre id="output">Loading in-browser engine...</pre>
</body>
</html>