ما هو البرمجة التفاعلية؟

البرمجة التفاعلية هي نمط برمجة يركز على تدفقات البيانات وانتشار التغيّر. بدلاً من كتابة شفرة تجلب البيانات وتعالجها خطوة بخطوة، تصف كيف يجب أن تتدفّق البيانات وتتحوّل مع مرور الوقت. عندما تتغيّر القيم، تُنقل التحديثات تلقائيًا عبر تطبيقك. فكر فيها كجدول بيانات: عندما تُحدّث الخلية A1، تُعيد جميع الخلايا التي تشير إلى A1 حسابها تلقائيًا. يبرع هذا النهج في التعامل مع الأحداث غير المتزامنة مثل تفاعلات المستخدم، استجابات HTTP، رسائل WebSocket، والمؤقّات.

كيف يعمل RxJS؟

RxJS (Reactive Extensions for JavaScript) يُطبق البرمجة التفاعلية عبر الملاحظات—كائنات تُصدر قيمًا مع مرور الوقت. المفاهيم الأساسية هي:

  1. الملاحظة (Observable): مصدر بيانات يُصدر قيمًا (مثل تدفق أحداث النقر أو استجابات API)
  2. المراقب (Observer): مستهلك يتفاعل مع القيم المُصدرة عبر ردود نداء (next، error، complete)
  3. الاشتراك (Subscription): الاتصال بين الملاحظة والمراقب
  4. المعاملات (Operators): دوال تُحوّل، تُفلتر، تُدمج أو تُعالج تدفقات البيانات
  5. المواضيع (Subjects): ملاحظات خاصة تعمل كمصدر بيانات ومستهلك في آنٍ واحد، مما يتيح البث المتعدد

تُنشئ خطوط أنابيب البيانات بربط المعاملات باستخدام طريقة pipe()، لتحوّل التدفقات الخام إلى الشكل الدقيق الذي يحتاجه تطبيقك.

وصف الأداة

RxJS Playground هو بيئة تجريبية تفاعلية تعمل في المتصفح لتجربة مفاهيم البرمجة التفاعلية في RxJS. اكتب ونفّذ شفرة RxJS مباشرة في المحرّر مع وصول كامل إلى مكتبة RxJS وجميع المعاملات. تُشغّل البيئة شفرتك تلقائيًا أثناء الكتابة (مع تأخير 500 ms)، وتعرض مخرجات وحدة التحكم في لوحة تشبه الطرفية. إنها مثالية لتعلم مفاهيم RxJS، نمذجة تحويلات البيانات، تصحيح خطوط أنابيب الملاحظات، واختبار تركيبات المعاملات دون الحاجة لإعداد بيئة تطوير.

الميزات

  • الوصول الكامل إلى مكتبة RxJS: جميع دوال الإنشاء (of، from، interval، fromEvent، إلخ) والمعاملات متوفرة
  • التنفيذ الفوري: تُنفّذ الشفرة تلقائيًا مع تأخير 500 ms أثناء الكتابة
  • مخرجات الطرفية: تُعرض سجلات وحدة التحكم، الأخطاء، والتحذيرات في لوحة مُصمّمة كطرفية
  • تمييز الصياغة: محرّر شفرة JavaScript مع تمييز صِفَة صحيح
  • عرض قيمة الإرجاع: تُسجَّل قيم التعبير النهائي تلقائيًا مع إشارة السهم
  • معالجة الأخطاء: رسائل خطأ واضحة لأخطاء الصياغة ومشكلات وقت التشغيل
  • وحدة المعاملات: وصول مباشر إلى rxjs/operators للتحويلات القائمة على pipe

أمثلة

إنشاء Observable أساسي:

const { of, from, interval } = rxjs;

// إصدار قيم فردية
of(1, 2, 3).subscribe((x) => console.log(x));

// تحويل مصفوفة إلى Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

استخدام المعاملات:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// النتيجة: 20, 40

دمج التدفقات:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

المواضيع للبث المتعدد:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

خط أنابيب التحويل:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

الوحدات المتاحة

rxjs (الوحدة الرئيسية):

  • الإنشاء: of، from، interval، timer، range، generate، defer، iif
  • الجمع: merge، concat، combineLatest، forkJoin، zip، race
  • المواضيع: Subject، BehaviorSubject، ReplaySubject، AsyncSubject
  • الأدوات المساعدة: firstValueFrom، lastValueFrom، isObservable

operators (المعاملات القابلة للأنابيب):

  • التحويل: map، pluck، scan، reduce، buffer، switchMap، mergeMap، concatMap
  • الفلترة: filter، take، takeUntil، skip، debounceTime، throttleTime، distinctUntilChanged
  • الجمع: withLatestFrom، combineLatestWith، mergeWith، startWith
  • معالجة الأخطاء: catchError، retry، retryWhen
  • الأدوات المساعدة: tap، delay، timeout، toArray، share، shareReplay

حالات الاستخدام

  • تعلم RxJS: فهم مفاهيم الملاحظة من خلال التجربة العملية
  • نمذجة تدفقات البيانات: تصميم واختبار خطوط أنابيب تفاعلية قبل التنفيذ
  • تصحيح المعاملات: عزل والتحقق من سلوك المعاملات بأمثلة مبسطة
  • التحضير للمقابلات: ممارسة أنماط البرمجة التفاعلية والمسائل الشائعة
  • العروض التعليمية: إظهار المفاهيم التفاعلية بأمثلة حية وتفاعلية