Bindra: современный реактивный слой данных для TypeScript‑приложений
Если вы пишете фронтенд на TypeScript и устали связывать fetch, локальные массивы, валидацию и очередной инструмент состояния, Bindra — аккуратный слой данных, которого не хватало. Лёгкая библиотека без зависимостей, делающая работу с данными цельной — локально, через REST API или по WebSocket в реальном времени.
Что такое Bindra (и что нет)
- Bindra — реактивная библиотека управления данными: объединяет
fetch, CRUD, пагинацию, кеш, валидацию, real‑time и события в единую, последовательную API. - Bindra — не UI‑фреймворк и не замена глобальному состоянию. Это «позвоночник» данных, на который подписываются ваши компоненты (React, Vue, Svelte, vanilla).
Почему стоит доверять
- Готово к продакшену: 155+ проходящих тестов, строгий TypeScript, нулевые runtime‑зависимости.
- Для современных приложений: эффективная пагинация (offset/cursor), оптимистичные обновления, пакетные операции, кеш и WebSocket.
- Удобно разработчику: понятные события, observables/сигналы и единая API для локальных и удалённых данных.
Ключевые идеи на каждый день
- Реактивные источники данных: подписывайтесь на изменения (данные, текущая запись,
loading) и пусть UI обновляется сам. - Единый CRUD:
fetch,create,update,delete— одинаково для памяти и REST. - Навигация и запросы: переходы по записям (
next,prev,goto) и запросы с фильтрами/сортировкой/лимитами. - Производительность и надёжность: TTL‑кеш, ретраи, оптимистичные обновления и пакетные операции.
- Real‑time: WebSocket с авто‑переподключением для коллаборации и живых лент.
- Валидация и безопасность: правила на поля, XSS‑санитизация, CSRF‑заголовки.
Быстрый взгляд
ts
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(); // чтение
const alice = await users.create({ // создание
name: 'Alice', email: 'alice@example.com'
});
await users.update(alice.id, { name: 'Alice Smith' }); // обновление
await users.delete(alice.id); // удаление
const unsub = users.currentRecord.subscribe(u => console.log('Текущий пользователь:', u));
users.next(); // навигация
unsub();Что можно строить
- Админ‑панели: типобезопасный CRUD, пагинация, кеш, пакеты.
- Real‑time‑инструменты: чаты, совместные редакторы, живая аналитика.
- Данных много? SPA‑ленты, каталоги, бесконечный скролл с
fetchMore(). - Формы и валидация: правила на поля, кастомные валидаторы и полезные ошибки.
Работает где вы уже есть
- Фреймворк‑агностично: React/Vue/Svelte или без фреймворка.
- TypeScript‑сначала: дженерики и строгие типы — отличный IntelliSense.
- Ноль зависимостей: маленький размер, быстрые сборки, меньше рисков.
Чуть глубже
- Пагинация: offset и cursor;
fetchPage()илиfetchMore()для бесконечного скролла. - Кеш: TTL, ручная инвалидация и «знающие кеш» запросы.
- Оптимистичные обновления: мгновенный отклик с авто‑откатом при ошибке.
- Пакеты:
createBatch,updateBatch,deleteBatchдля больших объёмов. - События: lifecycle‑хуки (
created,updated,deleted,fetched,error) и real‑time‑события. - Безопасность: CSRF, санитизация полей и типы ошибок для надёжной обработки.
Кому подойдёт Bindra
- Командам, которые стандартизируют потоки данных между компонентами/страницами.
- Разработчикам, которым нужна реактивность данных без привязки к фреймворку состояния.
- Тем, кому важны сильные гарантии TypeScript и чистая, тестируемая логика.
Старт
bash
npm install bindra
# или
pnpm add bindra- Дружелюбное «Начало работы»
- API для
DataSource, пагинации, кеша и real‑time - Примеры (CRUD, real‑time, пагинация, React/Vue)
Итог
Bindra попадает в «сладкую точку»: одна типобезопасная API для «сложной середины» фронтенд‑данных. Если ваше приложение получает, валидирует, пагинирует, реагирует на изменения и порой требует real‑time — библиотека делает это последовательно и приятно.