لا أدري إن كانت الجافاسكربت قد خربت علينا مجال البرمجة ام قامت بإصلاحه عن طريق توفير كم كبير جدا من التقنيات التي يمكن لكل واحدة منها ان تعالج مشكلة من المشاكل التي يعاني منها المبرمجون، فأجزم انه و طيلة كتابتنا هذا المقال قد ظهرت على الأقل 10 مكتبات جديدة في الجافاسكربت منها على الأقل واحدة قد تجد ذروتها من الإستخدام في المستقبل.
لكن من بين كل مكتبات الجافاسكربت، سارعت شركات كبرى تارة او مطورون عاديون تارة أخرى في إستخراج الأساس و المحركات الخاصة بالجافاسكربت مثل الـ V8 و ECMA اللذان جعلا الجافاسكربت شيئ آخر تماما !
من بينها الـ Angual و React و Vuejs، هذه التقنيات الثلاث التي تعتمد بشكل شبه مباشر على لغة البرمجة جافاسكربت أصبحت محط أنظار الكثيرين منذ إطلاقها، بل أصبحت الآن ضرورية و قد عوضت الكثير من التقنيات و المكتبات الأخرى، خصوصا انها لينة و سهلة الإستخدام و تجلب الكثير من الخصائص. و بالرغم من ذلك لازال المستخدم او المبرمج المقهور يحاول إختيار أفضل إطار من بين هذه الإطارات الثلاثة و محاولة إختيار الأفضل و الأكثر تميزا من بينها لإحترافها و إستخدامها.
و في هذا المقال سنحاول إخضاع هذا الثلاثي للشرح المفصل مع إستعراض كل التقنيات الخاصة بكل إطار، و إيجابياته و سلبياته و متى تقوم أيضا بإستخدامه.
ما هو إطار Angular، أهم ميزاته، سلبياته و متى تستخدمه ؟
للـ Angular تاريخ عميق قليلا، فهي أول إطار عمل (Framwrok) من تطوير شركة جوجل العملاقة، أول إصدار لها كان سنة 2016 و حملت إسم AngularJS، و كانت حينها تستخدم بشكل كبير فقط في صناعة صفحات الويب SAP او Single Application Page و هي مواقع الويب التي تقوم بعملها دون تحديث الصفحة ( مثلا عند البحث في جوجل ستجد انه أخذك لصفحة نتائج البحث دون تحديث الصفحة )، ثم بعدها جائت إصدارات أخرى مثل إصدار Angular 2 سنة 2017 إلى حين إصدار Angular 8 مع إصدار Angular 9 مؤخرا في نسخة غير مستقرة.تعتمد الـ Angular على معمارية MVC بحيث تفصل بين العمل الخلفي الذي يتم من خلاله بناء قواعد المشروع، و العمل الأمامي الذي يتم من خلاله بناء واجهة المشروع، و هو ما يميز Angular على إطارات جافاسكربت أخرى.
حين تنتقل الى الـ Angular ستصادف الكثير من الميزات في هذا الإطار، أولا و لأن الـ Angular يعتمد على الـ TypeScript فإنك ستجد سهولة كبيرة في كتابة الكود البرمجي بالجافاسكربت و ستختصر عليك الكثير في أسطر قليلة. يعتمد الـ Angular في بيئة عمله على صناعة Components و هي أجزاء في صفحة الويب مثلا Component خاص بالتسجيل، و Component خاص بالبحث و ما الى ذلك، و في الصفحات التي تقوم ببنائها كل ما عليك فعله هو تركيب الوسم (Tag) الخاص بالـ Component من أجل إشتغاله، مثلا <login></login>، و هذا يبرز سهولة في إنشاء صفحات الويب بكل سهولة.
سهولة تعديل الكود في الـ Angular مثالية جدا، فبفضل تقسيم الـ Compontents سيمكنك صناعة التحكم في جزء واحد من المشروع دون التأثير على باقي الأجزاء، و لإعتمادها على الجافاسكربت سيمكنك تنصيب مكتبات أخرى او إستخدام تقنيات أخرى تتماشى معها في المشروع البرمجي مثل Webpack لإدارة موارد المشروع.
اما الميزة الأكبر للـ Angular أنها ليست محصورة فقط على مواقع الويب، بل متاحة لتطوير حتى تطبيقات الموبايل و تطبيقات سطح المكتب.
بالرغم من أنه إطار إحترافي و مثالي، لكنه يأتي بمجموعة من الـ Assets التي توجب ان تكون لديك نظرة قبلية عليها مثل الـ TypeScript، ناهيك على انه ننصحك بتعلم الـ Angular في نسخته الأخيرة، فللأسف نجد أحيانا تغيير جذري او كبير جدا في الكود الخاص بالـ Angular بين النسخ مما يجعل إستمرارية تحسين التطوير أمر صعب.
تعدادية دعم المنصات سلبية أحيانا، بحيث ان تطوير تطبيق ويب بالـ Angular مختلف عن تطوير تطبيق موبايل و مختلف عن تطوير تطبيق سطح المكتب، و ستجد نفسك كما لو كنت تطور بإطار آخر كليا.
آداء الـ Angular ضعيف نسبيا مقارنة مع الـ Vuejs و React و سنرى هذا في المقارنة النهائية، قد تلاحظ ان الـ vuejs أسرع من حيث الآداء مثلا.
متى تستخدم الـ Angular ؟
في كل مرة تريد إنشاء منصة ويب متكاملة و حركية ذات ديناميكية وحيدة (SPA)، او حين تريد فقط إنشاء موقع بشكل أكثر إحترافية فإن الـ Angular جيدة لك، يمكن أيضا إعتماد الـ Angular في تطوير تطبيقات سطح المكتب بحيث توفر سهولة في الإستخدام و العمل. تقنيا لا ننصحك بإستخدام الـ Angular في تطوير تطبيقات الموبايل إذ لازال يلزمها الكثير من أجل تهيئة تطبيق صحيح من حيث الهيكلة.
ما هو إطار React ، ميزاته، سلبياته و متى تستخدمه ؟
شركة فيسبوك كانت منذ الأزل تحاول البحث عن بديل للجافاسكربت في العديد من خدماتها على الويب من بينها ميزة الشات و المراسلة في فيسبوك التي إعتمدت في بداياتها بشكل كلي على الـ Ajax، لكنها الآن و بثورة الجافاسكربت صنعت لنفسها إطار خاصة يحمل إسم React يقوم بالكثير من الأغراض شبيهة بالـ Angular. بدأت فيسبوك مشروعها هذا لوحدها في البداية قبل ان تتيحه بشكل مفتوح المصدر ليشارك فيه كل المطوروين من كل أنحاء العالم.إن قمت بالبحث عن الـ React ستجد الكثير من المفاهيم الأخرى مثل React Native او Redux او ReactJs، و سنشرحها لاحقا في هذا المقال لكن مبدئيا تركيزنا في هذه التعريفات يصب على الـ ReactJs. تعتمد الـ React هي الأخرى على مبدأ صناعة الـ Components بحيث تقوم بصناعة عناصر مخصصة في الصفحة و يمكن التحكم في كل عنصر لوحده، ثم إظهاره على شكل View في صفحة الويب، نفس مبدأ الـ Angular تقريبا.
للـ ReactJs بعض الميزات القوية التي قد يسيل لعابك لإستخدامها، أهم شيئ تعدادية الإستخدام فمثلا إستخدام الـ React في صناعة تطبيقات الموبايل عبر React Native أفضل بكثير من إستخدام تقنيات أخرى لبناء تطبيقات الموبايل مثل Angular ، فهي تمتلك اليد العليا حين يتعلق الأمر بصناعة تطبيقات موبايل Hybrid.
سرعة الـ React جيدة أيضا مقارنة مع Angular و يمكنك ملاحظة ذلك جليا في حالة صناعتك لتطبيق ويب يعتمد على السرعة في الإرسال و الإستقبال دون الحاجة الى تحديث الصفحة ( مثلا شات فيسبوك ).
و الميزة الأفضل في React إعتمادها على تقنيات صلبة مثل Redux التي تساعدك على صناعة تطبيقات تابثة و تشتغل على كافة الأنظمة بإحترافية، و يوجد الكثير من التقنيات الأخرى و الإطارات التابعة للـ React.
بالرغم من ميزاتها الجيدة، لكن يوجد سلبيات قد تُبعدك عن إستخدام الـ React أبرزها و أكثرها أهمية انها ذات كود برمجي صعب المراس، ستجد سهولة كبيرة جدا في فهم و إستغلال الكود البرمجي في Angular او vuejs عن محاولة التلاعب به و العمل به في React.
المشروع البرمجي الخاص بالـ React أيضا قد يكون صعب التعامل بسبب الـ Assets الكبيرة، و تهيئة مشروع بالـ React يحتاج الى بعض الوقت و الجهد.
متى تستخدم الـ React ؟
بشكل كبير ننصحك بإستخدام الـ React Native بشكل أساسي في تصميم و تطوير تطبيقات الموبايل بإحترافية و سهولة، في الويب ننصحك بإستخدام الـ React لصناعة مشاريع برمجية ضخمة قليلا كون ان مشاريع بسيطة قد لا تساعدك الـ React بل فقط ستزيد الطين بلة و تجعل إنشائها أمر صعب.
ما هو إطار Vuejs ؟ ما أهم ميزاته و سلبياته ؟ و متى تقوم بإستخدامه ؟
على عكس الـ Angular المطور من جوجل او React المطور من فيسبوك، فإن إطار Vuejs لم يتم تضمينه من طرف شركات كبرى، بل كان في البداية مجرد مشروع لشخص واحد يُدعى " إيفان يو "، لتقوم لاحقا شركات مثل Netlify بتضمين المشروع و العمل عليه و تطويره.إطار الـ Vuejs المبني على الجافاسكربت كما يحمل إسمه بالطبع، و هو إطار للويب يعتمد على معمارية Model - View - View Model معروفة إختصاراً بـ MVVM، و هي شبيهة قليلا بمعمارية الـ MVC من حيث المبدأ لكن ليس من حيث العمل، و يقوم هذا الإطار أيضا بصناعة تطبيقات ويب سريعة، تدعم الـ SPA، مع خفة و رشاقة في إرسال و إستقبال المعطيات. كما ان الـ Vuejs واسعة الحيلة اذ تضم مجموعة من المكتبات الأخرى القوية التي تساعدك على بناء تطبيقات ويب إحترافية جدا جدا مثل Vuex و Vuetify الذي يأتي بكم هائل من ترشيحات التصميمات لبرمجيات الويب خاصتك.
أهم و أقوى ميزة في الـ Vuejs هي سهولة الإستخدام او الإستخدام المباشر، بل يمكنك مباشرة نسخ الـ CDN الخاص بالإطار و إدراجه في صفحة ويب ثم كتابة كود Vuejs و سيشتغل مباشرة، لا CLI، لا تنصيب برمجيات أخرى و لا أي شيئ آخر، لكن بالطبع في حالة أردت بدئ مشروع ضخم جديد سيتوجب عليك تنصيب الـ CLI الخاص بالـ Vue من أجل تسهيل تنصيب الإطار و كل مكوناته الأخرى الى جانب مكتبات أخرى أيضا.
التقسيم و هيكلة الكود أيضا من إيجابيات هذا الإطار، فهو بسيط جدا في الكود الخاص به، في الحقيقة الكثير من الأشخاص الذين إنتقلو من Angular او React نحو الـ Vuejs إعتقدو ان كود Vuejs أبله نوعا ما لسهولته و أنه لا يقوم بنفس الغرض الذي يقوم به كود Angular او React لمدى بساطة الكود، و العجيب انه يقوم بنفس المهمة.
يستخدم الـ Vuejs تقسيما جيدا للـ Components الخاصة به أيضا، بحيث نجد مثلا Methods أساسية فور تركيبها فقط صار الـ Component الخاص بك.
سهولة الإدراج أيضا يمنح الـ Vuejs القوة، فسواء كنت تريد تطوير موقع على ووردبريس او اي CMS آخر، او تريد إدراجها في تطبيق مبني على إطار عمل آخر مثل Laravel او غيرها، فإنه يمكنك إدراج الـ Vuejs بسهولة بالغة، قد تجد نفس الخيار متاح في الإطارين أعلاه لكن قد يكون الإدراج متعرجا بعض الشيئ.
إلى جانب تقنيات الويب، يمكن للـ Vuejs تصميم و تطوير تطبيقات الموبايل عن طريق الـ Vue Native، بالرغم من ذلك فهي ليست بتلك الشعبية و لازال ينقصها الكثير، لذلك إن كنت تفكر في صناعة تطبيق موبايل Native عن طريق الـ Vue فقد يكون قرارا سيئا بالنسبة لك. فالـ Vuejs تعتبر سلاحا فتاكا في تطبيقات الويب، لكنها عكس ذلك في مجالات أخرى.
متى تستخدم الـ Vuejs ؟
إن كنت تريد بدئ تطبيق ويب إحترافي، مثالي، سهل في التعامل و سلس في الكود فلا تفكر مرتين في إستخدام الـ Vuejs، غير ذلك لا ننصحك بإستخدامها مبدئيا في تطوير تطبيقات الموبايل او تقنيات أخرى.
إذن من الأفضل ؟
قد تختلف الإجابة حسب المتطلبات، لكن بشكل خاص الـ Vuejs تتألق كثيراً عن ناظريها الـ Angular و الـ React سواء من حيث سهولة الكود المكتوب، سهولة الخدمات المدرجة (Vuex مثلا)، كما إدراجها في أي تطبيقات ويب تم تطويرها مسبقا أمر سهل جدا، الكود الخاص بها يمكن لأي مطور جافاسكربت سابق فهمه و إستخدامه ( صدقني ستجد صعوبة في الـ React إن كان هذا أول إطار تنتقل مباشرة إليه بعد إحترافك الجافاسكربت )، و غيرها من الميزات.قد يكون الـ React Native بديلا جيدا لتطوير تطبيقات الموبايل بحالة جيدة و إحترافية متفوقة على الـ Angular و Vuejs حتما.
أما الـ Angular فنتمنى من جوجل ان تطورها أكثر او على الأقل نجد سرعة و إستخدام أفضلين في النسخة 9 منها، الـ Angular جيدة في تضمينها مع تطبيقات جوجلية مثل Firebase بالرغم من انه نفس التقنية يمكن إدراجها في إطارات أخرى، لكن بشكل عام جيدة .