القائمة الرئيسية

الصفحات

شرح شامل و كامل لـ Angular مع مميزاته و مكوناته | برمجة

شرح شامل و كامل لـ Angular مع مميزاته و مكوناته


شرح شامل و كامل لـ Angular مع مميزاتها و مكوناتها

مرحبا بكم من جديد في موقع القهوة العلمية في قسم البرمجة حيث نسعى إلى تعريفكم بلغات البرمجة و أهميتها في عالمنا الحالي و المعاصر الذي أصبح يعتمد كليا على البرمجيات و التكنولوجيات المتطورة، اليوم في مقالنا هذا سوف نتعرف على أحد أقوى إطارات العمل التابع للغة البرمجة العالمية جافا سكريبت Java Script و الذي يسمى Angular و الذي تم إنشاءه و تطويره من طرف العملاق جوجل Google، و هو إطار مفتوح المصدر يتم إستخدامه لإنشاء تطبيقات من صفحة واحدة أو ما يسمى بالـ SPA إختصارا لعبارة Single Page Application من جهة العميل أو المتصفح.



أولا دعونا نتعرف بشكل سريع على التعريف الشامل لإطار العمل Framework


ما هو إطار العمل Framework


أحد أهم مبادئ التصميم في تطوير البرمجيات في عالمنا الحالي هو DRY أو don't repeat yourself ما يعني بلغتنا العربية "لا تكرر نفسك" وبالتالي عندما تحل مشكلة معينة في برمجية ما لن تضطر إلى القيام بحل نفس المشكلة في كل مرة في برمجيات مختلفة و هذا ما تهدف إليه إطارات العمل Frameworks، لأنها تريد تقليل تكرار الأجزاء التي يحتاجها التطبيق في كل مرة. على سبيل المثال، في كل مرة تبدأ فيها مشروعًا برمجيًا جديدًا، لا تحتاج إلى كتابة رمز للتواصل مع قاعدة البيانات يمكنك استخدام إطار العمل للقيام بهذا العمل نيابة عنك.


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


ماهو Single Page Application SPA


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


شرح شامل و كامل لـ Angular مع مميزاتها و مكوناتها

بالنسبة لطريقة SPA، فهي تقوم فقط بتحميل HTML و CSS مرة واحدة في البداية. بعد ذلك، عندما يتفاعل المستخدم مع رابط أو يطلب بيانات جديدة، يطلب المتصفح تلك البيانات من خلال تقنية AJAX أو تقنية JavaScript و Xml غير المتزامنة، ويستجيب الخادم بالبيانات مثل JSON، لذلك يضع المتصفح تحديث البيانات. في صفحة HTML باستخدام JavaScript، لا تتطلب منك هذه الطريقة إعادة تحميل الصفحة كما هو الحال مع الطريقة الإفتراضية.


شرح شامل و كامل لـ Angular مع مميزاتها و مكوناتها

مميزات الـ SPA


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

سلبيات و تحديات الـ SPA


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

مميزات إطار العمل Angular


تعمل على المنصات المختلفة Cross-Platform


يستخدم إطار العمل Angular الإمكانات الحديثة لمتصفحاتها لتزويد المستخدم بتجارب مشابهة للتطبيقات العادية التي نقوم بتنزيلها من المتجر و التي تتميز بأداء عالٍ، وتعمل حتى في وضع عدم الاتصال دون أي تثبيت.
تسمى هذه الطريقة PWA إختصارا لعبارة Progressive Web Applications ما يعني بلغتنا العربية "تطبيقات الويب التقدمية". هذه هي تطبيقات تمت برمجتها باستخدام لغات الـ HTML و CSS و Javascript التي تعمل على أي متصفح وتوفر تجربة مستخدم مماثلة للتطبيقات الأصلية.


يمكنك التعرف على المفهوم الشامل لـ PWA أو Progressive Web Apps عبر قراءة هذه المقالة.


بناء تطبيقات Native


باستخدام Angular يمكنك إنشاء تطبيقات جوال أصلية باستخدام Cordova أو Ionic أو NativeScript.


يمكنك التعرف كذلك على الشرح الشامل لـ Ionic عبر قراءة هذا المقال.


إنشاء تطبيقات سطح المكتب Desktop


يمكنك إنشاء تطبيقات مثبتة على سطح المكتب على أنظمة تشغيل مختلفة مثل Mac و Windows و Linux باستخدام نفس تقنيات Angular التي تستخدمها على الويب إلى جانب القدرة على الوصول إلى واجهة برمجة التطبيقات لنظام التشغيل.


تقسيم الكود Code Splitting


يتم تحميل تطبيقات Angular بسرعة كبيرة لانها توفر تقسيمًا تلقائيًا للرمز البرمجي بحيث لا يتوجب على المستخدمين تحميل الرمز البرمجي كله حيث يقومون بتحميل الرمز البرمجي المطلوب فقط لعرض الجزء الذي يطلبونه من التطبيق.


توليد الكود Code Generation


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


بنية MVC


يرمز MVC إلى Model-View-Controller. تتم إدارة بيانات التطبيق بواسطة النموذج وتمثل قاعدة البيانات ويدير عرض البيانات. بينما تعمل وحدة التحكم كحلقة وصل بين العرض والنموذج.
هذا النمط فى تصميم Angular يجعل الكود منظم ويسهل التعامل معه وفهمه.


مشروع Angular قابل للصيانة


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


التحريك Animation


يتيح لك Angular إنشاء تصميمات ورسوم متحركة عالية الأداء ومتطورة لك من خلال كتابة رمز برمجي صغير ضمن واجهة برمجة التطبيقات.


الاختبار Testing


باستخدام Karma، يمكنك معرفة ما إذا كانت هناك مشكلة في الكود في كل مرة تحفظ فيها تغييراتك. هذه الآلية تجعل الاختبارات أسرع وأكثر استقرارًا.


مجتمع كبير من المطورين


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


مكونات Angular


  1. المكونات او Components : يمكنك بسهولة إنشاء وإعادة استخدام أحد المكونات في التطبيق. يعرّف كل مكون فئة تحتوي على بيانات التطبيق والمنطق المرتبط بها، ويرتبط بقالب HTML الذي يحدد كيفية عرض البيانات.

  2. الوحدات او Modules : الـ Modules هي آلية تجمع المكونات والتوجيهات والخدمات المرتبطة بها بطريقة يمكن دمجها مع الـ Modules الأخرى لإنشاء تطبيقات Angular.

  3. التوجيه او Routing : المطاوب من التطبيق، يمكن أيضًا وضع إشارة مرجعية على التطبيق ويسمح للمستخدمين بمشاركة الروابط مع أشخاص آخرين على منصات التواصل الاجتماعي على سبيل المثال.

  4. القوالب Templates والتوجيهات Directives وربط البيانات Data binding : يجمع القالب بين HTML و Angular markup والذي يمكنه تعديل عناصر HTML قبل عرضها. توفر التوجيهات Directives منطق البرنامج، ويمثل الـ Data Binding الربط بين بيانات التطبيق و DOM. يدعم Angular ما يُعرف بربط البيانات ثنائي الاتجاه، مما يعني أن طبقة العرض تمثل طبقة النموذج تمامًا وتبقى في حالة مزامنة تامة. إذا قمت بإجراء أي تغييرات على النموذج، فيمكن للمستخدمين رؤيته تلقائيًا في طريقة العرض، والعكس صحيح.

إقرأ أيضا :

تعليقات