DevGuide 🇵🇸

🎯 فاهم يعني إيه Observer Pattern؟
.
.
"إزاي أخلي الأجزاء المختلفة في النظام (system) تتواصل مع بعض وتعرف إن فيه تغيير حصل… من غير ما أربط كل حاجة ببعضها وأخلي الكود معقد ومليان dependencies؟"

الموضوع يبان بسيط في الأول، بس أول ما تدخل في مشروع كبير، تلاقي الدنيا بقت spaghetti code… كل function مربوطة بالتانية، وأي تعديل صغير ممكن يبوظلك أجزاء تانية في الـ app.

في هندسة البرمجيات، فيه بعض الحلول والطرق متفق عليها بتخلّي السيستم modular، سهل الصيانة، وسهل التوسع. الحلول دي بنسميها Design Patterns.

واحد من أهم وأشهر الـ patterns اللي بيتكرر وجوده في مجالات مختلفة هو:
Observer Pattern

الـ pattern ده فكرته عامة جدًا، وممكن تلاقيه مستخدم في الـ events أو real-time updates أو distributed systems، أو حتى في أي application محتاج يتعامل مع تغييرات في state ويشاركها مع أجزاء تانية...

———

🟢 الفكرة ببساطة:

الـ Observer Pattern بيشتغل كده:

- عندك Subject: ده الـ object اللي بيمتلك الـ state.
- عندك Observers: مجموعة objects عايزين يتبلغوا بأي تغيير في الـ state.

أول ما الـ Subject يتغير، يبعت notification لكل Observers، وكل واحد فيهم يعمل update لنفسه بطريقته.
المهم إن الـ Subject مش محتاج يعرف التفاصيل عن كل Observer… مجرد يقول "أنا اتغيرت" وخلاص.

———

🟢 مثال من أرض الواقع:

تخيل إنك عامل subscribe لقناة على YouTube:

- القناة = Subject
- المشتركين = Observers

أول ما القناة تنزل فيديو جديد، يوتيوب بيبعت Notification للكل. القناة مش بتسأل "فلان عايز notification إزاي"… هي بس بتبعت والكل يتصرف.

———

🟢 ليه الـ Observer Pattern مهم؟

1- بيقلل الـ tight coupling: الـ Subject مش بيعرف التفاصيل عن Observers.
2- بيكون فيه flexibility: تقدر تضيف أو تشيل Observers بسهولة.
3- بيسهل maintenance: أي تعديل بيبقى localized، مش هيبوظ باقي الـ code.

———

في React: لما الـ state تتغير، الـ component تعمل re-render… ده نفس فكرة الـ Observer.

في Angular (RxJS): الـ Observables streams هي abstraction قوية لفكرة الـ Observer.

في JavaScript Events: كل ما تعمل element.addEventListener، أنت فعليًا بتسجل Observer.

———

وفقكم الله لكل خير 🌿

❤10

www.tgoop.com/the_developer_guide/5665

1.45K viewsSep 22 at 18:07

🎯 فاهم يعني إيه Observer Pattern؟
.
.
"إزاي أخلي الأجزاء المختلفة في النظام (system) تتواصل مع بعض وتعرف إن فيه تغيير حصل… من غير ما أربط كل حاجة ببعضها وأخلي الكود معقد ومليان dependencies؟"

الموضوع يبان بسيط في الأول، بس أول ما تدخل في مشروع كبير، تلاقي الدنيا بقت spaghetti code… كل function مربوطة بالتانية، وأي تعديل صغير ممكن يبوظلك أجزاء تانية في الـ app.

في هندسة البرمجيات، فيه بعض الحلول والطرق متفق عليها بتخلّي السيستم modular، سهل الصيانة، وسهل التوسع. الحلول دي بنسميها Design Patterns.

واحد من أهم وأشهر الـ patterns اللي بيتكرر وجوده في مجالات مختلفة هو:
Observer Pattern

الـ pattern ده فكرته عامة جدًا، وممكن تلاقيه مستخدم في الـ events أو real-time updates أو distributed systems، أو حتى في أي application محتاج يتعامل مع تغييرات في state ويشاركها مع أجزاء تانية...

———

🟢 الفكرة ببساطة:

الـ Observer Pattern بيشتغل كده:

- عندك Subject: ده الـ object اللي بيمتلك الـ state.
- عندك Observers: مجموعة objects عايزين يتبلغوا بأي تغيير في الـ state.

أول ما الـ Subject يتغير، يبعت notification لكل Observers، وكل واحد فيهم يعمل update لنفسه بطريقته.
المهم إن الـ Subject مش محتاج يعرف التفاصيل عن كل Observer… مجرد يقول "أنا اتغيرت" وخلاص.

———

🟢 مثال من أرض الواقع:

تخيل إنك عامل subscribe لقناة على YouTube:

- القناة = Subject
- المشتركين = Observers

أول ما القناة تنزل فيديو جديد، يوتيوب بيبعت Notification للكل. القناة مش بتسأل "فلان عايز notification إزاي"… هي بس بتبعت والكل يتصرف.

———

🟢 ليه الـ Observer Pattern مهم؟

1- بيقلل الـ tight coupling: الـ Subject مش بيعرف التفاصيل عن Observers.
2- بيكون فيه flexibility: تقدر تضيف أو تشيل Observers بسهولة.
3- بيسهل maintenance: أي تعديل بيبقى localized، مش هيبوظ باقي الـ code.

———

في React: لما الـ state تتغير، الـ component تعمل re-render… ده نفس فكرة الـ Observer.

في Angular (RxJS): الـ Observables streams هي abstraction قوية لفكرة الـ Observer.

في JavaScript Events: كل ما تعمل element.addEventListener، أنت فعليًا بتسجل Observer.

———

وفقكم الله لكل خير 🌿

BY DevGuide 🇵🇸