00:00:00منذ عشر سنوات بالضبط، وهو أمر مذهل حقاً كما يجب أن أقول، كان يوماً
00:00:06مهماً للغاية بالنسبة لي؛ لأنني أصدرتُ فيه النسخة الأولى من دورتي التدريبية حول Angular، دورة Angular 2 حينها.
00:00:12وكما هو الحال مع Angular، تطورت هذه الدورة كثيراً على مدار تلك السنوات العشر،
00:00:17وقمت بتحديثها مرات لا تحصى؛ لأن Angular نفسها تطورت بشكل كبير بالطبع.
00:00:23وفي هذا الفيديو، في هذه الحلقة، أريد التحدث قليلاً عن ماضي Angular،
00:00:28من أين بدأنا، وأين نحن اليوم، وبالطبع إلى أين نحن ذاهبون وماذا يخبئ
00:00:32المستقبل لـ Angular ومطوريها، وهل لا تزال فكرة تعلمها جيدة، خاصة
00:00:37الآن مع وجود الذكاء الاصطناعي. دعونا نبدأ. تم الإعلان عن Angular، وتحديداً Angular 2،
00:00:44في عام 2014، وتم تطويرها في 2015، وكانت مثيرة للجدل حينها
00:00:53لأنها كانت مختلفة تماماً عن Angular 1 (أو AngularJS)، والتي كانت بحد ذاتها
00:00:59واحدة من أولى أطر العمل الكبرى التي ظهرت لمساعدتنا
00:01:05في التخلص من jQuery، أو بعبارة أخرى، لنتمكن من بناء تطبيقات ويب
00:01:13أكثر قدرة وتفاعلية، حيث سهّلت بناء تطبيقات
00:01:20تتم إدارتها ومعالجتها من جهة العميل. ثم أُعلن عن Angular 2
00:01:25وكانت مختلفة كلياً. وفي عام 2016، صدرت أول نسخة مستقرة من Angular،
00:01:33أعني Angular 2. وكما ذكرت، في فبراير 2016، أطلقتُ النسخة الأولى
00:01:40من دورتي المخصصة لنسخة الـ beta من Angular 2. وأستطيع إخباركم أن التغييرات كانت كثيرة
00:01:45خلال مرحلة الـ beta وحتى مرحلة الـ release candidate، لدرجة أنني حدثت الدورة
00:01:51مرات عديدة في ذلك الوقت. ولكن أخيراً أصبح لدينا Angular 2. ولو نظرت إلى
00:01:58كود Angular حينها، ستجده مختلفاً تماماً عن الكود الحديث. كان هناك مفهوم “ng modules”
00:02:05أو وحدات Angular، حيث كان عليك استخدام الـ decorator المسمى ng module
00:02:12والإعلان صراحة عن جميع المكونات التي ستستخدمها. وكان هناك بالطبع
00:02:19أصناف المكونات (Component classes)، وكان الاعتماد على constructor لإدخال التبعيات (Dependency Injection).
00:02:26إلى حد ما، كان يشبه شكل المكون اليوم بكونه مجرد “صنف” (Class)،
00:02:32ولكنه كان مختلفاً جداً في جوانب أخرى. وخاصة الـ ng modules،
00:02:39وهو مفهوم قد لا تعرفه الآن، بناءً على الوقت الذي بدأت فيه
00:02:45رحلتك مع Angular، وفي أي شركة ومع أي إصدار كنت تعمل.
00:02:51لأن هناك لا يزال الكثير من الشركات والمشاريع العالقة في إصدارات قديمة.
00:02:55في عام 2017، فقدنا الإصدار الثالث؛ لأن Angular تتبع جدول إصدارات
00:03:04مستمراً حتى اليوم، يقضي بإصدار نسخة رئيسية جديدة كل ستة أشهر.
00:03:11وأتذكر حينها أن الكثيرين لم يكونوا سعداء بذلك، لأنه بدا
00:03:17وكأن Angular ستتعطل وتتغير كل ستة أشهر. أتذكر الكثير من التعليقات
00:03:23والرسائل في دورتي من أشخاص يشتكون من تغيير Angular المستمر، لكنها
00:03:27لم تتغير جذرياً طوال الوقت. لقد اعتمدوا هذا الجدول فقط ليتمكنوا
00:03:33من تقديم ميزات كبيرة جديدة، لكنهم فعلوا ذلك دائماً بطريقة تضمن التوافق مع الإصدارات السابقة.
00:03:40أما عن “الإصدار الثالث المفقود” في 2017، فقد حدث ذلك
00:03:46بسبب عدم تطابق أرقام الإصدارات بين حزم Angular الأساسية وحزمة
00:03:51Angular router؛ بما أن Angular إطار عمل مقسم إلى حزم عديدة مختلفة.
00:03:57لذا تخطوا الإصدار الثالث لتوحيد أرقام الإصدارات مجدداً. القفزة الكبيرة
00:04:03التالية كانت في 2020 مع تقديم مترجم “Ivy”.
00:04:12وبين تلك السنوات، في 2018 وما بعدها، كان فريق Angular يعمل بجد
00:04:19على هذا المترجم الجديد، إلى جانب العديد من التحسينات والتعديلات الصغيرة.
00:04:25كانت الفكرة وراء هذا المترجم هي إعادة كتابة الأجزاء الداخلية لـ Angular وكيفية
00:04:31ترجمة المكونات إلى تعليمات فعلية تعالج الـ DOM. لأن المترجم القديم
00:04:38كان يعاني من عدم كفاءة في بعض الجوانب، مما أدى إلى أحجام ملفات كبيرة بشكل غير ضروري.
00:04:44لذا قاموا بهذا المشروع الضخم لإعادة كتابة المترجم الداخلي. لماذا هذا مهم؟
00:04:52لأنه يمكن تسمية هذه المرحلة بـ “المرحلة المملة”. فمن عام 2017
00:05:01إلى 2020، لم يتغير الكثير ظاهرياً. تغيرت الكثير من الأمور داخلياً، وكانت هناك تعديلات طفيفة،
00:05:10لكن مجموعة الميزات الأساسية وطريقة بناء المكونات لم تتغير كثيراً.
00:05:16وهذا مهم لأن تلك الفترة شهدت منافسة شديدة
00:05:22في سوق أطر عمل جافا سكريبت. فقد شهدنا
00:05:27إطلاق Vue.js 2 في 2016، وتطورات هائلة في نظام React البيئي.
00:05:36أقصد، في 2018 تم تقديم React hooks. فبدا الأمر وكأن بقية نظام
00:05:43جافا سكريبت يتطور بسرعة فائقة، ولم يعجب هذا الجميع. بصراحة،
00:05:50بدت Angular راكدة. وهذا ليس بالضرورة أمراً سيئاً كما يبدو؛
00:05:57فالكثيرون قدّروا ذلك الاستقرار، خاصة مع كثرة الشكاوى من تغير كل شيء
00:06:03طوال الوقت في عالم جافا سكريبت. وبالطبع يبدو هذا كأنه دعابة
00:06:08إذا نظرنا إلى اليوم وإلى التطور المستمر والتغير الدائم الذي نراه مع الذكاء الاصطناعي
00:06:13كل يوم تقريباً. لكن هذا ما كان الناس يشتكون منه حينها. كانت تلك هي المرحلة المملة.
00:06:19وقد انتهت هذه المرحلة حوالي عام 2022 عندما تم تقديم
00:06:28الـ “standalone components” (المكونات المستقلة) مع إصدار Angular 14 بنسخة تجريبية.
00:06:33والفكرة هنا كانت ببساطة أنك لم تعد بحاجة لـ Angular modules بعد الآن.
00:06:42بدلاً من ذلك، يمكنك إضافة خاصية standalone لمكونك، وستتمكن
00:06:47من استخدامه في مكونات أخرى دون الحاجة لـ ng-modules. مع ذلك، كان بإمكانك الاستمرار في استخدامها،
00:06:55والدمج بينها وبين المكونات المستقلة كما تشاء؛
00:07:00لأن التوافق مع الإصدارات السابقة وتوفير مسار هجرة سهل للمطورين كان دائماً أولوية لفريق Angular.
00:07:05كانت تلك هي المكونات المستقلة، والتي تبعتها بسرعة في عام 2023
00:07:12نسخة Angular 16 مع ميزة “البريق” (Signals) وميزات أخرى كثيرة.
00:07:20مثل طريقة مختلفة لعرض المحتوى برمجياً باستخدام @if بدلاً من
00:07:26أمر ng-if. كما بدأت التجارب الأولى فيما يسمى
00:07:34بـ “zoneless Angular”. ولمن لا يعرف، كانت Angular منذ إطلاقها (Angular 2)
00:07:40تستخدم مفهوماً يسمى ng-zone أو zone.js، وهي مكتبة تقوم أساساً
00:07:46بالاستماع لجميع أنواع الأحداث التي تقع في الموقع مثل النقرات وطلبات HTTP وغيرها.
00:07:54ثم تقوم بتشغيل “كشف التغييرات” لمعرفة ما إذا كان الـ DOM يحتاج لتحديث
00:08:00استجابة لهذه الأحداث. ميزة هذا النهج كانت تجعل تحديثات الـ DOM
00:08:05تبدو سحرية؛ فخلافاً لـ React، لم تكن مضطراً لاستدعاء set state.
00:08:11لكن العيب كان في استخدام تقنية “monkey patching”، حيث تقوم المكتبة
00:08:17بحقن مستمعين لكل أنواع الأحداث، بكل ما يعنيه ذلك من عبء إضافي
00:08:22وزيادة في حجم ملفات المشروع. وبالتالي كانت أقل كفاءة من آلية React مثلاً.
00:08:28لذا كان الانتقال لـ “zoneless” خطوة كبيرة للأمام، وقد أصبح ذلك ممكناً
00:08:35بفضل الـ signals؛ لأن الفكرة وراءها هي أنه أصبح لديك الآن
00:08:40طريقة صريحة لإخبار Angular بتغير حالة معينة. وبات بإمكان الإطار تذكر
00:08:46أين تُستخدم هذه الحالة في الـ DOM، وتحديث هذا الجزء فقط.
00:08:52وهكذا أُدخلت التفاعلية الدقيقة (fine-grained reactivity) إلى Angular في 2023.
00:09:01لذا يُطلق على هذه المرحلة غالباً اسم “نهضة Angular”. فبعد
00:09:08المرحلة المملة والأيام الأولى الفوضوية المليئة بالتغييرات الجذرية مقارنة بـ
00:09:15Angular 1، استعادت Angular حب المجتمع مجدداً؛ لأنهم كانوا يخطون
00:09:23خطوات كبيرة نحو مستقبل يجعل Angular أخف وأسهل في الاستخدام،
00:09:30وأكثر تماشياً مع ما يراه الناس في أطر العمل الأخرى. الـ Signals
00:09:36مثلاً اشتهرت بفضل SolidJS، ولكن أعتقد أن Vue كانت من أوائل
00:09:43أطر العمل الكبرى التي استخدمتها، لكنهم سموها refs. على أي حال،
00:09:50هذا هو المسار الذي سلكته Angular. وبالنسبة لعام 2026 والمستقبل، سنرى
00:09:59بالتأكيد المزيد من التطور، مثل نماذج تعتمد على الـ signals. كما أن فريق Angular
00:10:06يتبنى الذكاء الاصطناعي عبر خادم MCP مدمج في واجهة السطر البرمجي (CLI) لتسهيل
00:10:13تطوير تطبيقات Angular بمساعدة الذكاء الاصطناعي وجعله مدركاً لجميع ميزاتها.
00:10:19لذا فهي قصة إطار عمل حافظ على استقراره وتوافقه مع الإصدارات السابقة
00:10:26طوال مسيرته، رغم أنه أعاد ابتكار نفسه مرة واحدة على الأقل، وربما أكثر
00:10:33حسب وجهة نظرك. لقد كان مستقراً للغاية. وأعتقد أن فريق Angular
00:10:39قام بعمل رائع، ونجحوا بالفعل في تغيير صورة Angular ولو قليلاً
00:10:46من إطار عمل ثقيل وصعب التعلم إلى إطار عمل أكثر حداثة.
00:10:54أحد الأشياء التي ميزت Angular دائماً هي أنها إطار عمل “متكامل الخدمات” (Batteries included)،
00:10:59حيث تجد فيها كل شيء: معالجة النماذج، التوجيه (Routing)، طلبات HTTP،
00:11:06حقن التبعيات، وإدارة الحالة عبر المكونات. كل هذا مدمج داخلها.
00:11:12لم تكن بحاجة للجوء لمكتبات خارجية، على عكس React التي تضطر معها
00:11:18لجلب مكتبات خارجية للتوجيه أو لإدارة الحالة وما إلى ذلك.
00:11:23وهذا بالطبع ما تقدره الكثير من الشركات. لذا شهدت Angular
00:11:29نمواً ثابتاً على مدار السنوات العشر الماضية إذا نظرت إلى منحنى نموها.
00:11:37لكن الحقيقة أيضاً هي أن React شهدت نمواً أكبر بكثير. لدرجة أنك لو أضفت
00:11:45منحنى React هنا، فإن منحنى Angular سيكاد يختفي. وخاصة منذ أوائل 2025،
00:11:54انطلقت React بقوة، ونحن جميعاً نعرف السبب؛ إنه الذكاء الاصطناعي.
00:12:00لأن الذكاء الاصطناعي، وكما قلتُ مراراً في فيديوهات سابقة، لديه مفضل واضح
00:12:06وهو React مع Next.js وTailwind، وليس Angular. فهل يعني هذا
00:12:13أن Angular قد ماتت أو أنه لا ينبغي عليك تعلمها؟ وما هو شكل مستقبلها
00:12:18بشكل عام في ظل وجود الذكاء الاصطناعي؟ حسناً، لا تزال Angular تُستخدم حتى اليوم
00:12:27من قبل شركات كبرى، بفضل استقرارها وتوافقها المستمر مع الإصدارات السابقة
00:12:34الذي أثبتته التجربة ولم يكن مجرد وعود. وبفضل نهجها المتكامل،
00:12:40تظل Angular شائعة في الشركات الضخمة. وبالطبع React شائعة جداً أيضاً
00:12:46في تلك الشركات، لكن أرقام تحميل Angular لا تعكس بالضرورة
00:12:53الاستخدام الفعلي أو الشعبية الحقيقية لـ Angular، خاصة في بيئات الأعمال الكبرى.
00:13:00وأستطيع أن أقول لكم من واقع هذه الدورة، أن لديها 850,000 طالب.
00:13:08وهذا الرقم ليس بعيداً عن عدد طلاب دورتي لـ React على Udemy.
00:13:15بالتأكيد هناك دورات React أكثر وأكبر على Udemy مقارنة بدورات Angular،
00:13:22لكن تجربتي الشخصية تختلف عما قد تستنتجه من تلك الرسوم البيانية فقط.
00:13:29فقد رأيت دائماً أن عملاء الشركات يقبلون على تعلم Angular بكثافة أيضاً.
00:13:36وهذا ما يجعلها حتى يومنا هذا خياراً رائعاً لبناء تطبيقات ويب
00:13:43حديثة. وهي حديثة جداً بالفعل بفضل “نهضة Angular” والميزات المخطط لها.
00:13:48بالطبع، الذكاء الاصطناعي هو العامل الذي يجب مراعاته، فهو يغير
00:13:57طريقة بناء البرامج وكتابة الكود. أصبحنا نكتب كوداً أقل؛ على الأقل أنا أفعل ذلك.
00:14:04أستخدم أدوات مثل Claude أو Cursor، والتي لدي دورات تدريبية عنها أيضاً بالمناسبة،
00:14:09ستجدون روابطها أسفل الفيديو. نحن نكتب الكود ونبني البرامج
00:14:14بطريقة مختلفة. لكن خياراتنا التقنية لا تزال مهمة. فنحن نريد استخدام
00:14:21تقنيات تحظى بصيانة جيدة وتحديثات أمنية وميزات جديدة
00:14:27تجعلها أكثر كفاءة أو تؤدي لأداء أفضل أو تتيح استخدامات جديدة
00:14:34قد تغنينا عن المكتبات الخارجية. لا نزال نفضل تقنيات كهذه.
00:14:40وعندما يتعلق الأمر بذلك، تظل Angular خياراً ممتازاً وموفقاً،
00:14:45تماماً مثل React، لنكون واضحين جداً. وقبل أن أتلقى أي تعليقات،
00:14:51نعم، Vue وSvelte رائعتان أيضاً. لكن هذا الفيديو، كما لاحظتم
00:14:57من العنوان والصورة المصغرة، يدور حول Angular. لذا نعم، لا تزال خياراً رائعاً.
00:15:02ونعم، الذكاء الاصطناعي يجيد كتابة كود Angular، خاصة إذا أعطيته السياق الصحيح،
00:15:08وهو أمر عليك فعله دائماً بغض النظر عن التقنية التي تستخدمها.
00:15:13لذا أعتقد أن Angular مهيأة جيداً لهذا المستقبل الذي يقوده الذكاء الاصطناعي.
00:15:19إذا كنت تعتقد أنه خلال ثلاث سنوات لن يكتب أحد أي كود على الإطلاق،
00:15:25وبالتالي لن تهم الخيارات التقنية، فستكون الأمور مختلفة بالنسبة لك بالطبع.
00:15:30لكنني لا أؤمن بذلك. فمن خلال استخدامي اليومي المكثف للذكاء الاصطناعي
00:15:35حيث يتم توليد معظم الكود الخاص بي بواسطته، أستطيع إخباركم أن التحكم فيه
00:15:41وتوجيهه واتخاذ القرارات واختيار التقنيات وهيكلة البرمجيات بات أهم من أي وقت مضى.
00:15:48ونعم، Angular لا تزال خياراً رائعاً هناك. كان هذا تاريخاً موجزاً
00:15:54عن Angular، إطار العمل الذي سيظل له دائماً مكانة خاصة في قلبي.
00:16:00لأنه كما ذكرتُ، كانت هذه أول دورة كبرى أطلقتها على Udemy.
00:16:07وقد غيرت الكثير بالنسبة لي؛ حيث سمحت لي بجعل صناعة الدورات مهنتي.
00:16:13كما غيرت حياة ومسيرة عدد لا يحصى من الناس، وقد تلقيتُ الكثير من الرسائل
00:16:19والآراء الرائعة. لذا، نعم، كانت Angular دائماً مذهلة، وهي مذهلة بالنسبة لي بشكل خاص.