Vue vs React: ماذا تختار في عام 2021؟

في بداية مشروع تطوير تطبيق ويب جديد، سيكون لدى أي مطور معضلة ملحة: ما هو أفضل إطار عمل لهذا المشروع؟ على الرغم من أننا لا نستطيع أن نقدم لك إجابة واضحة، إلا أننا نود أن نقترح عليك سؤالًا جديدًا: Vue vs React: ماذا تختار في عام 2021؟في بداية مشروع تطوير

عند تحديد إطار JavaScript الذي يجب اختياره لمشروع حالي، عادةً ما يتعلق الأمر بـ Angular vs React vs Vue. في هذه المقالة، سنقوم بإجراء مقارنة وجهاً لوجه بين React وVue.

1. ما هو فيو؟
2. ما هو رد الفعل؟
3. أداء Vue مقابل React
4. شعبية Vue مقابل React
5. Vue مقابل إدارة حالة React
6. الاختلافات الرئيسية بين Vue وReact
7. تحسين محركات البحث: Vue vs React
8. أيهما أفضل، Vue أم React؟
9. هل سيحل Vue محل React؟
10. هل React أسهل من Vue؟
11. أمثلة على التطبيقات المبنية باستخدام React
12. مثال للتطبيقات التي تم إنشاؤها باستخدام Vue
13. الخلاصة: Vue vs React: ماذا تختار في عام 2021؟
1. ما هو فيو؟
أطلق على Vue اسم "الإطار التقدمي"، الذي أطلق عليه إيفان يو، مبتكره، أول ظهور علني لـ Vue في عام 2014. تم استخدامه في البداية حصريًا في الصين، ويستخدم الآن إطار عمل JavaScript الشهير هذا في جميع أنحاء العالم ويعد من بين أفضل الخيارات لتطوير واجهات المستخدم البديهية بالإضافة إلى تطبيقات الصفحة الواحدة (SPA).

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

Vue هو مشروع مفتوح المصدر، يتم تطويره بشكل مستمر وصيانته من خلال مجتمعه المتنامي. هناك الكثير من الأسماء الكبيرة المرتبطة بـ Vue، مثل BuzzFeed وGrammarly وNintendo وTrustpilot وغيرها الكثير.

نص بديل

2. ما هو رد الفعل؟
من الناحية الفنية، React ليست إطار عمل، فهي مكتبة JavaScript تُستخدم في تطوير الويب للعناصر التفاعلية على مواقع الويب وواجهات المستخدم. تم إنشاء React بواسطة Jordan Walke أثناء عمله في Facebook، ويتم استخدامه أيضًا في إنشاء SPA وتطبيقات الهاتف المحمول.

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

نص بديل

3. أداء Vue مقابل React
عندما يتعلق الأمر بالأداء، نظرًا لأن كلاً من Vue وReact يشتركان في عناصر مشتركة، فهما متساويان بشكل عام. يستخدمون التحميل البطيء لزيادة معدلات الأداء وتقليل أوقات التحميل وDOMs الافتراضية.

يتمتع كل من Vue وReact بأداء ممتاز، ولكل منهما مزاياه الخاصة. على سبيل المثال، يعد تخصيص الذاكرة وأوقات بدء التشغيل أفضل قليلاً مع Vue، بينما في وقت التشغيل، تأخذ React زمام المبادرة.

ومع ذلك، هناك حالات حيث يكون هناك اختلاف واضح في الأداء بين الاثنين. على سبيل المثال:

يؤدي تعديل حالة مكون React إلى إعادة تصيير جميع المكونات في شجرتها الفرعية.
في Vue، يتم تعقب هذه التبعيات، لذلك يتم منع إعادة العرض غير الضرورية.
من بين الاثنين، يمكن لـ Vue التعامل مع معدل إطارات مرتفع — 10 إطارات/ثانية، مقارنةً بـ React بمعدل 1 إطارًا في الثانية.

4. شعبية Vue مقابل React
إحدى الطرق الجيدة لقياس مدى شعبية إطار العمل أو المكتبة هي معرفة عدد النجوم الموجودة في مستودعات Github الخاصة بهم.

نص بديل

كما ترون، منذ عام 2017، كان Vue موجودًا مع React من بين الإطارات الأكثر شيوعًا.

اعتبارًا من عام 2021، أصبح لدى Vue 181 ألف نجم على Github، ويمكن اعتباره إطار عمل JavaScript الأكثر شيوعًا. في المقام الثاني، تقترب React من 165 ألف نجم، وهي مستمرة في النمو.

وفقًا لمؤشرات Google، على مدار الـ 12 شهرًا الماضية، كانت الشركات تتطلع إلى توظيف مطوري React، تليها Vue وAngular في معركة متقاربة. مع أخذ ذلك في الاعتبار، فإن وظائف React هي الأكثر شعبية، تليها Angular، ثم Vue - هكذا بدا سوق العمل في عام 2020.

هناك عامل آخر هنا وهو مستخدمي كل إطار عمل. على سبيل المثال، من بين مستخدمي Vue، هناك Trustpilot وBMW وVice وNintendo وAdobe Portfolio وEuronews وغيرها الكثير. من ناحية أخرى، فإن BBC، وAirbnb، وFacebook، وPayPal، وNetflix، وInstagram، والعديد من الأسماء الشائعة الأخرى، تستخدم React.

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

إعادة إحياء

نص بديل

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

فويكس

نص بديل

6. الاختلافات الرئيسية بين Vue وReact
نص بديل

كيف تكتب Hello World في React؟
نص بديل

كيف تكتب Hello World في Vue؟
نص بديل

7. تحسين محركات البحث: Vue vs React
إذا كنت تستخدم React أو Vue، فستحصل على SPA (تطبيق صفحة واحدة) الذي يحتاج إلى Javascript لعرض أي محتوى على صفحتك. أعلنت Google مؤخرًا أن روبوت الزحف الخاص بها يمكنه الآن عرض رغبة JS المقسمة إلى صفحات وفهرستها. ومع ذلك، يتفق معظم محترفي تحسين محركات البحث (SEO) على أنه حتى الآن يواجه Google صعوبة في قراءة وفهرسة صفحات مثل هذه.

مفتاح حل هذه المشكلة هو التأكد من أن Google لا تحتاج إلى جافا سكريبت