Cómo Construir una Aplicación con Enhance, el Framework Backend-First

Durante años, el mundo del desarrollo web estuvo dominado por los tres grandes frameworks frontend: React, Vue y Angular. Conocerlos era prácticamente el pase dorado para conseguir trabajo.

Aunque la evolución de las aplicaciones ligeras, el server-side rendering y la necesidad de evitar configuraciones pesadas como Webpack hicieron que la industria cambiara.

Hoy en día, los desarrolladores cuentan con múltiples opciones, y una de ellas es Enhance, un framework moderno que apuesta por un enfoque backend-first.

Esto significa que la lógica del servidor, los endpoints y la interacción con la base de datos son la prioridad, dejando el frontend en un segundo plano o integrándolo de manera opcional.

Si buscas prototipado rápido o trabajar en proyectos pequeños pero sólidos, Enhance es una elección ideal.

Enhance vs. Astro: Diferencias clave

Existen frameworks ligeros como Astro, cuyo enfoque principal es el frontend: generar sitios estáticos o páginas renderizadas en el servidor optimizadas para la entrega de HTML, CSS y JavaScript.

En cambio, Enhance se centra en:

• Diseñar la lógica del backend como punto de partida.
• Crear y gestionar API endpoints de forma sencilla.
• Integrarse con bases de datos sin configuración compleja.
• Permitir la conexión posterior con React, Vue o Angular si se requiere un frontend más sofisticado.

En resumen:

• Si tu prioridad es optimizar la interfaz y la carga del navegador, Astro es una gran opción.
• Si lo que buscas es desarrollar primero la lógica del servidor y tener un backend robusto desde el inicio, Enhance es la herramienta adecuada.

Construyendo una aplicación con Enhance y SQLite

Para entender cómo funciona Enhance, vamos a crear una pequeña aplicación de notas (CRUD: crear, leer, actualizar y eliminar) con persistencia en base de datos.

1. Crear el proyecto e instalar dependencias

mkdir notes-app
cd notes-app
npm init -y
npm install enhance better-sqlite3

2. Estructura de archivos

notes-app/
├─ db.js        # Conexión a SQLite
├─ api.js       # Funciones CRUD
├─ server.js    # Servidor HTTP
└─ index.html   # Interfaz básica

3. Base de datos (db.js)

const Database = require('better-sqlite3');
const db = new Database('myapp.db');

db.prepare(`
  CREATE TABLE IF NOT EXISTS notes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT,
    content TEXT
  )
`).run();

module.exports = db;

4. API con funciones CRUD (api.js)

const db = require('./db');

async function getNotes() {
  return db.prepare('SELECT * FROM notes').all();
}

async function addNote({ title, content }) {
  const info = db.prepare('INSERT INTO notes (title, content) VALUES (?, ?)').run(title, content);
  return { id: info.lastInsertRowid, title, content };
}

async function editNote({ id, title, content }) {
  db.prepare('UPDATE notes SET title = ?, content = ? WHERE id = ?').run(title, content, id);
  return { id, title, content };
}

async function deleteNote({ id }) {
  db.prepare('DELETE FROM notes WHERE id = ?').run(id);
  return { success: true };
}

module.exports = { getNotes, addNote, editNote, deleteNote };

5. Servidor HTTP (server.js)

const http = require('http');
const fs = require('fs');
const path = require('path');
const { getNotes, addNote, editNote, deleteNote } = require('./api');

const server = http.createServer(async (req, res) => {
  if (req.url === '/' && req.method === 'GET') {
    const html = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf-8');
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(html);
    return;
  }

  if (req.url === '/notes' && req.method === 'GET') {
    const notes = await getNotes();
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify(notes));
    return;
  }

  if (req.url === '/notes' && req.method === 'POST') {
    let body = '';
    req.on('data', chunk => body += chunk);
    req.on('end', async () => {
      const note = await addNote(JSON.parse(body));
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify(note));
    });
    return;
  }

  if (req.url.startsWith('/notes/') && req.method === 'PUT') {
    let body = '';
    req.on('data', chunk => body += chunk);
    req.on('end', async () => {
      const id = parseInt(req.url.split('/')[2]);
      const note = await editNote({ id, ...JSON.parse(body) });
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify(note));
    });
    return;
  }

  if (req.url.startsWith('/notes/') && req.method === 'DELETE') {
    const id = parseInt(req.url.split('/')[2]);
    await deleteNote({ id });
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ success: true }));
    return;
  }

  res.writeHead(404);
  res.end('Not found');
});

server.listen(3000, () => console.log('Servidor corriendo en http://localhost:3000'));

6. Interfaz simple (index.html)

Con HTML básico podemos añadir notas desde un formulario y verlas listadas en pantalla. Enhance permite conectar después frameworks frontend si quieres más interactividad.

Acceso directo a la base de datos

Gracias a SQLite, puedes administrar la base directamente desde la terminal:

sqlite3 myapp.db
.tables
SELECT * FROM notes;
UPDATE notes SET title = 'Nuevo título' WHERE id = 1;
DELETE FROM notes WHERE id = 2;
.quit

---

Conclusión

Enhance es un framework que prioriza lo esencial: la lógica del backend y la rapidez en el desarrollo. Sus ventajas principales son:

• Configuración mínima y sin boilerplate.
• Soporte nativo para JSON y APIs.
• Backend-first, con la posibilidad de añadir cualquier frontend después.
• Ideal para prototipos rápidos y proyectos ligeros pero escalables.

Si lo que buscas es empezar a construir sin perder tiempo en configuraciones innecesarias, Enhance puede ser la base de tu próximo proyecto.