Angular هى مكتبة من انشاء جوجل وهى مفتوحة المصدر Open source وAngular من اشهر اطر عمل جافاسكربت.
Angular هو منصة وإطار عمل لإنشاء تطبيقات من صفحة واحدة SPA او Single Page Application فى جهة العميل او المتصفح باستخدام HTML و TypeScript.
محتوي المقال
ماهو اطار العمل Framework
من احد اهم مبادئ التصميم فى تطوير البرمجية هو DRY او Don't Repeat Yourself – لاتكرر نفسك وبالتالى عند حل مشكلة معينة فانه لايتعين عليك حلها مجددًا كل مرة تواجهك , وهذا ماتهدف إليه اطر العمل فهى تهدف إلى تقليل تكرار الاجزاء التى يتطلبها التطبيق فى كل مرة ,فمثلا في كل مرة تبدأ فيها مشروعًا برمجيًا جديدًا ، لا يتعين عليك ، على سبيل المثال ، كتابة كود للتواصل مع قاعدة البيانات الخاصة بك – فيمكنك بدلًا من ذلك استخدام اطار العمل لتنفيذ هذا العمل نيابة عنك.
اطر العمل فى جافاسكربت كثيرة وتهدف كلها لتسهيل وتسريع عملية تطوير صفحات الويب جهة المستخدم وامثلة على هذه الاطر React , Angular , Jquery وغيرها الكثير.
ماهو Single Page Application SPA
تطبيق الصفحة الواحدة هو تطبيق ويب يتفاعل مع المستخدم عن طريق إعادة كتابة صفحة الويب الحالية ديناميكيًا ببيانات جديدة من خادم الويب ، بدلاً من الطريقة الافتراضية للمتصفح الذي يقوم بتحميل صفحات جديدة بالكامل.
الطريقة الافتراضية لعرض البيانات على المستخدم كالتالى عندما يقوم المستخدم بطلب صفحة ويب معينة يقوم السيرفر بمعالجة الطلب وجلب البيانات من قاعدة البيانات وتوليد صفحة HTML واعادتها إلى المستخدم لعرضها على المستخدم.
هذه الطريقة تستلزم اعادة تحميل الصفحة وتستلزم من الخادم توليد صفحات HTML فى كل مرة يقوم المستخدم بطلب بيانات جديدة على سبيل المثال الضغط على رابط مما يستهلك الكثير من موارد الخادم.
اما اسلوب SPA فيقوم على تحميل HTML ,CSS مرة واحدة فقط فى البداية بعد ذلك عندما يتفاعل المستخدم مع اي رابط او يطلب بيانات جديدة يقوم المتصفح بطلب هذه البيانات عن طريق تقنية AJAX او Asynchronous Javascript and Xml ويرد الخادم بالبيانات على شكل JSON فيقوم المتصفح بتحديث البيانات فى صفحة HTML عن طريق Javascript, وهذه الطريقة لا تلتزم اعادة تحميل الصفحة.
مميزات SPA
- تمنح تجربة استخدام افضل للمستخدم لانها اسرع فى التعامل و تفاعلية اكثر -كونها لاتتطلب اعادة تحميل الصفحة.
- تخفف الضغط على السيرفر كونها تجعل اظهار الصفحات مهمة المتصفح بدلًا من الخادم ويبقى الجزء الوحيد الذى يهتم به السيرفر هو التعامل مع البيانات فقط وارسال هذه البيانات إلى المتصفح للتعامل معها وعرضها للمستخدم دون التدخل فى HTML.
- يمكن استخدام API الذى يوفره الخادم لكى تعمل عليه اكثر من تطبيق فعلى سبيل المثال يمكن لتطبيق ويب وتطبيق موبيل ان يعملوا بالتوازى على نفس API الذى يوفره Backend.
- هذا الفصل فى عمل Backend و Frontend – الواجهة الامامية والخلفية يدعم عمل الفريق بحيث مطور الواجهة الامامية Frontend Developer يهتم بواجهة المستخدم ومطور الواجهة الخلفية Backend يهتم بواجهة المستخدم.
سلبيات وتحديات SPA
- التوافق مع محركات البحث SEO تعانى هذه التطبيقات من مشكلة فى ارشفة الصفحات من محركات البحث.
- مع الاستخدام الكثيف لواجهة المستخدم فى التطبيقات الكبيرة تظهر مشكلات تخص الاداء ولكن اطر العمل مثل Angular تبذل جهدًا كبير فى حل هذه المشكلات.
مميزات انجولار Angular
تعمل على المنصات المختلفة Cross-Platform
تستخدم Angular الإمكانيات الحديثة للمتصفحات لتقديم تجارب مستخدم تشبه التطبيقات العادية التى نحملها من المتجر وتتميز بالأداء العالٍ ، كما تعمل فى وضع عدم الاتصال بالانترنت ، ولاتحتاج لاى تثبيت.
هذه الطريقة تسمى PDW او Progressive Web Apps او تطبيقات الويب التقدمية وهى تطبيقات مكونة من HTML و CSS و Javascript وتعمل على اي متصفح وتقدم تجربة استخدام تشبه التطبيقات الاصلية.
وللتعرف اكثر على PDW يمكنك متابعة هذه المقالة
بناء تطبيقات Native
يمكنك باستخدام Angular أنشئ تطبيقات جوال أصلية عن طريق Cordova أو Ionic أو NativeScript.
تطبيقات سطح المكتب Desktop
يمكنك إنشاء تطبيقات مثبتة على سطح المكتب عبر أنظمة التشغيل المختلفة مثل Mac و Windows و Linux باستخدام نفس الأساليب Angular التي تستخدمها فى الويب بالإضافة إلى القدرة على الوصول إلى API لنظم التشغيل OS.
تقسيم الكود Code Splitting
يتم تحميل تطبيقات Angular بسرعة كبيرة لانها تيوفر تقسيمًا تلقائيًا للكود بحيث لا يقوم المستخدمون إلا بتحميل الكود المطلوب لعرض الجزء الذي يطلبونه من التطبيق.
توليد الكود Code Generation
تسمح لك Angular بتحويل قوالب HTML إلى اكواد Javascript والاستفادة من كافة المميزات التى تقدمها Javascript.
بنية MVC
يرمز MVC إلى Model-View-Controller. تتم إدارة بيانات التطبيق بواسطة النموذج او Model ويمثل قاعدة البيانات ويدير العرض View عرض البيانات. بينما المتحكم او Controller يعمل كنقطة وصل بين العرض View والنموذج Model.
هذا النمط فى تصميم Angular يجعل الكود منظم ويسهل التعامل معه وفهمه.
مشروع Angular قابل للصيانة
تتبع Angular بنية MVC مما كود المشروع منظم وسهل الفهم والصيانة وحل المشكلات.
التحريك Animation
تمكنك Angular من أنشاء تصميمات ورسوم متحركة عالية الأداء ومعقدة مع القليل جدًا من الاكواد البرمجية من خلال واجهة برمجة تطبيقات API.
الاختبار Testing
باستخدام Karma لوحدات الاختبار Unit Testing ، يمكنك معرفة ما إذا كان قد حصلت مشكلة فى الكود في كل مرة تقوم فيها بحفظ التعديلات. وتجعل هذه الآلية الاختبارات تعمل بشكل أسرع وبطريقة مستقرة.
مجتمع كبير من المطورين
يستخدم Angular الكثير من مطورى الويب حول العالم مما يوفر مجتمع كبير يمكنك الاستفادة منه فى حل المشكلات التى تواجهك , كما يمكنك الحصول على الادوات والاضافات المختلفة بسهولة.
مكونات Angular
- المكونات او Components : يمكنك انشاء Component بسهولة واعادة استخدامه داخل التطبيق , يعرّف كل مكون Class يحتوي على بيانات التطبيق والمنطق المرتبط به ، ويرتبط بقالب HTML الذي يحدد طريقة عرض البيانات.
- الوحدات او Modules : و Modules هي آلية لتجميع المكونات Components والتوجيهات directives والخدمات المرتبطة ، بطريقة يمكن دمجها مع Modules الأخرى لإنشاء تطبيق Angular.
- القوالب Templates والتوجيهات Directives وربط البيانات Data binding : يجمع القالب Template بين HTML و Angular markup الذي يمكنه تعديل عناصر HTML قبل عرضها. توفر التوجيهات Directives منطق البرنامج ، و Data binding يمثل الربط بين بيانات التطبيق و DOM وتدعم Angular مايسمى Two-Way Data Binding ويعنى انه تمثل طبقة العرض View طبقة النموذج Model تمامًا ويبقوا في حالة من التزامن التام. فإذا قمت بإجراء أي تغيير في النموذج Model ، يمكن للمستخدمين رؤيته في نموذج العرض View تلقائيًا والعكس صحيح.
- التوجيه او Routing : فى Angular يمكننا إنشاء التطبيق الكامل دون تغيير عنوان URL على الإطلاق لاننا فى الواقع فى تطبيق احادى الصفحة SPA ولا حاجة لاعادة تحميل الصفحة. ومع ذلك ، فإن إضافة التوجيه او Routing تسمح للمستخدم بالانتقال مباشرة إلى اجزاء معينة من التطبيق. عن طريق مشاركة الرابط لجزء من التطبيق وايضًا تجعل التطبيق قابل للاضافة فى الإشارة المرجعية Bookmark ويسمح للمستخدمين بمشاركة الروابط مع الآخرين على منصات التواصل الاجتماعى مثلًا.
