Reactive Programming

‫اــلبرـمـجة اــلتفاـعلية‬
DevFest Najaf 2022

Wisam Naji
Lead Coding Trainer @ Re:Coded
 👋 ‫مرحبا‬
‫اني وسام ناجي‬

wisamnaji

@wissonaji
‫ايضاح‬

‫البرمجة التفاعلية مفهوم وطريقة برمجية كبيرة جدا‬

‫ما سنفعله هو مجرد مقدمة بسيطة للنموذج البرمجي…‬
‫انا ال ادعي الخبرة الكاملة بالموضوع‬
 ‫تخيل االخوين‬
a&b

var a = 10;
var b = a + 1;
 ‫تخيل االخوين‬
a&b

var a = 10;
var b = a + 1;

b depends on a
 ‫تخيل االخوين‬
‫‪a&b‬‬

‫;‪var a = 10‬‬
‫;‪var b = a + 1‬‬

‫‪b‬‬ ‫‪depends on‬‬ ‫‪a‬‬

‫‪ a‬؟؟؟‬ ‫شيصير اذا غيرنا‬

 ‫تخيل االخوين‬
a&b

var a = 10;
var b = a + 1;
a = 11;
 ‫تخيل االخوين‬
‫‪a&b‬‬

‫;‪var a = 10‬‬
‫;‪var b = a + 1‬‬
‫;‪a = 11‬‬

‫‪ b‬؟؟؟‬ ‫ما مصير‬

 ‫تخيل االخوين‬
a&b

var a = 10;
var b = a + 1;
a = 11;

log(b) // 11
 ‫تخيل االخوين‬
‫‪a&b‬‬

‫;‪var a = 10‬‬
‫;‪var b = a + 1‬‬
‫;‪a = 11‬‬

‫‪log(b) // 11‬‬

‫العملية غير تفاعلية ألن من غيرنا ‪ a‬ما حسبنا ‪ b‬مرة ثانية‬

 ‫تخيل االخوين‬
a&b

var a = 10;
var b = a + 1;
a = 11;
b = a + 1;
log(b) // 12
 ‫تخيل االخوين‬
‫‪a&b‬‬

‫الزم‬
‫;‪var a = 10‬‬

‫ن‬
‫عيد‬
‫;‪var b = a + 1‬‬

‫اال‬
‫;‪a = 11‬‬

‫حت‬
‫;‪b = a + 1‬‬

‫سا‬
‫ب‬
‫‪log(b) // 12‬‬

‫لق‬
‫يم‬
‫ة‪b‬‬
 ‫هسه خل نتخيل اكو عملية‬
‫‪Operator‬‬

‫=>‬
‫نسميهة ربط المصير او ‪Destiny Operator‬‬

‫مثال‬

‫;‪var b <= a * 7‬‬

‫خل نربط مصير ‪ b‬و ‪ a‬الى االبد‬
‫;‪var a = 10‬‬
‫;‪var b <= a + 1‬‬
‫خل نربط مصير ‪ b‬و ‪ a‬الى االبد‬
‫;‪var a = 10‬‬
‫;‪var b <= a + 1‬‬
‫;‪a = 20‬‬
 ‫خل نربط مصير ‪ b‬و ‪ a‬الى االبد‬
‫;‪var a = 10‬‬
‫;‪var b <= a + 1‬‬
‫;‪a = 20‬‬

‫بهالعملية (‪ )b‬راح تتفاعل تلقائيا وتتحدث قيمتها داخليا‬

 ‫لو‬
‫خل نربط مصير ‪ b‬و ‪ a‬الى االبد‬
‫ك‬
‫ل‬ ‫ن‬
‫;‪var a = 10‬‬ ‫ل س‬‫أل‬
‫هذ ف‬
‫;‪ 1‬ل‪var b <= a +‬‬
‫تت ;‪a = 20‬‬ ‫م‬ ‫لا‬ ‫ا‬
‫و‬ ‫ط‬ ‫س‬‫م‬
‫ا‬ ‫ر‬ ‫و‬‫ت‬
‫ل‬ ‫ي‬ ‫ى‬
‫‪Assert.AreEqual(21,‬‬ ‫)‪b‬‬ ‫‪//‬‬ ‫‪true‬‬
‫ة‬ ‫غ‬ ‫ت‬ ‫ح‬
‫ر‬‫ب‬ ‫ا‬ ‫ى‬
‫ج‬ ‫م‬ ‫ن‬ ‫ال‬
‫ة‬‫ي‬
‫بهالعملية (‪ )b‬راح تتفاعل تلقائيا وتتحدث قيمتها داخليا‬
‫ بشنو تذكرنا هاي العملية؟؟‬،‫مع ذلك‬
var a = 10;
var b <= a + 1;
a = 20;

Assert.AreEqual(21, b) // true
‫مع ذلك‪ ،‬بشنو تذكرنا هاي العملية؟؟‬
‫مع ذلك‪ ،‬بشنو تذكرنا هاي العملية؟؟‬
‫البرمجة التفاعلية‬
‫البرمجة التفاعلية‬
‫البرمجة التفاعلية‬
‫البرمجة التفاعلية‬
 ‫البرمجة التفاعلية‬

Reactive programming is an emerging discipline that

combines concurrency and event-based and asynchronous systems.
Wikipedia

️♂‍‍
️♂ ‫تعريف مرعب ادري بس الزم نحط تعريف مو؟‬
‫يقال ان اصعب ما في البرمجة التفاعلية‬

‫هو صعوبة التفكير بالتفاعل‬

‫‪THINKING IN REACTIVE‬‬
 ‫لفهم البرمجة التفاعلية‬
‫)‪Reactive Programming (RP‬‬

‫يجب علينا اوال فهم بعض االنماط البرمجية االساسية‬

‫البرمجة االمرية‬ ‫البرمجة التصريحية‬

‫‪Imperative programming‬‬ ‫‪Declarative programming‬‬

‫…‬ ‫البرمجة االجرائية‬ ‫البرمجة الوظيفية‬ ‫…‬

‫‪Procedural programming‬‬ ‫‪Functional programming‬‬
 )‫على سبيل المثال (تزامني‬
Synchronous

https://gist.github.com/wisammechano/034269171b0339955a3af6265bc3e884

Example uses RxJS Reactive Library for JavaScript

 ‫واالن تخيل المثل بشكل غير تزامني‬
Asynchronous

https://gist.github.com/wisammechano/a2c00d5ba6d6a6c1504fb93970aed24e

Example uses RxJS Reactive Library for JavaScript

 ‫‪Asynchronous Data Stream‬‬
‫البرمجة التفاعلية هو تحويل كل انواع البيانات الى دفق غير متزامن من البيانات‬

‫ممكن مراقبتها ومن ثم التعامل معها بالتسلسل الزمني عند حضورها‬

‫الزمن‬
‫‪Time‬‬
‫)‪Time-varying values (Events‬‬

‫‪Error‬‬
‫خطأ‬
‫احداث مختلفة (بيانات) مثال‬
‫‪Event Stream Complete‬‬ ‫احداثيات مؤشر الماوس بشكل ‪number‬‬
‫مؤشر نهاية دفق االحداث‬
 ‫‪Observable‬‬
‫المرا َقب‬
‫ُ‬
‫‪Collection‬‬
‫كل البيانات القابلة للتغيير عبر‬ ‫مجموعة من البيانات واالحداث التي‬
‫الزمن ممكن تتبعها او مراقبتها‬ ‫تدفع بالتوالي‬
‫‪Pushed‬‬

‫كل دفق البيانات هي‬

‫مجموعات ممكن مراقبتها‬
 ‫‪Stream‬‬
‫‪Notifications‬‬
‫مجموعة من االشعارات المتسلسلة‬
‫والمرتبة زمنيا الحداث مرتبطة‬ ‫المفهوم االساسي في البرمجة‬
‫‪Connected Events‬‬ ‫التفاعلية‬

‫‪t4‬‬ ‫‪t3‬‬ ‫‪t2‬‬ ‫‪t1‬‬

‫الزمن‬
‫‪Time‬‬

‫‪Stream‬‬
‫يمكن ربط عدد مفتوح من‬
‫المراقبين لكل دفق بياني‬
‫‪Observers‬‬
 V1
observer(v1)
Observer
‫المرا ِقب‬
ُ
Data Stream Function
observer(v2)
‫دالة تراقب التدفق البياني‬
V2

‫يتم استدعاء هذه الدالة كلما يتم‬ ‫وتتعامل معه‬

V3

observer(v3)

observer(v4)
‫استقبال قيمة جديدة‬
V4

// Runs automagically on change

= observer(10)

observer(err)
const observer = v => v + 1;

observer(done)
Time
‫الزمن‬
 Subscription
‫االشتراك‬
Observer Object

‫وعن طريقه يمكننا فصل‬ ‫بالمرا َقب‬

ُ ‫ب‬‫ق‬ِ ‫را‬‫الم‬
ُ ‫يربط‬ ‫عنصر‬
Observable (or Stream)
‫االشتراك والغاء المراقبة‬

const observer = v => v + 1;

const subscription = stream$.subscribe(observer)

// Later when not needed, free the resources

subscription.unsubscribe()
 ReactiveX
Streams ‫مكتـبة بعدة لغات برمجية تحتوي ما ذكر واكثر ألنشاء ومتابعة الــ‬

Also: For JavaScript => npm install rxjs

• Java: RxJava https://rxjs.dev/
• C#: Rx.NET https://www.learnrxjs.io/
• C#(Unity): UniRx
Example
• Lua: RxLua
import { from, of } from 'rxjs';
• Python: RxPY
//emit array as a sequence of values
• Kotlin: RxKotlin
const arraySource = from([1, 2, 3, 4, 5]);
• Swift: RxSwift const tupleSource = of(1, 2, 3, 4, 5);
//output: 1,2,3,4,5
• PHP: RxPHP
const subscribe = arraySource.subscribe(val => console.log(val));
• Dart: RxDart
//output: 1,2,3,4,5
• RxAndroid
const subscribe = tupleSource.subscribe(val => console.log(val));
• …
 ReactiveX
Streams ‫مكتـبة بعدة لغات برمجية تحتوي ما ذكر واكثر ألنشاء ومتابعة الــ‬

Also: For JavaScript => npm install rxjs

• Java: RxJava https://rxjs.dev/
• C#: Rx.NET https://www.learnrxjs.io/
• C#(Unity): UniRx
Example
• Lua: RxLua
import { from, of } from 'rxjs';
• Python: RxPY
//emit array as a sequence of values
• Kotlin: RxKotlin
const arraySource = from([1, 2, 3, 4, 5]); Operators (Creation)
• Swift: RxSwift const tupleSource = of(1, 2, 3, 4, 5);
//output: 1,2,3,4,5
• PHP: RxPHP
const subscribe = arraySource.subscribe(val => console.log(val));
• Dart: RxDart
//output: 1,2,3,4,5
• RxAndroid
const subscribe = tupleSource.subscribe(val => console.log(val));
• …
 Because
Collections have operations

• Querying (filtering) ‫تـــرشيحـ‬ • Joining (‫)دـمـجـ وـجـمعـ‬

• Transforming (mapping)‫تــــحويـل‬ • Flatening (‫)تــــسـوية‬
• Accumulating (reducing) ‫تـــرـاـكـمـ‬ • ‫…والـــــخ‬
 ‫على سبيل المثال‬
‫البسيط‬

import { from, filter, map } from 'rxjs';

const source$ = from([1, 2, 3, 4, 5]);

source$.pipe(
filter(v => v > 2),
map(v => v * 2)
)

// output: 6, 8, 10
source$.subscribe(val => console.log(val));
 ‫وألنها غير تزامنية‬
)‫واالحداث فيها ترتيب زمني (عامل وقتي‬
‫يتوفر لنا ايضا بعض العمليات الزمنية‬
• Debouncing
import { fromِEvent, debounceTime, switchMap } from 'rxjs';
• Throttling const input$ = fromEvent(document.getElementById(‘searchInpt’), 'keyup');

• Racing // wait .5s between keyups before hitting search api

input$.pipe(
• Delaying debounceTime(500),
map(e => e.target.value),
switchMap(keyword => fetchSearch(keyword))
• Switching )

• … // output: 6, 8, 10
input$.subscribe(val => console.log(val));
‫منو يستخدم هذا النموذج؟‬
 ‫االيجابيات‬

‫• كتابة كود اقل‬

‫• كتابة كود اوضح (فصل السبب عن النتيجة)‬
‫• قابلية الغاء العمليات الغير تزامنية (‪ )Asycnchronous Code Cancellation‬بسهولة‬
‫• ‪ Lazy Code‬او تــــنفيذ اــلكود عند اــلحاجة‬
‫• توحيد لنمط الكود ‪Single Style Of Code‬‬
‫• اداء احسن‬
 ‫السلبيات‬

‫• التفكير االجرائي اسهل‬

‫• اغلب االحيان يتوجب استخدام مكتبات خارجية‬
‫• صعوبة في تعقب المشاكل ‪Debugging‬‬
‫• تسريب للذاكرة في حال نسيان فصل االشتراك ‪no unsubscribe => memory leaks‬‬
‫• توحيد لنمط الكود ‪Single Style Of Code‬‬
‫• صعوبة التعلم مبدئيا‬
 ‫شوكت اكدر استخدم هذا النموذج‬
• Frontend Web Dev
• Backend Web Dev
• Mobile Dev
• Game Dev
• Embedded Devices & IoT
• Services Messaging
• API Gateways
• Load Balancers
• …
 ‫انتهى‬
‫شكرا لحسنـ لالصغاء‬

‫أسئلة ؟‬