Bindra: A Modern, Reactive Data Layer for TypeScript Apps

If you’re building a TypeScript frontend and you’re tired of wiring together fetch calls, local arrays, validation, and yet another state tool, Bindra might be the clean middle layer you’ve been missing. It’s a lightweight, zero-dependency library that makes data management feel coherent — whether your data lives locally, comes from REST APIs, or streams over WebSockets.

What Bindra Is (and Isn’t)

• Bindra is a reactive data management library: it centralizes data fetching, CRUD, pagination, caching, validation, real-time, and events into one consistent API.
• Bindra isn’t a full UI framework or a global state store replacement. Think of it as the data backbone that your components (React, Vue, Svelte, or vanilla) subscribe to.

Why Trust It?

• Production-ready: 155+ passing tests, strict TypeScript, zero runtime dependencies.
• Built for modern apps: efficient pagination (offset/cursor), optimistic updates, batch operations, caching, and WebSocket support.
• Developer-friendly: clear events, observables/signals, and a unified API for local and remote data.

Core Ideas You’ll Use Daily

• Reactive data sources: subscribe to changes (data, current record, loading) and let your UI update itself.
• Unified CRUD: fetch, create, update, delete — identical whether you’re using in-memory arrays or hitting a REST endpoint.
• Navigation & query: move through records (next, prev, goto) and query with filters/sort/limits.
• Performance & reliability: TTL caching, retries, optimistic updates, and batch operations to keep UX snappy.
• Real-time: enable WebSocket updates with auto-reconnect for collaborative or live feeds.
• Validation & security: field validation, XSS sanitization, CSRF headers — sensible guardrails built in.

Quick Glimpse

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 },
});

// Read
await users.fetch();

// Create
const alice = await users.create({ name: 'Alice', email: 'alice@example.com' });

// Update/Delete
await users.update(alice.id, { name: 'Alice Smith' });
await users.delete(alice.id);

// Reactivity
const unsubscribe = users.currentRecord.subscribe(u => console.log('Current user:', u));
users.next(); // navigate records
unsubscribe();

What You Can Build

• Admin dashboards: type-safe CRUD with pagination, caching, and batch ops.
• Real-time tools: chats, collaborative editors, live analytics with WebSocket updates.
• Data-heavy SPAs: feeds, product catalogs, infinite scroll with fetchMore().
• Forms and validation: field-level rules, custom validators, and useful errors.

Works Everywhere You Already Are

• Framework-agnostic: React/Vue/Svelte or no framework at all.
• TypeScript-first: generics and strict types — great IntelliSense and safety.
• Zero dependencies: small footprint, fast builds, fewer supply-chain worries.

A Bit More Depth

• Pagination: Offset and cursor modes; fetchPage() or fetchMore() for infinite scroll.
• Caching: TTL-based, manual invalidation, and cache-aware queries.
• Optimistic updates: instant UI feedback with automatic rollback on error.
• Batch operations: createBatch, updateBatch, deleteBatch for heavy workloads.
• Events: lifecycle hooks like created, updated, deleted, fetched, error, plus real-time events.
• Security: CSRF headers, field sanitization, and error types for robust handling.

Who Should Use Bindra?

• Teams standardizing data flows across components/pages.
• Devs who want reactive data without tying themselves to a state framework.
• Anyone who wants strong TypeScript guarantees and clean, testable data logic.

Getting Started

npm install bindra
# or
pnpm add bindra

• Read the friendly Getting Started guide
• Explore API docs for DataSource, pagination, caching, and real-time
• Try the examples (CRUD, real-time, pagination, React/Vue)

Final Thoughts

Bindra hits a sweet spot: a single, type-safe API for the messy middle of frontend data work. If your app fetches data, validates it, paginates it, reacts to changes, and sometimes needs live updates — this library keeps it all consistent and pleasant. Ship faster, with fewer custom utilities and less glue code.

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