Angular: رحلة لواحدة من أشهر أدوات الواجهة الأمامية في سوق العمل اليوم

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

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

حسنًا ، قد تكون متحمسًا الآن لكيفية تطوره ، وما الميزات الجديدة المضافة في الإصدارات المختلفة. الآن، والانتظار قد انتهى. هيا بنا نبدأ!

قبل المضي قدمًا ، أود أن أخبر قرائي أن "Angular 8" هو أحدث إصدار أصدره فريقنا الموهوب.

ولادة البطل (AngularJS) - 2010

في عام 2010 ، حدثت ولادة بطل السوق اليوم. كان يُعرف باسم "AngularJS".

AngularJS هو إطار عمل Javascript تم تطويره بواسطة Google. يتم استخدامه لعمل تطبيق من صفحة واحدة (SPA). انتظر! أتمنى أن تعرف ما هو SPA. إذا لم يكن الأمر كذلك ، فاسأل Google عنها ثم عد مرة أخرى لأن هذا هو أحد الأساليب الجميلة التي تستخدمها الزاوية ، ولكن إليك مقدمة موجزة عن SPA (من يعرف ، يمكنك تخطي):

تطبيق SPA أو Single page هو تطبيق يتم فيه تنزيل كل شيء دفعة واحدة. يتم تنزيل كل التعليمات البرمجية الضرورية دفعة واحدة. على عكس تطبيق الصفحات المتعددة ، لا يتعين عليك طلب صفحة ويب من الخادم لكل زيارة وتحميل الصفحة. في SPA ، يتم تنزيل ملف index.html مرة واحدة مع كل المحتوى ثم لكل تغيير في عنوان URL ، تقوم صفحة الويب الحالية بتحميل المحتوى المطلوب ديناميكيًا. يمنحك هذا الأسلوب تجربة مستخدم أفضل في التبديل بين الصفحات المختلفة ويمنحك شعوراً بالتطبيق.

هذا كل شيء عن SPA. أتمنى أن يعطيكم صورة مختصرة عنه. دعنا ننتقل إلى الموضوع الأصلي.

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

الآن ، يجب أن نركز على ميزات AngularJS. هنا بعض :

1) ربط البيانات  - المزامنة التلقائية بين النموذج والعرض.

2) نظام حقن التبعية  - نمط تصميم يقوم فيه النظام بتزويد الكائنات التابعة عند إنشاء الكائن.

3) النطاق  - الذي يعتني بالمراقب والعرض.

4) الخدمات  - لتبادل المعلومات بين أجزاء مختلفة من التطبيق.

5) التوجيهات  - تمنح قوة فائقة لـ HTML. على سبيل المثال ، ng-model ، ng-app.

6) أجهزة التحكم  - قلب التطبيق حيث يكمن المنطق.

7) نموذج  - عرض يعطي معلومات باستخدام وحدة التحكم والنموذج.

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

جعل النقص في AngularJS الفريق الزاوي يعيد كتابة الإطار بأكمله من البداية. لم يحدث هذا التغيير الكبير في الإصدار الجديد من أي إطار / مكتبة في السوق. الإصدار الجديد من الزاوي مختلف تمامًا عن AngularJS. كيف هو مختلف؟ دعونا نفهم من خلال الغوص في موضوعنا الفرعي التالي.

الزاوي 2-2016

تم طرح الإصدار الأحدث من AngularJS في السوق في عام 2016 ، ثم لم يعد معروفًا باسم AngularJS. حصلت على اسم "Angular". يُعرف إصدار Angular 1.x باسم AngularJS. يُعرف الإصدار الأحدث بعد 2.x باسم Angular. عندما واجهت هاتين الكلمتين في رحلة تطوير الويب الخاصة بي. لقد اعتقدت حرفيًا أن هذين إطارين مختلفين وبعد بحث تعرفت على أن angular هو نسخة محدثة من angularJS. آمل ألا يسيء قراءتي فهمها.

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

المكونات هي قلب العالم الزاوي 2+. قدم Angular حزمًا مختلفة لتحقيق الوظائف الأساسية والمهمة مثل حزمة التوجيه لتحديد المسارات بسهولة ، وحزمة http لجلب البيانات من الخادم ، وحزمة الرسوم المتحركة للرسوم المتحركة وما إلى ذلك.

يوفر Angular 2 أيضًا مفهومًا توجيهيًا مثل AngularJS. تمنح التوجيهات قوى عظمى لـ HTML مثل * ngFor ، * ngIf (التوجيه الهيكلي) يجعل html ديناميكيًا بينما توجيهات السمات مثل ngModel (لربط البيانات ثنائي الاتجاه) ، ngStyle يعتني بمظهر وسلوك DOM الخاص بنا.

ميزة أخرى لا تتغير في الزاوية هي أنها تستخدم أيضًا نظام DI. مثل angularJS ، يوفر نظام DI الكائنات التابعة (التبعيات) للمكون.

انتظر! لقد نسيت أن أخبركم عن يد المساعدة الرائعة التي توفرها الزاوية وهي الزاوية الزاوية. إنها يد مساعدة رائعة تساعدنا في تطوير تطبيقنا بشكل أسرع مثل إنشاء مكون ، فقط استخدم "اسم المكون ng gc" ("g" يتم إنشاء و "c" مكون). هذه ميزة رائعة أخرى مضافة في الزاوية.

هذه ليست النهاية. أخبرتك أن أكبر عيب لـ angularjs هو أنها سيئة في تحسين محركات البحث وتذكر ذلك الحوار الشهير الذي قلته. ستفهم في دقائق قليلة لماذا استخدمت ذلك.

من أكبر العيوب أن angularJS ضعيف في تحسين محركات البحث. عند عرض مصدر الصفحة ، يمكنك أن ترى أنه لا يوجد شيء (لا يوجد Html) مما يجعل برامج الزحف تعتقد أن موقع الويب عديم الفائدة ، أي بدون أي معلومات. إنه لأمر مؤلم للغاية عندما يريد موقع الويب الخاص بك أن تقوم برامج الزحف من google بفهرستها وجعلها تصل إلى القمة في بحث Google ولكنها لا تستطيع تحقيق ذلك. اعتنى به فريق Angular وقدم عالمي الزاوي الذي يعتني بـ SEO لموقعك الزاوي. يستخدم عرض جانب الخادم والذي بدوره يحل مشكلة تحسين محركات البحث.

هذه هي الميزات التي ظهرت بها الزاوية 2 في السوق.

الزاوي 4 - مارس 2017

بعد قراءة الموضوع الفرعي ، قد تتساءل عن سبب عدم استخدام Angular 3؟ هذا سؤال شائع يمكن أن يخطر ببال أي شخص. لا تقلق! سوف أدعك تعرف. السبب في عدم وجود Angular 3 هو حزمة جهاز التوجيه. تم توزيع حزمة جهاز التوجيه الزاوي بالفعل كـ v3. لتجنب الارتباك ، أصدر فريق Angular الإصدار 4 الزاوي. أعتقد الآن أنه يمكن لقرائي القفز لفهم ميزات الزاوية 4.

جاء Angular 4 مع إصلاحات للأخطاء وميزات وتحسينات جديدة أخرى. أكبر تحسن تم إجراؤه كان في حجم الحزمة. لقد قللوا حجم الحزمة بنسبة 60 ٪ مما أدى بدوره إلى جعل التطبيق أخف وزناً وبالتالي انخفض وقت تحميل التطبيق.

الشيء الآخر الذي تم فعله كان في حزمة الرسوم المتحركة. لقد سحبوا ميزة الرسوم المتحركة في حزمة منفصلة- @ angular / animations.

كان هناك تحسن آخر في التوجيه الهيكلي. * ngIf جاء مع جزء آخر في هذا الإصدار.

هذه مقدمة موجزة لميزات الزاوية 4.

Angular 5 - نوفمبر 2017

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

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

تم أيضًا إجراء تحسينات على المترجم تجعل إعادة بناء التطبيق أسرع.

ميزة أخرى تم تقديمها هي مفتاح نقل الحالة (TransferStateKey الذي يعد جزءًا من حزمة النظام الأساسي / المتصفح). حسنا! قد تعتقد ما هو؟ متى يجب استخدام؟ يمكنك الاستفادة من جمال هذه الميزة في تطبيقك إذا كنت تستخدم SSR. نعم ، إذا قمت بتطبيق SSR ، فيجب عليك استخدام ميزة مفتاح نقل الحالة. السبب في أنني قلت هذا لأنه عندما تستخدم SSR ويقوم تطبيقك بإجراء أي طلب HTTP (وهو أمر شائع جدًا) ، فسيتم استدعاء هذا الطلب مرتين ، أي واحدة على الخادم وأخرى على المتصفح. يتسبب هذا في مشكلة الخفقان (لقد مررت بمشكلة الخفقان هذه في تطبيقي لأن طلب HTTP كان يستدعي مرتين). بفضل ميزة مفتاح نقل الدولة. هذه الميزة تجعل المتصفح يستخدم استجابة طلب HTTP الذي تم الوصول إليه على الخادم.يستخدم الاستجابة التي يحصل عليها الخادم من طلب HTTP. كما يوحي اسمه ، ينقل الخادم حالة الاستجابة باستخدام html إلى المتصفح. وبالتالي ، يمكن تجنب الوصول مرتين لطلب HTTP.

تم إجراء تحسين آخر في حزمة عميل http. في هذا الإصدار ، جاء HTTPClientModule مع تحسينات مثل استخدام هذه الوحدة ، ولا يتعين على المطورين تحليل الاستجابة باستخدام الخريطة. ليست هناك حاجة لخطوة الإعراب بعد الآن. لنفترض أنه إذا كانت هناك استجابة من نوع غير JSON ، فيمكنك تحديد تلك الاستجابة باستخدام responseType في طلب HTTP الخاص بك.

هذا كله يتعلق بخاصية الزاوية 5. الآن حان الوقت للانتقال إلى الإصدار 6 الزاوي. بعد ستة أشهر أخرى ، ظهرت لعبة angular 6 في السوق بقوة أكبر.

الزاوي 6 مايو 2018

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

في هذا الإصدار ، تم تحديث الزاوية CLI. تم إدخال أوامر جديدة مثل تحديث ng. لتحديث تبعيات مشروعك الزاوي إلى الأحدث ، يمكنك استخدامه. على سبيل المثال:

ng update @ angular / core

التحسين الآخر الذي تم إجراؤه كان في مكتبة RxJS تسمى RxJS6. التغييران المهمان هما:

  1. قدم RxJS6 بنية حزمة داخلية جديدة.
  2. استخدام عوامل التشغيل.

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

استيراد {Observable} من 'rxjs / Observable' ؛ استيراد {الموضوع} من "rxjs / الموضوع" ؛ استيراد "rxjs / إضافة / عامل / خريطة" ؛

الآن ، مع rxjs6:

استيراد {Observable، Subject} من 'rxjs'؛ استيراد {map} من "rxjs / Operators" ؛

يتم أيضًا تغيير استخدام عوامل التشغيل في الزاوية 6. على سبيل المثال:

نسخة قديمة:

استيراد "rxjs / إضافة / عامل / خريطة" ؛ this.http.get (url) .map ((response) => response.json)

نسخة جديدة:

استيراد {map} من "rxjs / Operators" ؛ this.http.get (url) .pipe (map ((data) => data * 2)

آمل أن تكون قد حصلت على التغييرات التي تم إجراؤها في مكتبة RxJS.

تغيير آخر هو - تم استبدال angular-cli.json بـ angular.json. يحدد هذا الملف تكوين المشروع مثل الأنماط والبرامج النصية والاختبار وعملية البناء وما إلى ذلك. في angular.json ، تتم إضافة المزيد من خيارات التكوين مثل إمكانية تكوين عدة مشروعات.

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

الجمال الآخر الذي تمت إضافته هو حزمة "عنصر زاوية". تتيح هذه الحزمة للمطورين استخدام المكون الزاوي في بيئة أخرى (بيئة غير زاويّة) مثل Vue.js. إنها ميزة أخرى مثيرة للاهتمام تجعلك تستخدم المكون الزاوي في بيئة أخرى

هذا كله يتعلق بسمات الزاوية 6 التي تعلمتها. الآن سأناقش ميزة الإصدار الأخير وهي - Angular 7

الزاوي 7 - أكتوبر 2018

في أكتوبر 2018 ، ظهرت نسخة أخرى أكثر جمالًا في السوق.

كانت الميزات التي تمت إضافتها هي مطالبات CLI والتمرير الافتراضي والسحب والإفلات وتقليل حجم التجميع مرة أخرى. في مطالبات CLI ، يسألك angular-cli عن خيارات مثل عند إنشاء تطبيق جديد باستخدام ng new application-name. يسألك CLI عما إذا كنت تريد إضافة ملف التوجيه أم لا وما إلى ذلك. هناك أيضًا خاصية الميزانية المضافة في angular.json حيث يمكنك تحديد الحد الأقصى والحد الأدنى لقيمة حجم الميزانية.

كل هذا يتعلق بخاصية الزاوية 7. أعلم أنني لم أذكر جميع الميزات الأخرى للزاوية 7 لأنني لم أخوض في هذه الميزات ، وبالتالي ، لست مرتاحًا للحديث عنها. نعلم أيضًا أن إصدار Angular 8 قد تم إصداره ، ولكن نظرًا لنفس السبب لعدم الدخول في ميزات الزاوية 8 ، لم أكتب عنها.

ملاحظة لقرائي: ربما تركت العديد من الميزات ، لكنني حاولت قصارى جهدي للكتابة عن ميزات الإصدارات المختلفة باختصار (لا يمكن سرد جميع الميزات ، لكنني جربت أي ميزات قرأتها في رحلتي) لكنني سأحب إذا كان بإمكان القراء التعليق على تلك الميزات التي وجدوها في رحلة التعلم الخاصة بهم.

شكرا للقراءة.