1- ما هو إطار العمل Framework:

من أحد اهم مبادئ التصميم في تطوير البرمجية هو DRY (Don’t Repeat Yourself) “لا تكرر نفسك” وبالتالي عند حل مشكلة معينة فإنَّه لا يتعيّن عليك حلها مجدداً كل مرة تواجهك، وهذا ما تهدف إليه أطر العمل فهي تهدف إلى تقليل تكرار الأجزاء التي يتطلبها التطبيق في كل مرة، فمثلاً في كل مرة تبدأ فيها مشروعاً برمجياً جديداً، لا يتعين عليك -على سبيل المثال- كتابة كود للتواصل مع قاعدة البيانات الخاصة بك، فيمكنك بدلاً من ذلك استخدام إطار العمل لتنفيذ هذا العمل نيابة عنك.

أطر العمل في جافا سكربت كثيرة وتهدف كلها لتسهيل وتسريع عملية تطوير صفحات الويب جهة المستخدم وأمثلة على هذه الأطر React ، Angular، jQuery وغيرها الكثير.

ونحن سنتحدث في مقالتنا عن إطار العمل Angular.

2- مقدمة عن إطار العمل Angular:

هو إطار عمل مفتوح المصدر من تطوير Google لبناء تطبيقات الويب أحادية الصفحة (SPAs) Single Page Application ديناميكية وحديثة مكتوب بلغة TypeScript. يوفر Angular مجموعة شاملة من الأدوات والميزات لمساعدة المطورين على إنشاء تطبيقات ويب غنية بالمميزات وعالية الأداء وقابلة للصيانة. كما تُضمِّن Angular الوظائف الأساسية والاختيارية على أساس مجموعة من مكتبات TypeScript التي تستوردها بعد ذلك إلى تطبيقاتك.

وحالياً Angular 17 آخر إصدار لـ Angular في وقت كتابة المقالة.

وهناك العديد من الأسباب التي تجعل Angular خياراً رائعاً لمشاريع تطبيقات الويب الخاصة بك، ومن أهمها:

  1. هيكل واضح: يعتمد Angular على هندسة MVC واضحة (نموذج-عرض-تحكم) تساعد على فصل منطق العرض والمنطق التطبيقي، مما يجعل تطبيقاتك أكثر قابلية للصيانة وإعادة الاستخدام.
  2. استخدام TypeScript: يستخدم Angular لغة TypeScript وهي امتداد للغة JavaScript توفر العديد من الميزات مثل الفحص والـ Auto completion مما يجعل كتابة التعليمات البرمجية أكثر فعالية وأقل عرضة للأخطاء.
  3. ارتباط البيانات ثنائي الاتجاه (Two-way data binding): يوفر Angular ارتباطاً ثنائي الاتجاه بين نموذج البيانات (Form) وعرض التطبيق، مما يعني أنَّ أي تغييرات يتم إجراؤها على أحدهما يتم تحديث الآخر تلقائياً، مما يحافظ على تناسق واجهة المستخدم وتسهيل إدارة حالة التطبيق.
  4. المكونات (Components): تعتبر الـ Components من اللبنات الأساسية في Angular، وهي عبارة عن وحدات قابلة لإعادة الاستخدام تجمع بين قالب HTML ومنطق TypeScript الخاص بها. تساعد الـ Components على تقسيم واجهة المستخدم وتسهيل إدارة تعقيد تطبيقات الويب.
  5. الـ (Services): تتيح لك الـ Services في Angular فصل منطق الأعمال عن الـ Components، مما يوفر طريقة منظمة لتنفيذ المهام المشتركة وإدارة البيانات التي يمكن مشاركتها عبر مكونات مختلفة.
  6. توجيه المسارات (Routing): يوفر Angular نظام توجيه قوياً يسمح لك بتعريف مسارات مختلفة لتطبيقك وعرض المكونات المناسبة بناءً على المسار الحالي الذي يطلبه المستخدم.
  7. المكتبات: يوجد مجتمع كبير من المطورين الذين طوروا مكتبات Angular إضافية توفر وظائف إضافية مثل إدارة الاتصال بالخادم (HTTP)، والتحقق من صحة البيانات (Validation)، وإدارة بناء النماذج (Forms).

فبالتالي إذا كنت تبحث عن إطار عمل قوي وناضج لبناء تطبيقات ويب أحادية الصفحة (SPA) غنية بالمميزات، فإن Angular يعد خياراً ممتازاً. ومع ذلك، قد لا يكون Angular هو الخيار الأفضل للمشاريع الصغيرة والبسيطة لوجود الكثير من المميزات التي لن يتم استخدامها مما يزيد حجم التطبيق، حيث قد يكون منحنى التعلم أكثر حدة مقارنة بإطارات عمل أخرى أخف وزناً.

3- تطبيقات الويب أحادية الصفحة Single Page Application  (SPAs):

تطبيق الصفحة الواحدة هو تطبيق ويب يتفاعل مع المستخدم عن طريق إعادة كتابة صفحة الويب الحالية ديناميكيًا ببيانات جديدة من خادم الويب، بدلاً من الطريقة الافتراضية للمتصفح الذي يقوم بتحميل صفحات جديدة بالكامل.

الطريقة الافتراضية لعرض البيانات على المستخدم كالتالي عندما يقوم المستخدم بطلب صفحة ويب معينة يقوم السيرفر بمعالجة الطلب وجلب البيانات من قاعدة البيانات وتوليد صفحة HTML واعادتها إلى المستخدم لعرضها على المستخدم.

هذه الطريقة تستلزم اعادة تحميل الصفحة وتستلزم من الخادم توليد صفحات HTML في كل مرة يقوم المستخدم بطلب بيانات جديدة على سبيل المثال الضغط على رابط مما يستهلك الكثير من موارد الخادم.

أما أسلوب SPA فيقوم على تحميل HTML ,CSS مرة واحدة فقط في البداية بعد ذلك عندما يتفاعل المستخدم مع أي رابط او يطلب بيانات جديدة يقوم المتصفح بطلب هذه البيانات عن طريق تقنية AJAX أو Asynchronous JavaScript and Xml ويرد الخادم بالبيانات على شكل JSON فيقوم المتصفح بتحديث البيانات في صفحة HTML عن طريق JavaScript, وهذه الطريقة لا تلتزم اعادة تحميل الصفحة.

4- ميزات SPA:

  • تمنح تجربة استخدام أفضل للمستخدم لأنها أسرع في التعامل وتفاعلية أكثر كونها لا تتطلب اعادة تحميل الصفحة.
  • تخفف الضغط على السيرفر كونها تجعل اظهار الصفحات مهمة المتصفح بدلاً من الخادم ويبقى الجزء الوحيد الذي يهتم به السيرفر هو التعامل مع البيانات فقط وارسال هذه البيانات إلى المتصفح للتعامل معها وعرضها للمستخدم دون التدخل في HTML.
  • يمكن استخدام API الذي يوفره الخادم لكي تعمل عليه أكثر من تطبيق فعلى سبيل المثال يمكن لتطبيق ويب وتطبيق موبيل أن يعملوا بالتوازي على نفس API الذي يوفره Backend.
  • هذا الفصل في عمل Backend وFrontend – الواجهة الأمامية والخلفية يدعم عمل الفريق بحيث مطور الواجهة الامامية Frontend Developer يهتم بواجهة المستخدم ومطور الواجهة الخلفية Backend يهتم بواجهة المستخدم.

5- سلبيات SPA:

  • التوافق مع محركات البحث SEO تعاني هذه التطبيقات من مشكلة في أرشفة الصفحات من محركات البحث.
  • مع الاستخدام الكثيف لواجهة المستخدم في التطبيقات الكبيرة تظهر مشكلات تخص الأداء ولكن أطر العمل مثل Angular تبذل جهداً كبيراً في حل هذه المشكلات.

6- مكونات Angular:

  • المكونات (Components): يمكنك إنشاء Component بسهولة واعادة استخدامه داخل التطبيق ويحتوي كل تطبيق Angular على مكوِّن واحد على الأقل وهو المكوِّن الجذر الذي يربط التسلسل الهرمي للمكون بنموذج كائن المستند DOM، حيث يُعرِّف كل مكون صنفاً يحتوي على بيانات التطبيق والمنطق ويرتبط بقالب HTML يُحدِّد طريقة العرض في البيئة المستهدفة، كما يُحدِّد المزخرف ‎@Component()‎ الصنف الموجود أسفله مباشرةً على أساس مكوِّن ويوفِّر القالب والبيانات الوصفية الخاصة به.
  • الوحدات (Modules) و(Module): هي آلية لتجميع المكونات Components والتوجيهات directives والخدمات المرتبطة، بطريقة يمكن دمجها مع Modules الأخرى لإنشاء تطبيق Angular.

تُعَدُّ وحدات Ng Modules الموجودة في Angular تتمةً لوحدات ES2015 في JavaScript، إلا أنها تختلف عنها، حيث يصرح المزخرف Ng Module عن سياق تجميع لمجموعة من المكونات المخصصة لمجال معين أو لسير عمل ما أو مجموعة من الإمكانيات المرتبطة ببعضها ارتباطاً وثيقاً، كما يستطيع Ng Module ربط المكونات المعرفة فيه بشيفرات ذات صلة مثل الخدمات بهدف تشكيل وحدات وظيفية.

يحتوي كل تطبيق Angular على وحدة جذر تسمى App Module والتي توفر آلية التكوين المسؤولة عن تشغيل التطبيق الذي يحتوي على العديد من الوحدات الوظيفية عادًة، ويمكن أن تستورد وحدات Ng Module وظائفاً من وحدات Ng Module أخرى كما في وحدات JavaScript، كما تسمح بتصدير الوظائف الخاصة بها واستخدامها في وحدات أخرى، إذ يجب عليك مثلاً استيراد خدمة Router من أجل استخدام خدمة التوجيه في التطبيق الخاص بك.

يساعد تنظيم الشيفرة الخاصة بك ضمن وحدات وظيفية مميزة في عملية إدارة تطوير التطبيقات المعقدة وفي تسهيل عملية التصميم من أجل إعادة الاستخدام، كما تتيح لك هذه التقنية الاستفادة من عملية التحميل الكسول lazy-loading، أي تحميل الوحدات عند الطلب لتقليل كمية الشيفرات البرمجية التي يجب تحميلها عند بدء التشغيل.

  • القوالب (Templates) والتوجيهات (Directives) وربط البيانات (Data binding): يجمع القالب Template بين HTML وAngular markup الذي يمكنه تعديل عناصر HTML قبل عرضها. توفر التوجيهات Directives منطق البرنامج، وData binding يمثل الربط بين بيانات التطبيق وDOM وتدعم Angular ما يسمى Two-Way Data Binding ويعنى أنه تمثل طبقة العرض View طبقة النموذج Model تماماً ويبقوا في حالة من التزامن التام. فإذا قمت بإجراء أي تغيير في النموذج Model، يمكن للمستخدمين رؤيته في نموذج العرض View تلقائياً والعكس صحيح.

      ويوجد نوعان من صياغة الربط:

  • يتيح لك التربيط عبر الحدث الاستجابة لمدخلات المستخدِم في البيئة المستهدَفة عن طريق تحديث بيانات التطبيق الخاص بك.
  • يتيح لك التربيط عبر الخاصية إدخال القيم المحسوبة من بيانات التطبيق الخاص بك إلى عناصر HTML.

تقيّم Angular التوجيهات وتحل السياق المرتبط بالقالب لتعديل عناصر HTML وDOM وفقاً لبيانات برنامجك والمنطق قبل إظهار قسم العرض، كما تدعم Angular تربيط البيانات باتجاهَين، مما يعني انعكاس التغييرات التي تحدث في DOM مثل خيارات المستخدِم في بيانات البرنامج الخاص بك أيضاً، كما يمكن للقوالب الخاصة بك استخدام الأنابيب من أجل تحسين تجربة المستخدِم عن طريق تحويل القيم قبل عرضها، حيث يمكنك مثلاً استخدام الأنابيب لعرض التواريخ وقيم العملات عرضاً يناسب البيئة المحلية للمستخدِم، إذ توفِّر Angular أنابيباً pipes معرّفةً مسبقاً من أجل إجراء تحويلات عليها ويمكنك تعريف الأنابيب الخاصة بك أيضاً.

  • التوجيه (Routing): في Angular يمكننا إنشاء التطبيق الكامل دون تغيير عنوان URL على الإطلاق لأننا في الواقع في تطبيق أحادي الصفحة SPA ولا حاجة لإعادة تحميل الصفحة. ومع ذلك، فإنَّ إضافة التوجيه أو Routing تسمح للمستخدم بالانتقال مباشرة إلى أجزاء معينة من التطبيق. عن طريق مشاركة الرابط لجزء من التطبيق وأيضاً تجعل التطبيق قابل للإضافة في الإشارة المرجعية Bookmark ويسمح للمستخدمين بمشاركة الروابط مع الآخرين على منصات التواصل الاجتماعي مثلاً.

أي يمكننا القول إن وحدات Angular الجاهزة توفِّر لك خدمة التوجيه عبر الوحدة Router التي تتيح لك تعريف وجهات محددة في تطبيقك والتنقل في مختلف مساراتها مهما كانت متداخلة وعرض القوالب المعرَّفة في تلك المسارات حيث نُمذِجَت واجهة التنقل Router لتعمل بآلية عمل التنقل نفسه والخاص بالمتصفِّحات المعروفة:

  • أدخِل عنوان URL في شريط العنوان وسينقلك المتصفِّح إلى الصفحة التابعة لهذا العنوان.
  • انقر على الروابط في الصفحة وسينقلك المتصفِّح إلى صفحة أخرى جديدة.
  • انقر على أزرار العودة إلى الخلف أو الانتقال إلى الأمام الخاصة بالمتصفح وسينقلك المتصفِّح إلى الوراء أو إلى الأمام اعتمادًا على تاريخ الصفحات التي زرتها.

يعيِّن جهاز التوجيه مسارات تشبه عناوين URL إلى أقسام العرض بدلاً من الصفحات وعندما يجري المستخدِم إجراءً معيَّناً مثل النقر على رابط ما والذي يحمِّل صفحةً جديدةً في المتصفح، فيعترض هنا جهاز التوجيه سلوك المتصفح ويعرض له أو يخفي عنه التسلسل الهرمي للعرض، فإذا حدَّد جهاز التوجيه أنَّ حالة التطبيق الحالية تتطلب وظائفاً معينةً ولم تُحمَّل الوحدة التي تحدِّد هذه الوظائف، فيمكن لجهاز التوجيه تحميل الوحدة تحميلاً بطيئاً عند الطلب.

يعترض جهاز التوجيه عنوان URL للرابط وفقاً لقواعد التنقل التي حددتها لأقسام العرض الخاصة بتطبيقك وحالة البيانات، حيث يمكنك الانتقال إلى طرق عرض جديدة عندما ينقر المستخدِم على زر أو يختار أحد الخيارات الموجودة في قائمة منسدلة أو في استجابة لبعض التنبيهات القادمة من أي مصدر آخر، حيث يسجِّل جهاز التوجيه النشاط في تاريخ المتصفِّح، وبالتالي تعمل أزرار العودة إلى الخلف أو الانتقال إلى الأمام خلال عملية التنقل أيضاً.

يجب عليك ربط مسارات التنقل بمكوناتك من أجل تعريف قواعد التنقل، حيث يستخدِم المسار بنيةً تشبه عنوان URL، وقد يدمج به بيانات التطبيق الخاصة بك بالطريقة نفسها التي تدمج بها بنية القالب أقسام العرض الخاصة بك مع بيانات تطبيقك، كما يمكنك بعد ذلك تطبيق منطق معين في البرنامج لاختيار أي من أقسام العرض يجب إظهارها أو إخفاؤها على أساس استجابة لإدخال المستخدِم وقواعد الوصول التي عرَّفتها.

7- مقارنة بين مكتبة React وإطار العمل Angular:

React هي مكتبة JavaScript مفتوحة المصدر تم تطويرها بواسطة Facebook لبناء واجهات المستخدم، وهي مكتبة مرنة تجعل من السهل إنشاء واجهات مستخدم تفاعلية باستخدام نهج قائم على المكونات (component-based approach). والمكونات هي أجزاء صغيرة من الكود يمكن إعادة استخدامها لإنشاء تطبيقات ويب. ReactJS سريعة وسهلة التعلم، وهي خيار جيد للمطورين الذين يرغبون في إنشاء تطبيقات ويب بسيطة إلى متوسطة التعقيد.

بينما Angular هو إطار عمل TypeScript مفتوح المصدر تم تطويره بواسطة Google. وهو إطار عمل كامل الميزات يحتوي على كل ما تحتاجه لبناء تطبيقات ويب معقدة. يستخدم Angular نهجاً قائماً على المكونات (Component)، مشابهاً لــ React  ولكنه يوفر أيضاً ميزات إضافية مثل التوجيه (routing) وحقن التبعية (dependency injection) والترابط التلقائي للبيانات (two-way data binding).

8- مميزات مكتبة React:

  • سهلة التعلم.
  • مرنة (Flexible).
  • مجتمع كبير من المطورين.
  • توجيه مدمج (Built-in routing).
  • أداء سريع (Fast performance).
  • مناسب لمحركات البحث (SEO-friendly).

9- مميزات إطار العمل Angular:

  • إطار عمل كامل الميزات.
  • حقن التبعية (Dependency injection).
  • الترابط التلقائي للبيانات (Two-way data binding).
  • توجيه مدمج (Built-in routing).
  • مجتمع كبير من المطورين.
  • مناسب للاستخدام في المؤسسات (enterprise-grade).

10- أهم استخدامات مكتبة React:

  • تطبيقات الصفحة الواحدة (SPAs).
  • تطبيقات الويب التقدمية (PWAs).
  • المواقع الإلكترونية الثابتة (Static websites).
  • تطبيقات الجوال (Mobile applications).
  • مكونات الويب (web components).

11- أهم استخدامات إطار عمل Angular:

  • تطبيقات الويب المؤسسية (Enterprise-grade web applications).
  • تطبيقات الصفحة الواحدة المعقدة (Complex SPAs).
  • تطبيقات الويب التقدمية (PWAs).
  • تطبيقات الجوال الأصلية (Native mobile applications).

12- كيفية اختيار إطار العمل أو المكتبة المناسب لك:

  • ضع في اعتبارك احتياجاتك وخبراتك. إذا كنت مبتدئاً، فإنَّ React خيار جيد لأنها سهلة التعلم، وإذا كنت مطوراً متمرساً وتحتاج إلى بناء تطبيقات ويب معقدة، فإنَّ Angular خيار جيد لأنَّه إطار عمل كامل الميزات.
  • فكر في نوع التطبيقات التي تريد بناؤها. React خيار جيد لبناء تطبيقات ويب بسيطة إلى متوسطة التعقيد، بينما يعد Angular خياراً جيداً لبناء تطبيقات ويب معقدة.
  • ضع في اعتبارك مصادر التعلم المتاحة. يتمتع كل من React وAngular بمجتمعات كبيرة ونشطة من المطورين، لكن React تميل إلى وجود المزيد من مصادر التعلم المتاحة.

13- المراجع:

  1. أكاديمية ElzeroWebSchool.
  2. موقع Angular 
  3. موقع developer.mozilla.org
  4. موقعgeeksforgeeks.org  
Facebook
Twitter
YouTube
LinkedIn
Instagram