Bindra: una capa de datos reactiva moderna para apps TypeScript

Si construyes un frontend en TypeScript y te cansa unir fetch, arrays locales, validación y otra herramienta de estado, Bindra puede ser la pieza limpia que te faltaba. Es una librería ligera y sin dependencias que hace que la gestión de datos sea coherente — ya sea local, desde REST APIs o en tiempo real vía WebSockets.

Qué es Bindra (y qué no)

• Bindra es una librería de gestión de datos reactiva: centraliza fetch, CRUD, paginación, caché, validación, tiempo real y eventos en una sola API consistente.
• Bindra no es un framework UI ni un reemplazo del estado global. Piensa en él como la columna de datos a la que tus componentes (React, Vue, Svelte o vanilla) se suscriben.

Por qué confiar

• Listo para producción: más de 155 tests aprobados, TypeScript estricto, cero dependencias de runtime.
• Hecho para apps modernas: paginación eficiente (offset/cursor), actualizaciones optimistas, operaciones por lotes, caché y soporte WebSocket.
• Amigable para desarrolladores: eventos claros, observables/señales y una API unificada para datos locales y remotos.

Ideas clave del día a día

• Fuentes de datos reactivas: suscríbete a cambios (datos, registro actual, loading) y deja que tu UI se actualice sola.
• CRUD unificado: fetch, create, update, delete — idénticos ya uses arrays en memoria o un endpoint REST.
• Navegación y consultas: recorre registros (next, prev, goto) y consulta con filtros/orden/límites.
• Rendimiento y fiabilidad: caché TTL, reintentos, actualizaciones optimistas y operaciones por lotes para una UX fluida.
• Tiempo real: activa WebSocket con reconexión automática para colaboración o feeds en vivo.
• Validación y seguridad: reglas por campo, sanitización XSS y cabeceras CSRF — protecciones sensatas.

Vistazo rápido

import { DataSource } from 'bindra';

interface User { id: number; name: string; email: string; }

const users = new DataSource<User>({
  url: '/api/users',
  pagination: { enabled: true, pageSize: 20 },
  cache: { enabled: true, ttl: 300_000 },
  realtime: { enabled: true, url: 'wss://api.example.com/ws', reconnect: true },
});

await users.fetch();                 // Leer
const alice = await users.create({    // Crear
  name: 'Alice', email: 'alice@example.com'
});
await users.update(alice.id, { name: 'Alice Smith' }); // Actualizar
await users.delete(alice.id);                           // Borrar

const unsub = users.currentRecord.subscribe(u => console.log('Usuario actual:', u));
users.next(); // navegar
unsub();

Qué puedes construir

• Paneles admin: CRUD con tipos, paginación, caché y lotes.
• Herramientas en tiempo real: chats, editores colaborativos, analítica en vivo.
• SPAs intensivas en datos: feeds, catálogos, scroll infinito con fetchMore().
• Formularios y validación: reglas por campo, validadores personalizados y errores útiles.

Funciona donde ya estás

• Agnóstico de frameworks: React/Vue/Svelte o sin framework.
• TypeScript primero: genéricos y tipos estrictos — gran IntelliSense y seguridad.
• Cero dependencias: huella pequeña, builds rápidos y menos riesgos.

Un poco más de profundidad

• Paginación: modos offset y cursor; fetchPage() o fetchMore() para scroll infinito.
• Caché: TTL, invalidación manual y consultas conscientes de la caché.
• Actualizaciones optimistas: feedback instantáneo con rollback automático en error.
• Lotes: createBatch, updateBatch, deleteBatch para cargas pesadas.
• Eventos: hooks de ciclo de vida (created, updated, deleted, fetched, error) y eventos de tiempo real.
• Seguridad: CSRF, sanitización y tipos de error para manejo robusto.

¿Quién debería usar Bindra?

• Equipos que estandarizan flujos de datos entre componentes/páginas.
• Devs que quieren datos reactivos sin atarse a un framework de estado.
• Quien busque garantías fuertes de TypeScript y lógica de datos limpia y testeable.

Empezar

npm install bindra
# o
pnpm add bindra

• Guía de inicio amigable
• API para DataSource, paginación, caché y tiempo real
• Ejemplos (CRUD, tiempo real, paginación, React/Vue)

Conclusión

Bindra acierta en un punto dulce: una API única y tipada para el caos del manejo de datos en frontend. Si tu app obtiene, valida, pagina, reacciona a cambios y a veces necesita tiempo real — esta librería lo hace consistente y agradable.

• GitHub: https://github.com/mohamad-j/Bindra
• npm: https://www.npmjs.com/package/bindra
• Docs: https://bindra-docs.web.app