data-driven-layouts

Data-Driven Layouts

The Problem

Template-driven layouts require code changes for structural updates:

// Bad: structure embedded in code
function renderDashboard() {
  return `
    <div class="section">
      <h2>Users</h2>
      ${renderUserTable()}
    </div>
    <div class="section">
      <h2>Revenue</h2>
      ${renderRevenueChart()}
    </div>
  `;
}
// Adding a new section = code change

The Solution

Define layout structure as data. Rendering is generic.

// layouts/dashboard.json
{
  "sections": [
    { "id": "users", "title": "Users", "component": "userTable" },
    { "id": "revenue", "title": "Revenue", "component": "revenueChart" },
    { "id": "alerts", "title": "Alerts", "component": "alertList" }
  ]
}

// Generic renderer
const components = {
  userTable: () => renderUserTable(),
  revenueChart: () => renderRevenueChart(),
  alertList: () => renderAlertList()
};

function renderDashboard(layout) {
  return layout.sections.map(section => `
    <div class="section" id="${section.id}">
      <h2>${section.title}</h2>
      ${components[section.component]()}
    </div>
  `).join('');
}

// Usage
const layout = require('./layouts/dashboard.json');
const html = renderDashboard(layout);

Benefits

• Add sections by editing JSON, not code
• Reorder by changing array order
• Non-developers can modify layouts
• Easier to A/B test different layouts

Schema Example

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "sections": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["id", "title", "component"],
        "properties": {
          "id": { "type": "string" },
          "title": { "type": "string" },
          "component": { "type": "string" },
          "props": { "type": "object" }
        }
      }
    }
  }
}

Verification

1. Adding a section = only JSON change
2. Unknown component throws clear error
3. Layout validates against schema