DependencyStats.astro

---
import { getCollection } from 'astro:content'

const frameworkEntries = await getCollection('frameworks')
const devtimeEntries = await getCollection('devtime')
const runtimeEntries = await getCollection('runtime')

const frameworkMeta = frameworkEntries.map((entry) => entry.data)
const starterStats = devtimeEntries.map((entry) => entry.data)
const ssrStats = runtimeEntries.map((entry) => entry.data)

const BYTES_PER_KB = 1024
const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB

function formatBytesToMB(bytes: number): string {
  const mb = bytes / BYTES_PER_MB
  return `${mb.toFixed(2)}MB`
}
---

<div id="container">
  <main>
    <section id="hero">
      <h1>Framework Tracker</h1>
      <p class="description">
        For a full list of what we plan to track see{' '}
        <a
          href="https://github.com/e18e/framework-tracker/blob/main/initial-comparison-list.md"
          target="_blank"
          rel="noopener noreferrer"
          class="roadmap-link"
        >
          roadmap
        </a>.
      </p>

      <p class="description">
        Stats are currently in active development and may change as we refine
        our methodology and testing process.
      </p>

      <h2>Framework Overview</h2>

      <p class="methodology">
        Rendering capabilities supported by each framework, their recommended
        default approach, and bundler.
      </p>

      <div class="table-wrapper">
        <table aria-label="Framework rendering capabilities">
          <thead>
            <tr>
              <th scope="col">Framework</th>
              <th scope="col">SPA</th>
              <th scope="col">MPA</th>
              <th scope="col">SSG</th>
              <th scope="col">Recommended</th>
              <th scope="col">Default Bundler</th>
              <th scope="col">Other Bundlers</th>
            </tr>
          </thead>
          <tbody>
            {
              frameworkMeta.map((framework) => (
                <tr>
                  <td class="framework-name">{framework.name}</td>
                  <td>{framework.supportsSPA ? 'Y' : 'N'}</td>
                  <td>{framework.supportsMPA ? 'Y' : 'N'}</td>
                  <td>
                    {framework.supportsSSG === undefined
                      ? '?'
                      : framework.supportsSSG
                        ? 'Y'
                        : 'N'}
                  </td>
                  <td>{framework.recommended}</td>
                  <td>{framework.bundler}</td>
                  <td>{framework.otherBundlers?.join(', ') || '-'}</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>

      <h2>Dev Time Performance</h2>

      <p class="methodology">
        Measured using pnpm on GitHub Actions (ubuntu-latest, Node 24) based on
        the starter project set up by each frameworks CLI.
      </p>

      <div class="table-wrapper">
        <table aria-label="Dependency counts by framework">
          <thead>
            <tr>
              <th scope="col">Framework</th>
              <th scope="col">Prod Deps</th>
              <th scope="col">Dev Deps</th>
              <th scope="col">Size</th>
              <th scope="col">Size (Prod Only)</th>
              <th scope="col">Graph</th>
            </tr>
          </thead>
          <tbody>
            {
              starterStats.map((framework) => (
                <tr>
                  <td class="framework-name">{framework.name}</td>
                  <td>{framework.prodDependencies}</td>
                  <td>{framework.devDependencies}</td>
                  <td>{formatBytesToMB(framework.nodeModulesSize)}</td>
                  <td>{formatBytesToMB(framework.nodeModulesSizeProdOnly)}</td>
                  <td>
                    <a
                      href={`https://npmgraph.js.org/?q=https://github.com/e18e/framework-tracker/blob/main/packages/${framework.package}/package.json`}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="graph-link"
                    >
                      View
                    </a>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>

      <div class="table-wrapper">
        <table aria-label="Build and install times by framework">
          <thead>
            <tr>
              <th scope="col">Framework</th>
              <th scope="col">Avg Install</th>
              <th scope="col">Min Install</th>
              <th scope="col">Max Install</th>
              <th scope="col">Cold Build</th>
              <th scope="col">Warm Build</th>
              <th scope="col">Build Output</th>
            </tr>
          </thead>
          <tbody>
            {
              starterStats.map((framework) => (
                <tr>
                  <td class="framework-name">{framework.name}</td>
                  <td>{(framework.avgInstallTimeMs / 1000).toFixed(2)}s</td>
                  <td>{(framework.minInstallTimeMs / 1000).toFixed(2)}s</td>
                  <td>{(framework.maxInstallTimeMs / 1000).toFixed(2)}s</td>
                  <td>{(framework.coldBuildTimeMs / 1000).toFixed(2)}s</td>
                  <td>{(framework.warmBuildTimeMs / 1000).toFixed(2)}s</td>
                  <td>{formatBytesToMB(framework.buildOutputSize)}</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>

      <h2>Runtime Performance</h2>

      <h3>SSR Performance</h3>

      <p class="methodology">
        Measured on GitHub Actions (ubuntu-latest, Node 24) using custom SSR
        benchmark apps.
      </p>

      <div class="table-wrapper">
        <table aria-label="SSR performance by framework">
          <thead>
            <tr>
              <th scope="col">Framework</th>
              <th scope="col">Ops/sec</th>
              <th scope="col">Avg Latency</th>
              <th scope="col">Body Size</th>
              <th scope="col">Duplication</th>
            </tr>
          </thead>
          <tbody>
            {
              ssrStats.map((framework) => (
                <tr>
                  <td class="framework-name">{framework.name}</td>
                  <td>{framework.ssrOpsPerSec?.toLocaleString()}</td>
                  <td>{framework.ssrAvgLatencyMs}ms</td>
                  <td>{framework.ssrBodySizeKb}kb</td>
                  <td>{framework.ssrDuplicationFactor}x</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>

      <div class="methodology-notes">
        <h4>Methodology</h4>
        <ul>
          <li>
            Each framework renders a table of 1000 rows with two UUID columns
          </li>
          <li>
            Mock HTTP requests bypass TCP overhead for accurate rendering
            measurement
          </li>
          <li>
            Data is loaded asynchronously to simulate real-world data fetching
          </li>
          <li>
            Duplication factor indicates how many times each UUID appears in the
            response (1x = optimal, 2x = includes hydration payload)
          </li>
          <li>
            Benchmarks run for 10 seconds using <a
              href="https://github.com/tinylibs/tinybench"
              target="_blank"
              rel="noopener noreferrer">tinybench</a
            >
          </li>
          <li>
            Inspired by <a
              href="https://github.com/eknkc/ssr-benchmark"
              target="_blank"
              rel="noopener noreferrer">eknkc/ssr-benchmark</a
            >
          </li>
        </ul>
      </div>
    </section>
  </main>
</div>

<style>
  #container {
    font-family:
      'Inter',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Fira Sans',
      'Droid Sans',
      'Helvetica Neue',
      sans-serif;
    min-height: 100vh;
    color: #213547;
    background-color: #ffffff;
    line-height: 1.5;
  }

  main {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
  }

  #hero {
    width: 100%;
    max-width: 900px;
  }

  h1 {
    font-size: 32px;
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    font-weight: 700;
    background: linear-gradient(120deg, #7cb560 0%, #cf8c3c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  h2 {
    font-size: 20px;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
    color: #213547;
  }

  h3 {
    font-size: 16px;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
    color: #213547;
  }

  .description {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1em;
    max-width: 700px;
  }

  .methodology {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 0.5em;
  }

  .table-wrapper {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 2em;
  }

  .methodology-notes {
    margin-top: 1.5em;
    padding: 1em 1.25em;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }

  .methodology-notes h4 {
    margin: 0 0 0.75em 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
  }

  .methodology-notes ul {
    margin: 0;
    padding-left: 1.25em;
    font-size: 13px;
    color: #6b7280;
  }

  .methodology-notes li {
    margin-bottom: 0.4em;
  }

  .methodology-notes li:last-child {
    margin-bottom: 0;
  }

  .methodology-notes a {
    color: #c37822;
    text-decoration: none;
  }

  .methodology-notes a:hover {
    text-decoration: underline;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
  }

  thead {
    background: linear-gradient(120deg, #7cb560 0%, #cf8c3c 100%);
    color: white;
  }

  th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  th:not(:first-child) {
    text-align: center;
  }

  td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  tbody tr:hover {
    background: rgba(207, 140, 60, 0.05);
  }

  .framework-name {
    font-weight: 500;
    color: #213547;
  }

  td:not(.framework-name) {
    text-align: center;
    color: #6b7280;
  }

  .graph-link,
  .roadmap-link {
    color: #c37822;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
  }

  .graph-link:hover,
  .roadmap-link:hover {
    color: #cf8c3c;
    text-decoration: underline;
  }

  /* Dark mode styles */
  :global(html.dark) #container {
    color: #ffffffde;
    background-color: #1a1a1a;
  }

  :global(html.dark) h2 {
    color: #ffffffde;
  }

  :global(html.dark) h3 {
    color: #ffffffde;
  }

  :global(html.dark) .description {
    color: #ffffffa6;
  }

  :global(html.dark) table {
    background: #1a1a1a;
    border-color: #2e2e2e;
  }

  :global(html.dark) td {
    border-bottom-color: #2e2e2e;
  }

  :global(html.dark) tbody tr:hover {
    background: rgba(124, 181, 96, 0.1);
  }

  :global(html.dark) .framework-name {
    color: #ffffffde;
  }

  :global(html.dark) td:not(.framework-name) {
    color: #ffffffa6;
  }

  :global(html.dark) .framework-links li {
    color: #ffffffde;
  }

  :global(html.dark) .methodology {
    color: #ffffffa6;
  }

  :global(html.dark) .methodology-notes {
    background: #242424;
    border-color: #2e2e2e;
  }

  :global(html.dark) .methodology-notes h4 {
    color: #ffffffde;
  }

  :global(html.dark) .methodology-notes ul {
    color: #ffffffa6;
  }

  @media screen and (max-width: 768px) {
    main {
      padding: 20px 16px;
    }

    h1 {
      font-size: 26px;
    }

    h2 {
      font-size: 18px;
    }

    .description {
      font-size: 15px;
    }

    th,
    td {
      padding: 12px 8px;
      font-size: 13px;
    }

    th {
      font-size: 12px;
    }
  }
</style>