مقارنة بين الفريمووركس والمكتبات Angular JS و React JS و Vue JS

سواء ان كنت مبرمج لغة (JavaScript) محترف أو متعلم، فلا بد لك في مرحلة ما، ان تعرف الفرق بين أطر العمل الرئيسة التي تدعم هذه اللغة. وهي (Angular JS) التابع لـGoogle ومكتبة (React JS) التابعة لـFacebook و (Vue JS) الذي طوره ايفان يوو.

هل تعلم أن ايفان يوو كان في السابق موظفا لدى قوقل، وعمل معهم على تطوير (Angular JS)؟

يجب ان ننوه من البداية، الى ان المقارنة بين أطر العمل والمكتبات المذكورة لا تعني معرفة ايها أفضل، وانما معرفة الانسب بينها لعملك الخاص. حيث انه بالإمكان الاستفادة من اي منها في برمجة مواقع الويب ذات الصفحة الواحدة (single-page-applications) او تطبيقات الهواتف الذكية الهجينة (hybrid mobile applications) بالإضافة الى صفحات الويب الديناميكية (dynamic web applications) بالاعتماد على لغة جافا سكربت (JavaScript) كلغة اساسية.

ماهي أطر العمل (Frameworks) والمكتبات (Libraries)؟

يعتبر كل من (Angular JS) و (Vue JS) اطر عمل كاملة تصلح لبناء واجهات مواقع الويب بشكل مستقل، اما (React JS) فهو ليس سوى مكتبة ضخمة تستخدم لبناء واجهات المستخدم (User interface). مما يعني الحاجة الى كتابة الكود داخل بيئة جافا سكربت (JavaScript) إذا قررت استخدام مكتبة (React JS).
اما الفريم وورك فهو مجموعة من مكتبات الأوامر الأساسية التي يحتمل تكرارها في كل مشروع لديك، الى جانب العديد من الاضافات (plugins) لتوفر عليك عناء بدء تطوير مشروعك من الصفر في كل مرة.
كما انه وعند استخدام المكتبات، انت المسئول الأول والأخير عن البحث داخل المكتبة عن أي امر ترغب في تنفيذه، اما الفريم ووركس فهي التي تقوم بهذا الأمر، حيث ترسل طلب الأمر الذي ادخلته الى احدى المكتبات التي بداخلها، ثم تمدك بالنتائج.

A close up of text on a white background Description automatically generated

في هذا المقال، سنتعرف على الفروق الأساسية بينها من عدة جوانب:

  1. الأداء.
  2. التطور.
  3. حالات الاستخدام.
  4. الانتشار.
  5. توفر الدعم.
  6. توفر فرص العمل.

    ايها أدائه أفضل؟

لعمل مقارنة بينها من حيث الأداء لابد لنا أولا من التطرق الى امر مهم جدا، الا وهو الدوم (Document Object Model/ DOM) و يمكن تعريف الدوم على انه هيكل الكود الخفي وراء تصميم وتنسيق واجهات المستخدم (User Interfaces). في الصورة التالية، مثال على (DOM) بسيط.

A screenshot of a cell phone Description automatically generated

لفهم معيار المقارنة لابد من معرفة نوعي الدوم (DOM) الرئيسيين.

  •  (Real DOM) الدوم الحقيقي.

الدوم الحقيقي يشبه الكود العادي في جافا سكربت (JavaScript) مثل الذي رأيته في الصورة السابقة. وباستخدامك لهذا النوع، سيتعين عليك كمبرمج كتابة ووضع كل سطر كود في نماذج الكائنات (Node) في الدوم الخاص بك بنفسك.

ومع اعتماد اغلب تطبيقات الويب حاليا على ما يعرف بواجهات المستخدم الديناميكية (dynamic interfaces) او (Single Page Applications – SPAs) التي تعمل على تحميل جميع محتويات وخصائص الموقع في نفس الصفحة دون الحاجة الى القفز خارجا الى نافذة أخرى، فإن العمل باستخدام هذا النوع يعد صعبا نوعا ما.

  • (Virtual DOM) الدوم الافتراضي.

يعد العمل باستخدام هذا النوع أكثر سهولة وسرعة. يمكن تعريفه على انه امتداد لنفس نماذج الكائنات (Nodes) الخاصة بـ HTML.

هل اختلط الأمر عليك؟ حسنا، الدوم الحقيقي هو ايضا امتداد لنماذج الكائنات (Nodes) الخاصة بـ HTML, ولكن في الدوم الافتراضي يصبح الأمر أكثر بساطة وسرعة. ببساطة يمكن اعتباره “امتداد أصغر لامتداد رئيسي”.

يعمل الدوم الافتراضي على خلق ما يعرف بين المبرمجين باسم (shadow tree) داخل الكود الخاص بك، مما يعني عدم حاجتك الى كتابة كل الكود بالتفصيل بنفسك. كما انها منفصلة عن باقي نماذج محتويات واجهة المتصفح الفعلية، مما يعني توفير الكثير من الوقت والجهد على المبرمج الذي يعمل باستخدام احدى اطر العمل (frameworks) التي تدعمها، وبالتالي يعطي ذلك افضلية لها مقارنة مع اطر العمل التي لا تعمل سوى باستخدام الدوم الحقيقي.

  • لسوء الحظ، يستخدم إطار العمل (angular JS) الدوم الحقيقي مما يعني كما اوضحنا سابقا، ان المبرمج هنا بحاجة الى الغوص بشكل عميق في الكود الخاص بمشروعه وكتابته وتدقيق كل شيء بنفسه.
  • في المقابل، ورغم ان (React JS) ليس أول من استحدث الدوم الافتراضي الا انه يدعمه ويتيح استخدامه للمبرمجين مجانا.

  • وحتى (Vue JS) فقد أعلن مطوروه بدأ دعمه للدوم الافتراضي منذ إطلاق الجيل الثاني منه (Vue JS 2.0) رسميا.

:يمكن القول باختصار

ان التعامل مع (Angular JS) أصعب وأكثر استنزافا للوقت، بسبب الدوم الحقيقي. اما البرمجة باستخدام (React JS) او (Vue JS) فتعد أسهل وأكثر فاعلية، بسبب الدوم الافتراضي.

كمثال للتوضيح، تخيل فقدانك لتركيزك او ارتكاب خطئ صغير اثناء العمل على بناء واجهة مستخدم (User Interface) باستخدام الدوم الحقيقي! ستضطر الى البحث وفحص كل سطر من الكود الخاص بك لتصحيح الخطأ او لتغيير امر صغير بنفسك. بينما في (React JS) او (Vue JS) لا يعد ذلك أمرا معقد ابدا. فمعظم محتويات الـ (Node) لست انت من قمت بكتابتها اصلا فهي افتراضية ووجدت تلقائيا.

ايها يوفر خصائص وخيارات اوسع؟

في هذا النطاق يحتل (Angular JS) الصدارة. حيث يمتلك نموذج عمل مميز جدا يعرف باسم (MVC model) أو (Model–view–controller) ونظام تنسيق للنود مدمج فيه كليا، كما يوفر آلاف المكتبات (Libraries) وسهولة بالغة في عمليات ربط البيانات ذات الاتجاهين (two-way data binding) وحزم توجيه (routing packages) قوية جدا. بالإضافة الى وواجهته المنظمة بشكل احترافي جدا.

إذا كنت لا تعرف ما هو (MVC Model) فأليك الآتي:

يعبر اختصار (MVC) عن نظام (Model – View – Control) وهو أحد نماذج معمارية البرمجيات ويعمل على تقسيم تطبيقات الويب الى ثلاثة اقسام رئيسية.

  1. النماذج (Model) وتعبر عن البيانات الرئيسية، او مدير الاوامر والقواعد الأساسية في التطبيق. وهي العملية الأهم في هذا النمط، حيث تعتبر البنية الديناميكية الأساسية للتطبيق.
  2. العرض (View) وهو الواجهة الفعلية المعرضة للمستخدم. أي المرئيات والمعلومات والأشكال التي تتكون منها الواجهة.
  3. التحكم (Controller) وهو الجزء الذي يحول الأوامر التي يدخلها المطور الى شكلها في النماذج والعرض (Model & View).

يعمل هذا النمط على تقليل الوقت الذي تستغرقه صفحة ويب معينة بالتحميل فور طلبها من قبل المستخدم، من خلال تقليص عدد العمليات التي تحدث في الخلفية، مما يحسن تفاعلية واجهة المستخدم (User interface responsiveness).

الى جانب قدراته على ادارة عمليات ربط البيانات ذات الاتجاهين (Two-way Data Binding) مما يتيح للمطور اضافة تعديلاته او الغاء اوامر معدة مسبقا في واجهة المستخدم، في نفس وقت عرضها، الأمر الذي يوفر ديناميكية وتفاعلا أكبر مع المستخدم.

اما (React JS) فهي أكثر من مجرد مكتبة تختص بتطوير الواجهات الأمامية (Front-end Development) فقد تم بنائها منذ البداية لتكون الأداة الأبسط والأكثر توافقا. كما تجعلها إمكاناتها الكبيرة مقارنة بحجمها الذي لا يتجاوز 43KB منافسا مهم عند الحديث عن الأداء.

أضف الى ذلك دعمها للدوم الافتراضي (Virtual DOM) الذي يعطي المطور مساحة كبيرة جدا من التحكم في حجم امتدادات الكود، مما يعني انه لا يتم تحميلها بشكل كامل عند طلب الصفحة من قبل المستخدم وبالتالي حجم بيانات اقل وسرعة أكبر.

حالة (Vue JS) لا تختلف كثيرا عن (React JS) فقد تم تصميمه ليكون إطار عمل بنائي (Progressive Interface Building Framework) يتفاعل مع اي من اطر العمل والمكتبات الأخرى بشكل سلس جدا. اضافة الى حرص مطوريه على جعله سهل التعلم قدر الإمكان، لضمان انتشاره بفترة قصيرة جدا.

مكتبة (React JS) وإطار العمل (Vue JS) هما الأقرب ليتم المقارنة بينهما بدلا من مقارنتهما مع (Angular JS) ويرجع السبب في ذلك الى أن مهمتهما الأساسية مماثله نسبيا. كما انهما يتشاركان في الكثير من الخصائص، مثل استخدام الدوم الافتراضي والاستفادة من مكونات العرض التفاعلية القابلة للتركيب (Reactive & Composable View Components) وتركيز كل منهما على الأجزاء الأساسية من المكتبات مما يترك العمليات الأخرى مثل التوجيه إلى اطر العمل او المكتبات الأخرى المستخدمة معها.

ما هو أفضل استخدام لكل منها؟

يمكن اعتبار هذا أهم سؤال في مقارنتنا.

اين استخدمها؟

حسنا، بكل بساطة. إذا كنت تنوي تطوير تطبيق ويب يحتاج الى واجهة ديناميكية جدا او كبيرة جدا (large-enterprise-grade applications) فلا شك في أن (Angular JS) هو خيارك الأمثل، فهو يعد الأداة الأعلى كفاءة في تصميم واجهات المستخدم (User Interfaces) التي تتطلب التغير باستمرار، بناء على اوامر المستخدم (User).
على صعيد آخر، إذا كان مشروعك يتطلب السرعة والدكاء، فإن استخدام مكتبة (React JS) او إطار العمل (Vue JS) يعد الأكثر فاعلية. فكلاهما يمتلك سرعة ممتازة في تحميل الصفحات، الى جانب حجم التطبيقات المنتجة من خلالهما الخفيف، بسبب الدوم الافتراضي الذي تحدثنا عنه سابقا. مما يمكن الصفحات من التحميل بسرعة كبيرة في محركات البحث مثل Google, Bing وغيرها.

أيها يعد اكثر شعبية؟

بالحديث عن الشعبية وكثافة الاستخدام عامليا، بقي (Angular JS) يحصد المستخدمين والمعجبين حتى نهاية 2016 ثم بدأ بخسارتهم لصالح (React JS) تدريجيا.
انشأت مكتبة (React JS) عام 2013 وبعد ثلاث سنوات اصبحت المنافس الرئيسي لـ (Angular JS) الذي كان أشهر اداة لتطوير واجهات المستخدم (User Interface) ليس هذا فقط، فشعبية (React JS) في تزايد مستمر. حيث يقدر المختصون ان مكتبة (React JS) تستخدم حول العالم حاليا من قبل أكثر من 1.300 مطور ويب، وأن أكثر من 94.000 واجهة مستخدم، قد تم تصميمها باستخدامها.
اما (Vue JS) فهو الأحدث عهدا، تم اطلاقه عام 2014. ولا تبدوا 7 سنوات مدة كافية لجمع عدد كبير من المعجبين بوجود منافسين كبيرين جدا مثل (Angular JS) و (React JS). ولكن! لا يمكن انكار العمل الذي قام به ايفان يوو لزيادة شعبيتها. فهي تلقى اهتمام متزايدا من المطورين يوما بعد يوم، الى جانب بدء استخدامها بشكل رئيسي من قبل شركات كبيرة جدا في عالم البرمجيات. شركات مثل Adobe و Xiaomi و  Grammarly و Alibaba Group وغيرهم.

رغم أن (Angular JS) هو الأقدم والأكثر استخداما لاحتوائه على الكثير من الخيارات والخصائص والمكتبات الا انه ليس الأكثر تفضيلا بين المطورين بكل تأكيد.

ايها يملك الدعم الأكبر؟

إذا أردنا مقارنها من منظور الدعم المقدم من شركاتها الرئيسية او من المطورين حول العالم، فهذا غير عادل بالنسبة لـ (Vue JS).

حيث ان كل من (Angular JS) و (React JS) مدعومتان بشكل كبير جدا من شركتاهما الكبيرتين جدا في عالم التكنلوجيا! جوجل وفيسبوك. فما الذي قد يمنح (Vue JS) اي قدرة على المنافسة امامهما!

  • يعتبر (Angular JS) الأقدم بينهم، مما أتاح له جمع اعداد هائلة من المستخدمين والمكتبات والمصادر خلال فتره حياته المقدرة بتسع سنوات. إذا كنت مبتدئ يحاول تعلم العمل مع (Angular JS) من الصفر، فأنت محظوظ جدا، لتوفر الكثير والكثير من مصادر تعلمه عبر الإنترنت. اولا، والأكثر تميزا، Stack Overflow والذي يعتبر بمثابة بنك الأحلام لكل ما يخص برمجة وتطوير مواقع الويب. فمع خدمات كثيرة اهمها خدمة Q&A أي سؤال وجواب يمكنك طرح اي استفسار يجول في خاطرك والحصول على اجابة من آلاف المطورين حول العالم. مصدر آخر للتعلم قد يكون موقع Udemyالذي يوفر دائما دورات وورشات عمل تدريبية لتعلم تطوير الواجهات الأمامية (Front-end Development) باستخدام (Angular JS).
  • اما مكتبة (React JS) الخاصة بفيسبوك، فهي ليست حديثة العهد ايضا. حيث تمكنت هي الأخرى من جمع عدد كبير جدا من الدعم والمحتوى خلال سنواتها الثمانية. سواء من الدعم الرسمي لشركة فيسبوك لها Where To Get Support او من خلال مشبكات ونقاشات الدعم المتعددة بين المطورين. مثل Spectrum’s ReactA picture containing vector graphics Description automatically generated  وHashnode’s React community وDEV’sspectrom والكثير من المصادر الأخرى التي توفر دعما كبيرا جدا لها.

  • على اية حال، لا يزال (Vue JS) في طور الانتشار حاليا، كما انه يحصل باستمرار على اقصى دعم تستطيع شركته الأم توفيره. عبر Vue JS community الى جانب مساهمين آخرين مثل مطوري شركة Netlify و Netguru كما انه يمتلك تفضيل جيدا بين اوساط مطوري الويب في وقتنا الحالي. مما يعني انه قابل للتطور والتوسع بشكل كبير في المستقبل. إذا قررت تعلم بناء الواجهات الأمامية للمستخدمين (Front-end Development) باستخدام (Vue JS) فإن اغلب الدعم والمحتوى الذي ستعثر عليه، سيكون مقدم من شركته الأم فقط.
  • ولكن! يبقى ذلك الدعم جيدا الى حد ما, فهم يقدمون منتديات للنقاش والحوار والتواصل، فيها اعداد لا بأس بها من مطوري الويب حول العالم. بكل بساطة يمكننا الحكم هنا بأن (Vue JS) لا يزال متأخرا بشكل كبير مقارنة مع (Angular JS) و (React JS) في هذا النطاق.

ايها يعد مربحا أكثر؟

للمقارنة بين كل من (Angular JS) و (React JS) و (Vue JS) من حيث المردود المالي، جمعنا لك المعلومات التالية.

.أولا، بالنظر الى عدد الوظائف المعروضة لكل منها على مواقع العمل الشهيرة

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

كما ترى، يعتبر العثور على فرصة عمل بناء على خبراتك السابقة في العمل مع احدى الفريم ووركس او المكتبات (Libraries) متساوية تقريبا بين (Angular JS) و (React JS). مما يعني ان تعلم العمل مع احداهما دون الأخرى سيكون ذا قيمة متماثله.
في الجهة الأخرى، لا يبدوا ان (Vue JS) يوفر الكثير من فرص العمل حاليا.رغم ارتفاع نسب الطلب عليه في الصين والهند في وقتنا هذا. ولكن، هل تعتقد أنك تملك فرصة الحصول على وظيفة في الهند أو الصين؟
من زاوية اخرى، قمنا بمقارنة متوسط دخل المبرمج المختص في واحدة منها دون الأخرى في الولايات المتحدة الأمريكية، حيث اثبتت  الإحصائيات تفوقها من حيث متوسط الدخل السنوي للمبرمج فيها فوجنا المعلومات التالية
  • يحصل مبرمج (Angular JS) في الولايات المتحدة الأمريكية على 116.700 دولار امريكي سنويا، ما يعادل 95.85 دولارا للساعة الواحدة. كمبتدئ يحصل على قرابة 76.570 دولارا سنويا، بينما قد يصل اجر المحترفين الى 162.491 دولار سنويا.
  • في المقابل، يحصل مبرمج (React JS) في الولايات المتحدة الأمريكية على ما مجموعه 125.000 دولار سنويا أي 64.10 دولار في الساعة. بدأ من 65.000 دولار في السنة للمبتدئين، و195.000 دولار للمحترفين.
  • اما بالنسبة لـ (Vue JS) فقد يصل الأجر السنوي للمبرمجين الذين يجيدون العمل معه الى 76.000 دولار، والى 113.000 إذا كانوا محترفين.

LEAVE A REPLY

Please enter your comment!
Please enter your name here