Bindra: طبقة بيانات تفاعلية حديثة لتطبيقات TypeScript
إذا كنت تبني واجهة أمامية بـ TypeScript وتعبت من ربط fetch مع المصفوفات المحلية والتحقق من البيانات وأدوات الحالة، فـ Bindra قد تكون الطبقة النظيفة التي كنت تبحث عنها. إنها مكتبة خفيفة بدون اعتمادات زمن تشغيل، تجعل إدارة البيانات متسقة — سواء كانت محلية، من REST APIs، أو آنية عبر WebSockets.
ما هي Bindra (وما ليست)
- بِندرا هي مكتبة تفاعلية لإدارة البيانات: تجمع بين
fetch، CRUD، التقسيم، الذاكرة المؤقتة، التحقق من البيانات، الوقت الحقيقي والأحداث في واجهة برمجة تطبيقات واحدة ومتسقة. - بِندرا ليست إطار عمل للواجهة الأمامية ولا بديلاً للحالة المشتركة. اعتبرها «عمودك الفقري» للبيانات، حيث تقوم مكوناتك (React، Vue، Svelte، أو vanilla) بالاشتراك فيها.
لماذا تُوثق بها؟
- جاهزة للإنتاج: أكثر من 155 اختباراً ناجحاً، TypeScript صارم، بدون اعتمادات وقت تشغيل.
- مناسبة للتطبيقات الحديثة: تقسيم فعال (offset/cursor)، تحديثات تفاؤلية، عمليات دفعية، ذاكرة مؤقتة، ودعم WebSocket.
- تجربة مطوّر مريحة: أحداث واضحة، observables/إشارات، وواجهة موحّدة للبيانات المحلية والبعيدة.
أفكار أساسية يومية
- مصادر بيانات تفاعلية: اشترك في التغييرات (البيانات، السجل الحالي، حالة التحميل) ودع واجهتك تتحدّث تلقائياً.
- CRUD موحّد:
fetch،create،update،delete— بنفس الشكل سواءً في الذاكرة أو عبر REST. - التصفّح والاستعلام: تحرّك بين السجلات (
next،prev،goto) واستعلم بفلاتر/ترتيب/حدود. - الأداء والموثوقية: ذاكرة مؤقتة TTL، محاولات إعادة، تحديثات تفاؤلية وعمليات دفعية لواجهة سلسة.
- الوقت الحقيقي: 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 آمن بالأنواع مع تقسيم صفحات، ذاكرة مؤقتة وعمليات دفعية.
- أدوات آنية: محادثات، محرّرات تشاركية، تحليلات حيّة.
- تطبيقات غنية بالبيانات: خلاصات، كتالوجات، تمرير لا نهائي بـ
fetchMore(). - نماذج وتحقق: قواعد لكل حقل، متحقّقات مخصّصة، وأخطاء مفيدة.
تعمل حيث أنت بالفعل
- محايدة الأطر: React/Vue/Svelte أو بدون إطار.
- TypeScript أولاً: جنريك وأنواع صارمة — IntelliSense ممتاز وسلامة عالية.
- بدون اعتمادات: حجم صغير، بناء سريع ومخاطر أقل.
تفاصيل إضافية
- التقسيم: نمطا offset وcursor؛
fetchPage()أوfetchMore()للتمرير اللامحدود. - الذاكرة المؤقتة: TTL، إبطال يدوي واستعلامات مدركة للذاكرة.
- التحديثات التفاؤلية: استجابة فورية مع تراجع تلقائي عند الخطأ.
- العمليات الدفعية:
createBatchوupdateBatchوdeleteBatchللأحمال الكبيرة. - الأحداث: نقاط دورة حياة (
created،updated،deleted،fetched،error) وأحداث الوقت الحقيقي. - الأمان: CSRF، تنظيف الحقول وأنواع أخطاء لمعالجة قوية.
من يستفيد من Bindra؟
- الفرق التي توحّد تدفقات البيانات عبر المكوّنات/الصفحات.
- المطوّرون الذين يريدون بيانات تفاعلية دون الارتباط بإطار حالة.
- من يبحث عن ضمانات TypeScript قوية ومنطق بيانات نظيف وقابل للاختبار.
البدء
bash
npm install bindra
# أو
pnpm add bindra - اقرأ دليل البدء السهل - اطّلع على API لـ `DataSource`، التقسيم، الذاكرة المؤقتة والآنية - جرّب الأمثلة (CRUD، الوقت الحقيقي، التقسيم، React/Vue)
الخلاصة
Bindra تضرب «نقطة حلوة»: API واحدة وآمنة بالأنواع لمنتصف عمل البيانات المعقد في الواجهات. إن كانت تطبيقاتك تجلب البيانات وتتحقق منها وتجزئها وتتفاعل مع التغييرات وأحياناً تحتاج إلى التحديث الآني — فهذه المكتبة تجعل كل ذلك متسقاً وممتعاً.