مقارنة بين Vue و React ، أطر عمل ومكتبات جافا سكريبت أيهما أسهل للتعلم

مقارنة بين Vue و React مقال مترجم يتناول خصائص ومميزات ومستقبل كل واحدة من هذه المكتبات وأيهما يمكنني البدء بتعلمه أولاً

عندما يتعلق الأمر باختيار أطر عمل ومكتبات جافا سكريبت ، يتم تقديم العديد من الخيارات للمطورين. ومع ذلك ، تظل React و Vue من أكثر الخيارات شيوعًا.

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

هذه المادة، محدثة في عام 2021 لتناول العديد من نقاط القوة وأوجه القصور في اثنين من أشهر التكنولوجيات،

وتناول التحديث مزيد من الوضوح في الأطر الشعبية والتي تساعدك على اختيار واحد منهما هو الأكثر ملاءمة لك كمطور تسعى إلى نمو عملك. 

تابع القراءة لاكتشاف المزيد من الأفكار حول Vue و React لعام 2021. 

في هذا المقال

• ما هي React ؟
• مميزات React باختصار
• ما هو Vue ؟
• مميزات Vue باختصار
• التطوير باستخدام الأطر
• الأأداء
• الأدوات والمكتبات
• تطوير تطبيقات أجهزة الهاتف وأجهزة الكمبيوتر
• العرض من جانب الخادم (SSR)
• قابلية التوسع
• التواصل الاجتماعي
• الوظائف والتوظيف
• مقارنة Vue مقابل React: ماذا يقول المطورون
• منحنى التعلم بين React و Vue
• متى يجب على المطورين استخدام React؟
• متى يجب على المطورين استخدام Vue؟
• الخلاصة عن مقارنة Vue و React

ما هي React ؟

React (أو React.js) هي مكتبة JavaScript للواجهة الأمامية تم إنشاؤها بواسطة Facebook

تتيح للمطورين إنشاء واجهات مستخدم على نطاق واسع. 

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

مميزات React باختصار

• مفتوحة المصدر
• مكتبة جافا سكريبت
• رخصة MIT 
• DOM افتراضي
• تتوفر لها مستندات شرح تفصيلية
• تتضمن مكتبة المكونات لتطبيقات الجوالات
• تستخدم نمط بناء النصوصالبرمجية بصيغة JSX

ما هو Vue ؟

Vue (أو Vue.js) هو أيضًا إطار عمل JavaScript للواجهة الأمامية يُستخدم لإنشاء واجهات المستخدم وتطبيقات الويب والجوال ذات الصفحة الواحدة. 

يستخدم إطار العمل مفتوح المصدر هذا عملية تسمى “الفصل العالي”.

مميزات Vue باختصار

مفتوحة المصدر

إطار عمل جافا سكريبت

رخصة MIT

DOM افتراضي

تتوفر لها مستندات شرح تفصيلية

تتضمن مكتبة المكونات لتطبيقات الجوالات

بناء جملة HTML / JSX

تطور كل من React و VueJs

React

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

أحدث إصدار ثابت رئيسي هو React v17.0 ، والذي تم إصداره في أكتوبر 2020. ومع ذلك ، لم يأتي هذا الإصدار مع أي ميزات جديدة تواجه المطور. بدلاً من ذلك ، قامت React بطرح ترقيات مختلفة. 

واجه بعض المستخدمين مشكلات عند الترقية من Reach 16 إلى 17. 

توجد خطط بالفعل لـ  React 18 : 

قالت React على موقعها على الإنترنت: “إننا نصلح العديد من هذه المشكلات مع React 17.

وهذا يعني أنه عندما تظهر React 18 والإصدارات المستقبلية التالية ، سيكون لديك الآن المزيد من الخيارات”. “سيكون الخيار الأول هو ترقية تطبيقك بالكامل مرة واحدة كما فعلت من قبل. ولكن سيكون لديك أيضًا خيار لترقية تطبيقك قطعة تلو الأخرى.”

Vue

تصدر Vue إصدارات أقل بكثير من إطار عملها مقارنةً بـ React. أحدث إصدار ثابت رئيسي هو Vue 3.0 ، والذي صدر في سبتمبر 2020. وتشمل الميزات:

• تكامل TypeScript المحسن
• واجهات برمجة تطبيقات جديدة لحالات استخدام المؤسسات
• حجم حزمة أصغر
• تحسينات في الأداء

أداء

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

يمكننا أن نقول أن React و Vue ينفّذان نفس العمليات في نفس المدة الزمنية تقريبًا. الفروق في الأداء بين Vue و React تكاد لا تذكر ، مع اختلاف بضع أجزاء من الألف من الثانية لمعظم المقاييس.

هذا دليل على أنه فيما يتعلق بالأداء Vue و React متشابهان تمامًا. 

الأدوات والمكتبات

إدارة الحالة State

يمكن لـ React التعامل مع إدارة الحالة من الداخل باستخدام setState() لتعيين حالة المكوِّن. 

ومع ذلك ، بالنسبة للتطبيقات مع إمكانية زيادة التعقيد والقوة ، يستخدم المطورون حزمًا مثل Redux و Mobx وواجهة برمجة تطبيقات سياق React لإدارة الحالة. لا يدير فريق React الأساسي أيًا من هذه الحزم.

Redux 

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);
function render() {
 ReactDOM.render( … );
}

store.subscribe(render);
render();

من ناحية أخرى ، يستخدم Vue  خاصية `store pattern` لإدارة الحالة عندما يكون التطبيق المراد إنشاؤه بسيطًا وصغيرًا نسبيًا. 

ومع ذلك ، بالنسبة إلى التطبيقاتواسعة النطاق حيث تكون العديد من المكونات في حاجة ماسة إلى متجر حالات مشترك ، توفر Vue بنية تشبه Flux تسمى Vuex مع متجر مركزي.

مثال Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')

console.log(store.state.count) // -> 1

تم تطوير Vuex وإدارته بواسطة فريق Vue وهو مصمم خصيصًا لمستخدمي Vue. إنها محددة للغاية في قدراتها على إدارة الحالة State.

توجيه المسارات Routing

للتوجيه ، تستخدم React مكتبة React-Router ، والتي لا يديرها فريق React أيضًا. تقوم مكتبة جهاز التوجيه التفاعلي بمزامنة مكونات التطبيق مع عنوان URL بسلاسة.

شكل الراوتنق في Reaact

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Home</Link>
        <Link to={`/contacts`}>Contact Us</Link>
      </aside>

      <main>
        <Route exact path="/" component={Home} />
        <Route path="/contacts" component={Contacts} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

بينما يحتوي Vue على مكتبة توجيه تسمى Vue-Router . يعد Vue Router هو الموجه الرسمي لـ Vue ، على الرغم من وجود عدد قليل من أجهزة التوجيه التابعة لجهات خارجية مثل Page.js و Director ، كما أنه سهل الاستخدام للغاية مع Vue.

شكل الراوتنق في Vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/contacts">Contact Us</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {
  template: '<div>Home</div>'
}

const Contacts = {
  template: '<div>Contacts</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/contacts', component: Contacts }
  ]
})

new Vue({
  router
}).$mount('#app')
</script>

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

CLI

لسهولة الوصول إلى بيئة التطوير ، توفر React واجهة سطر الأوامر (CLI) التي تجعل من السهل بدء مشروع الـ React . يستدعى بواسطة سطر الأوامر بالصورة Create-React-App .

يوفر Vue موردًا يسمى Vue-CLI يمنح المطورين القدرة على بدء مشاريع Vue الجديدة بسرعة. 

يأتي Vue CLI مخصصًا بالفعل ، ويتيح لك إضافة مكونات إضافية في أي وقت خلال دورة حياة التطوير.

تطوير تطبيقات الجوال وأجهزة سطح المكتب

React Native هي منصة React الرائعة لبناء تطبيقات جوال أصلية تعمل على كل من Android و iOS. 

هذا رائع لأن مطوري React يمكنهم الاستفادة من معرفتهم لبناء تطبيقات الجوال.

في وقت كتابة هذا التقرير ، دخلت Vue في شراكة مع Weex ، وهو إطار عمل لواجهة مستخدم عبر الأنظمة الأساسية لتطوير نظام أساسي يعمل مثل React Native. 

في الوقت الحالي ، يحتوي Vue على مكون إضافي باسم NativeScript أو بشكل أوضح NativeScript-Vue لبناء تطبيقات جوال أصلية في Vue.

لبناء تطبيقات سطح المكتب عبر الأنظمة الأساسية ، يمكن استخدام Vue بسهولة مع Electron. باستخدام Vue-CLI هياكل البناء البرمجية المسماه scaffolding.

توفر Electron-Vue نموذجًا معياريًا حيث تم بالفعل الاهتمام بالتكوينات الداخلية.

العرض من جانب الخادم (SSR)

يوفر SSR (اختصار Server-Side Rendering) يوفر رؤية أكبر لمواقع الويب عندما يزحف Google إلى مواقع لصفحات النتائج الخاصة به. 

يمكنه أيضًا تحسين تجربة المستخدم. 

يحتوي Vue على ميزات SSR مضمنة ، وهناك إرشادات واضحة حول كيفية استخدام هذه الإمكانات في مستندات شرح مفصلة. 

بينما يتطلب React مكتبة طرف ثالث لـ SSR. ومع ذلك ، قد لا يزعجك هذا ، لأن SSR ليس مهمًا لمحركات البحث كما كان في الماضي. 

قابلية التوسع

يعد React أخف من Vue ، لذا يتعامل مع التطبيقات متعددة الصفحات بسهولة ، مما يسمح لك بتوسيع نطاق الأداة مع نمو موقع الويب أو التطبيق الخاص بك. 

ما عليك سوى استيراد المكتبة وإضافة ميزات JS مباشرة على React. 

ثم استخدم حزمة نموذج وأداة توجيه تابعة لجهة خارجية. 

في Vue يمكنك أيضًا التوسع بسلاسة (حتى نقطة معينة) باستخدام Vue CLI ، الذي يضم قوالب متنوعة لتطبيقات الصفحة الواحدة. 

مع زيادة حجم موقع الويب الخاص بك ، أضف قوالب إضافية من مطوري المجتمع وقم بتخصيصها بالطريقة التي تريدها. 

ستظل بحاجة إلى استخدام أداة توجيه وحزمة نموذج لتوسيع نطاق Vue ، والذي سيجده معظم المطورين سهلاً في البداية. 

ومع ذلك ، فإن خيار استخدام بناء جملة JSX على React يثبت أنه أكثر فائدة على المدى الطويل ، خاصة عند استخدام قوالب HTML يصبح عمل روتيني. 

مجتمع Vue و React

نظرًا لكونها مدعومة من Facebook ، فإن React لديها مجتمع كبير جدًا مقارنة بـ Vue. 

في الوقت الحالي ، يحتوي React على أكثر من 288000 سؤال على StackOverflow. كما أن لديها أكثر من 68000 حزمة npm. 

على الرغم من أن مجتمع React كبير ، إلا أنه مجزأ للغاية بسبب الحرية الممنوحة للمطورين في تبني أي هيكل يناسبهم. 

هذه الحرية هي سبب الارتباك الأساسي ، ومن هنا جاء العدد الكبير من الأسئلة المسجلة على StackOverflow.

يحتوي React حاليًا على 165000 نجمة على Github ، أي حوالي 15000 نجمة أقل من Vue’s التي حصلت على 180.000 نجمة. 

تُظهر التحليلات من GoogleTrends أنه بالمقارنة مع Vue ، تتمتع React بميزة في ملاءمة البحث على مدار الاثني عشر شهرًا الماضية.

منذ إطلاقه في عام 2014 ، نما مجتمع Vue تنافسيًا مع React بمرور الوقت ولا يزال واعدًا. 

هناك أكثر من 74000 سؤال على StackOverflow الموسومة Vue.js ، وهناك حوالي 24000 حزمة npm. 

,jمتلك Vue أكثر من 180.000 نجمة على Github.

الفرص الوظيفية لمطوري Vue و React

قاعدة المجتمع الكبيرة التي تمتلكها React وعدد الأسئلة على StackOverflow ، تُترجم إلى مجموعة كبيرة من مطوري React. 

لدى React العدد الأكبر من المطورين المتاحين مقارنةً بـ Vue.

ومع ذلك ، كما يشير التقرير من stateofjs أعلاه ، هناك أيضًا الكثير من المطورين المهتمين بتعلم Vue. 

خلال الأشهر والسنوات القليلة القادمة ، من المرجح أن يستمر عدد مطوري Vue في الزيادة.

أظهر بحث حديث على StackOverflow أن مطور React يمكن أن يكسب ما يصل إلى 150 ألف دولار في السنة ، بينما يمكن لمطور Vue.js أن يكسب حوالي 90 ألف دولار. 

يُظهر أيضًا أن هناك وظائف React أكثر من وظائف Vue. 

Vue مقابل React وماذا يقول المطورون

React

صنف المطورون على StackShare.io مكونات React على   أنها أفضل ميزة ، يليها dom والأداء الظاهري.

في TrustRadius ، حيث حصلت React على متوسط ​​درجات مستخدم  9/10  بناءً على 62 مراجعة ، قال أحد المطورين:

“يحتوي [React] على لغة نماذج سهلة الاستخدام (JSX) توفر عرضًا ديناميكيًا لعناصر HTML ، جنبًا إلى جنب مع نموذج سهل للربط مرة أخرى بجافا سكريبت المطبقة في مكوناتك.

[هناك] طرق عرض قائمة على المكونات توجه المطور إلى وحدات وقطع قابلة لإعادة الاستخدام على واجهتك. ” ( إريك رالستون )

وقال مطور آخر:

“تم تصميم React وفقًا لمفهوم HTML الذي تم إنشاؤه بدلاً من HTML النموذجي. يوفر هذا مزيدًا من المرونة في بناء العناصر على الصفحة ويسمح للمطورين بإنشاء HTML تم تكوينه برمجيًا استنادًا إلى اعتبارات وقت التشغيل.” ( لاري ريد )

وقال آخر: 

“يمكن أن تصبح React محبطة للغاية ما لم تبدأ التفكير في React. يفرض React تسلسلاً هرميًا من أعلى إلى أسفل لتدفق البيانات ولا يوفر أي وسيلة للبيانات للاتصال للخلف.

هذا تحول كبير في العقلية يأتي من Angular 1.x. هذا القيد هو حقًا عامل كبير يحدد كيفية تنظيم التعليمات البرمجية الخاصة بك وكيف قد ترغب في كتابة المكونات الخاصة بك. ” ( أنوديب بالانكي )

شهادات المطورين على Vue

صنف المطورون على StackShare.io واجهة Vue  البسيطة وسهلة الاستخدام  كأفضل ميزة لها ، تليها وثائقها ومكوناتها. 

قال أحد المطورين:

“أجد أن استخدام Vue.js أسهل (أكثر إيجازًا / أقل لغة معيارية) وأكثر سهولة من كتابة React. ومع ذلك ، هناك الكثير من مكونات React المتاحة بسهولة والتي يمكنني توصيلها بمشاريعي.

استخدم Vue.js أو React لمشروع قادم سأستخدمه للمساعدة في تعليم أحد الأصدقاء كيفية إنشاء واجهة أمامية تفاعلية. ” ( سايروس ستولر )

في مقارنة بين React و Vue ، قالت وكالة JetRuby :

“أحد أروع الأشياء التي استعارها Vue.JS هو فكرة استخدام DOM الظاهري. وبكلمات بسيطة ، فإن DOM الظاهري هو نسخة خفيفة الوزن من DOM ، والتي تسمح لك بمعالجة الكائنات دون الحاجة إلى رسمها على الشاشة.

في كل مرة تصيير عنصر ، يتم تحديث كل كائن DOM ظاهري واحد. عند تحديث DOM الظاهري ، يقارنه React بإصداره السابق. “

منحنى التعلم: React vs Vue

يتبنى React تنسيق JSX ، حيث تتم كتابة HTML بلغة JavaScript. على الرغم من أن JSX يتماشى مع البرمجة الوظيفية ، وهو مفهوم أنيق جدًا ، يتحمل المطورون مسؤولية اكتشاف هذا النهج الجديد.

تعتبر React ضعيفة في جوهرها ، وتعتمد بشكل كبير على مكونات الطرف الثالث الأخرى من أجل الاستخدام الفعال. 

قد يكون هذا أيضًا مصدر إزعاج للمطورين لأنهم قد يحتاجون إلى فهم الكثير من المعلومات الجديدة فقط لإنجاز الأمور.

في حين أن توثيق React جيد ، إلا أن توثيق Vue يعتبر أفضل إلى حد كبير.

Vue أسهل في التعلم مقارنةً بـ React. يفصل Vue المخاوف بطريقة اعتاد عليها مطورو الويب بالفعل ، وفصل HTML و CSS وجافا سكريبت. 

كما يسمح باستخدام JSX للمطورين الذين يفضلون تبني هذا النمط.

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

وثائق Vue مكتوبة بشكل جيد للغاية وتحاول الإجابة على معظم (إن لم يكن كل) الأسئلة التي قد تظهر.

متى يجب على المطورين استخدام React؟

• إذا كنت تفكر في إنشاء تطبيقات معقدة أحادية الصفحة على مدار فترة زمنية طويلة. مع React ، هناك خيار لاستخدام HTML و JSX ، مما يجعلها مناسبة بشكل أفضل لتطبيقات المؤسسات.
• إذا كنت تفضل استخدام JSX! بينما يمنحك React خيار استخدام HTML القياسي ، فإنه يركز بشكل أكبر على JSX ، الذي يتتبع التحديثات والتغييرات على HTML. هذا يعني أنه لا توجد إعادة كتابة.
• تريد إنشاء تطبيقات أكبر. سيتعين عليك استخدام أدوات الجهات الخارجية ، لكن React توفر نطاقًا أكبر بكثير لمشاريع التطبيقات واسعة النطاق.

متى يجب على المطورين استخدام Vue؟

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

الخلاصة من مقارنة Vue و React

تعتبر React و Vue من تقنيات JavaScript جيدة جدًا وخيارات رائعة ومفيدة جدًا لكل من التطبيقات الصغيرة والكبيرة.

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

يوفر Vue وضوحًا ينتج عنه تنبؤات بأن إطار العمل سيلحق في النهاية بـ React ويمكن أن يصبح الخيار الأول للمطورين.

اقرأ أيضاً:

تاريخ إصدار Laravel 9