چیزهایی در مورد Vue.js که من به عنوان یک طراح رابط کاربری دوست ندارم

این مقاله به جای تمرکز بر کارهایی که Vue.js در آنها بهتر عمل می‌کند، دیدگاه مخالف را در نظر خواهد گرفت.

بیایید به مواردی که React آنها را بهتر از Vue.js انجام می‌دهد، بپردازیم.

نکته قابل توجه: من طی 5 سال گذشته از React به صورت حرفه‌ای استفاده کرده‌ام، بنابراین بدیهی است که فریمورک رابط کاربری مورد علاقه من است. همچنین سعی کرده‌ام درمورد این موضوعات یک موضع گیری عینی داشته باشم.

الگوها

یکی از بزرگترین ویژگی‌های Vue.js و صادقانه بگویم آنچه که قدرت اصلی Vue.js است، سینتکس الگوی آن برای نوشتن رابط کاربری است.

من این موارد را در حرفه خود یاد گرفته‌ام: Mustache.js ، Handlebars، Lodash، Django و موارد دیگر. بنابراین نمی‌خواهم یک سینتکس جدید دیگری با Vue.js بیاموزم.

هر الگویی ویژگی‌های خاص خود را دارد که باعث می‌شود نظر من از این به دیگری تغییر کند.

مورد دیگری که درباره سینتکس آن دوست ندارم این است که برای انتصاب بین نوشتن و آنچه در مرورگر اجرا می‌شود یک لایه انتزاع اضافه می‌کند.

در React شما JSX را دارید که فقط برای فراخوانی توابع کامپایل می‌شود:

// React in
<div title="Hello">Message: {message}</div>;

// React out
React.createElement(div, { title: 'Hello' }, 'Message: ' + message);

در Vue.js نمی‌دانم که الگوها در چه سطحی جمع می‌شوند.

React و Vue.js فقط عبارات جاوااسکریپت را در الگوهای خود مجاز می‌دانند که با توجه به محدودیت‌های جاوااسکریپت منطقی به نظر می‌رسد. اما چیزی که در مورد Vue.js برای من گیج کننده است این است که فقط به زیر مجموعه‌ای از گلوبال‌ها در داخل عبارات دسترسی وجود دارد. مطمئن هستم که یک دلیل خوب برای این موضوع وجود دارد، اما باید به خاطر داشته باشید که الگوهای Vue.js به سادگی جاوااسکریپت نیستند و یک لایه از پیچیدگی را اضافه می‌کنند که ترجیح می‌دهم بدون آن کار کنم.

دستورات

دستورات قاتل Vue.js اند. این همان چیزی است که الگوهای آن را بسیار قدرتمند می‌کند.

با این حال دستورالعمل‌ها یک API هستند که شما باید یاد بگیرید از الگوهای Vue.js به طور موثر استفاده کنید. در مقایسه با Angular.js لیست دستورات Vue.js بسیار کوچک‌تر است، با این وجود یک لایه پیچیدگی اضافه می‌شود که برای استفاده کارآمد از Vue.js لازم است.

این امر با انعطاف پذیری Vue.js که دستورات را اعمال می‌کند، تشدید می‌شود که خود پیچیدگی‌های بیشتری نیز به همراه دارد.

اغلب سینتکس دستورات وحشتناک نیستند، اما به نظر من دستورات v-for خارج از چارچوب جاوااسکریپت است. آنها بیش از هر چیز به پایتون نزدیکترند که گنجاندن آنها در فریمورک‌های جاوا اسکریپت عجیب به نظر می‌رسد.

کامپوننت‌ها

از آنجا که Vue.js عمدتا یک فریمورک مبتنی بر الگو است، هنگامی که آن را با کامپوننت‌های سفارشی گسترش می‌دهید، باید کامپوننت مورد استفاده خود را به کامپایلر Vue.js معرفی کنید.

این امر منجر به کدهای تکراری زیادی می‌شود که به نظر من کاملا زائد است.

// Import your components as you normally would with ES Modules
import ComponentA from './ComponentA';
import ComponentC from './ComponentC';

export default {
  components: {
    // Register them with the template compiler
    ComponentA,
    ComponentC,
  },
  // Then finally use them in your template
  template: `
		<ComponentA />
	`,
};

رویدادهای سفارشی

گذشته از الگوها، رویدادهای سفارشی یکی از بزرگترین تفاوت‌های Vue.js و React است.

همه چیز در React یک کامپوننت و یک prop است. وقتی می‌خواهید کامپوننت فرزند با یک کامپوننت والد ارتباط برقرار کند، تابعی را منتقل می‌کنید که کامپوننت فرزند می‌تواند آن را فراخوانی کند:

function Parent() {
  const onClick = () => alert('hello!');
  return <Child onClick={onClick} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>Click me!</button>;
}

اما روش انجام این کار در Vue.js با رویدادها است:

const ParentComponent = {
  components: { ChildComponent },
  template: `<ChildComponent @greeting="alert('hello')" />`,
};

const ChildComponent = {
  emits: ['greeting'],
  template: `<button @click="$emit('greeting')">Click me!</button>`,
};

در واقع من خیلی اطمینان ندارم که از رویدادها به عنوان راهی برای برقراری ارتباط فرزندان استفاده کنم.

وقتی من از رویدادها در Angular.js استفاده می‌کردم، بسیار وحشتناک بود زیرا هیچ قرارداد مشخصی بین آنچه که از رویدادها منتشر می‌شود و آنچه که گوش داده می‌شود، وجود ندارد.

با این حال Vue.js این مسئله را با استفاده از ابزارها حل می‌کند تا مطمئن شود وقتی برخی از والدین سعی در گوش دادن به یک رویداد دارند، آن کامپوننت واقعا آن رویداد را منتشر می‌کند.

بدون این ابزار فکر می‌کنم Vue.js گرفتار همان مشکلات Angular.js می‌شود، اما این ابزار عالی Vue.js است که واقعا آن را نجات می‌دهد.

همانطور که گفته شد، توابع React در عبور از prop ها نیز به همین خوبی کار می‌کند و از نظر من حتی قوی‌تر است.

مدیریت کننده‌های رویداد

هنگامی که شما به یک متد در الگوی Vue.js مراجعه می‌کنید، نام تابع را به عنوان یک رشته عبور می‌دهید.

<button @click="greet">Greet</button>

با این حال مانند موارد فوق، برطرف کننده مشکل در اینجا ابزار Vue.js است که جلوی هرگونه اشتباه تایپی احمقانه را می‌گیرد. با این وجود الگویی است که من خیلی دوستش ندارم و ترجیح می‌دهم دیگر استفاده نکنم.

واکنش پذیری

بیشتر جادوی Vue.js از کتابخانه واکنش پذیری آن ناشی می‌شود. این همان چیزی است که به Vue.js این امکان را می‌دهد تا در هنگام تغییر داده، به طور موثر و سریع بتوانید رابط کاربری را به روز کنید. این ویژگی مرا بسیار به یاد MobX می‌اندازد، اما این مختص Vue.js و متناسب با نیازهای آن است.

با این وجود هر دوی MobX و Vue.js همراه با مبادلات تجاری هستند، به طوری که هنگام استفاده از آن در اجزای سازنده باید جزئیات اجرای واکنش پذیری را در نظر بگیرید.

به عنوان مثال هنگام ایجاد یک شی واکنشی، آن را با تابع واکنشی جمع می‌کنید. با این حال وقتی می‌خواهید از یک مقدار اولیه استفاده کنید، آن را در ref می‌پیچید و کاملا شبیه قلاب useRef React است.

اگر می‌خواهید یک شی واکنشی را از بین ببرید، باید مطمئن شوید که اتصال واکنشی را از دست نمی‌دهید و باید آن را در toRefs (شی واکنشی) بپیچید. که فقط به دلیل عملکرد واکنش در Vue.js (با پروکسی) مورد نیاز است.

برای مقادیر اولیهref ، Vue.js به طور خودکار مقادیر ref را در الگوها آزاد می‌کند که خوب و مفید است. اما موجب استفاده‌های متناقض از ref می‌شود.

در الگوها نیازی به آزاد کردن نیست، اما در کامپوننت جاوااسکریپت باید آن را آزاد کنید. این سوئیچ اضافه شده به نظر من غیر ضروری و در نگاه اول گیج کننده است.

در موارد معمول، مطمئن هستم که این به ندرت احساس می‌شود، اما من کنجکاو هستم که نحوه مقیاس بندی آن به چه صورت است.

این مورد البته با React در استفاده از State و useRef مخالف است که به ترتیب عملکردهای تنظیم کننده و یک رابط ثابت ref-object را برمی‌گرداند. شاید API React خیلی ساده باشد، زیرا بیشتر رفتارهای توسعه دهنده را تحت فشار قرار می‌دهد. اما حداقل جادویی وجود ندارد و این چیزی است که امروزه بیشتر به آن اهمیت می‌دهم.

جمع‌بندی

جای تعجب نیست که من روش کار React را بیشتر از Vue.js ترجیح می‌دهم.

در نهایت این تفاوت به عدم علاقه من در نحوه کار Vue.js برمی‌گردد. من ترجیح می‌دهم به توابع و متدهای خام برای کنترل کامل رابط کاربری که React فراهم می‌کند، دسترسی داشته باشم.

React هم خالی از عیب و ایراد نیست، اما به نظر من حداقل واکنش‌های React واضح است. بین آنچه من نوشتم و آنچه React انجام می‌دهد، ویژگی‌های منفی بسیار کمی وجود دارد.

غیرقابل باور است که بگویید React بهتر نیست، زیرا من شخصا فکر می‌کنم React عالی است (حداقل برای من که اینگونه است). اگر Vue.js نیازهای شما را بهتر برطرف می‌کند، پس همچنان از Vuejs استفاده کنید و از آن لذت ببرید! تنها هدف من این بود که تفاوت‌های Vue.js و React را مشخص کنم و اینکه چرا React همچنان گزینه مورد نظر من برای طراحی UI است.

منبع