چرا می گوییم Vue از React کامل تر است؟

چرا می گوییم Vue از React کامل تر است؟انتخاب استک فرانت اند یکی از چالش های اصلی تیم های توسعه نرم افزار است. شاید چند سال پیش برای توسعه فرانت اند یک وبسایت انتخاب ها محدودتر بودند اما این روزها با وجود تعداد زیاد ابزار، فریمورک و کتابخانه مختلف، گزینه های متعددی پیش روی تیم های نرم افزاری قرار دارد. از محبوب ترین این ابزار ها میتوان به کتابخانه React و فریمورک Vue اشاره کرد. در این مقاله قصد دارم به چند مورد از قابلیت هایی اشاره کنم که بصورت پیشفرض در Vue گنجانده شده اند اما در React وجود ندارند یا برای دسترسی به آنها نیاز به کتابخانه های خارجی خواهید داشت.1- سیستم مدیریت مسیرها (روتر)یکی از مهمترین قابلیت هایی که در اپلیکیشن های تک صفحه ای (Single Page Applications) به وفور از آن استفاده میشود سیستم های روتر هستند. این سیستم ها به شما کمک میکنند بر اساس مسیر URL ، محتوای مناسب را برای کاربر ساخته و به او نمایش دهید. در Vue این قابلیت بصورت پیشفرض در فریمورک گنجانده شده است و زمانی که شما پروژه تان ر از طریق خط فرمان محبوب Vue CLI میسازید، این قابلیت بصورت کانفیگ شده و کامل در اختیار شما قرار میگیرد. این مسئله باعث میشود که شما بدون اینکه درگیر کانفیگ های پیچیده و غیر ضروری شوید مستقیما به سراغ توسعه اپلیکیشن بروید. ساختار روتر اپلیکیشن های ویو بسیار ساده و قابل فهم است ، کافی است تنها با ساختن یک آبجکت تعیین کنید که دوست دارید در هر URL چه کامپوننتی به کاربر نمایش داده شود.نمونه ای از فایل روتر در Vueروتر Vue به همین سادگی کار میکند! در حالیکه می دانیم React بصورت پیشفرض قابلیت مدیریت روت ها را ندارد و در اپلیکیشن های تک صفحه ای ری اکتی شما باید از کتابخانه های جانبی مانند React Router و ... استفاده کنید. بعدا در یک مقاله بصورت مفصّل تر به مقایسه React Router و Vue Router خواهم پرداخت.2- سیستم State Managementوقتی اپلیکیشن شما به تدریج بزرگتر میشود و آن را به کامپوننت های کوچکتر تقسیم میکنید، نیاز به یک سیستم مدیریت State مرکزی برای تبادل داده بین کامپوننت ها در ساختار درختی اپلیکیشن به شدت احساس می شود. در Vue این قابلیت بصورت پیشفرض توسط Vuex پیاده سازی شده است. به کمک Vuex شما یک Store مرکزی دارید و میتوانید داده های خود را از طریق آن به سادگی مدیریت کنید.قابلیت مدیریت داده های سراسری در React از طریق کتابخانه های جانبی که معروفترین آنها Redux و Mobx هستند انجام میشود و این قابلیت بصورت پیشفرض در React گنجانده نشده است. البته ری اکت با معرفی Context سعی کرده این مسئله را پوشش دهد اما اگر تجربه توسعه اپلیکیشن های بزرگ و پیچیده ری اکتی را داشته باشید احتمالا میدانید که Context نمیتواند بصورت کامل پاسخگوی نیاز های شما باشد و شما دیر یا زود مجبور به استفاده از کتابخانه های جانبی برای State Management خواهید شد.3- مدیریت کلس های چند گانه و شرطیدر فرایند توسعه اپلیکیشن های تحت وب class های css یکی از رایج ترین قسمت های استایل دهی به اجزای صفحه هستند. گاهی شما نیاز دارید چندین کلس مختلف را به یک المان اضافه کنید و برای بعضی از کلس ها شرط قرار دهید. به مثال زیر توجه کنید:فرض کنید میخواهید بر اساس یک سری شرایط خاص کلس active را بر روی یک المان قرار دهید (مثل زمانیکه میخواهید یک منو را با کلس active از سایر منو ها تمایز دهید). در ری اکت این کار به شکل زیر انجام میشود:مثال class های شرطی در Reactتصور کنید اگر بخواهید برای یک المان چندین شرط مختلف و چندین class متفاوت قرار دهید. بطور قطع کد شما تبدیل به یک کابوس وحشتناک خواهد شد!در Vue اما قضیه اندکی متفاوت است. شما میتوانید برای قرار دادن class ها برای المان ها در Vue ، به جای رشته (String) از آرایه ها و آبجکت ها هم استفاده کنید. کامپایلر Vue بصورت اتوماتیک class های شما که درون آرایه قرار دارند را قبل از render ترکیب کرده و بر اساس شروط تعیین شده توسط شما آنها را میسازد.نمونه ای از class های شرطی در Vueنمونه ای از class های چند گانه در Vueاگر بخواهید چنین قابلیتی را در اپلیکیشن ری اکت خود داشته باشد میتوانید از کتابخانه های معروفی مانند classnames استفاده کنید.4- قابلیت Validation برای Propsدر اپلیکیشن های تحت وب در مقیاس بزرگ به احتمال زیاد کامپوننت هایی با ویژگی های داینامیک استفاده خواهند شد. Props یک قابلیت بسیار کاربردی است که میتوان از آن برای ارسال داده به درون کامپوننت های فرزند استفاده کرد. اما هر از گاهی پیش می آید که داده های ارسال شده، آن داده های استاندارد مورد نیاز نیستند و اپلیکیشن را دچار خطاهای عجیب و غریب خواهند کرد که معمولا کشف آنها هم وقت گیر و پر دردسر است. یکی از راه های جلوگیری از این گونه مشکلات Validate کردن Props ارسال شده به کامپوننت است. برای درک کردن بهتر این موضوع بگذارید یک مثال کاربردی بزنم:فرض کنید کامپوننتی دارید که عددی را از طریق prop به آن میفرستید و درون کامپوننت بر اساس عدد ارسال شده محاسبات ریاضی انجام داده و نتایج را نمایش می دهید. در یکی از مراحل ممکن است شما به اشتباه یک رشته یا String را به کامپوننت ارسال کنید که طبیعتا موجب ایجاد خطا خواهد شد. بنابراین بهتر است یک ابزار برای کنترل Props داشته باشید تا در صورت ارسال data type اشتباه به کامپوننت به شما اخطار دهد. در React چنین قابلیتی بصورت پیشفرض وجود ندارد و به همین جهت شما مجبور هستید از کتابخانه های خارجی مانند کتابخانه Proptypes استفاده کنید.این در حالی است که قابلیت گفته شده درون Vue گنجانده شده است و شما به سادگی میتوانید درون کامپوننت هایتان نوع دیتای مجاز ورودی را تعیین کنید تا از ارسال دیتاهای اشتباه و ناخواسته به درون کامپوننت جلوگیری شود و احتمال خطا کاهش یابد. این کار به سادگی نمونه کد پایین در Vue انجام میشود:نمونه کد Valid کردن Props در Vue5- قابلیت keep-aliveیکی از قابلیت های جذاب و منحصر بفرد دیگری که در Vue وجود دارد تحت عنوان keep-alive شناخته میشود. از طریق این قابلیت شما میتوانید کامپوننت های داینامیک را قبل از destroy شدن (با حالتی شبیه کش ذخیره کنید) تا کاربر در صورت بازگشت به حالت قبلی بدون رندر شدن مجدد بتواند آن را ببیند. این مسئله میتواند تاثیر بسزایی در افزایش پرفورمنس اپلیکیشن شما داشته باشد. در React چنین قابلیتی وجود نداشته و برای انجام دادن عملیات مشابه شما باید از قابلیت های css مانند display و ... استفاده کنید.نمونه استفاده از حالت keep-alive در vueبرای آشنایی بشتر با قابلیت keep-alive در vue میتوانید این مطلب را بخوانید.این خلاصه ای بود از چند قابلیت مهم و کاربردی Vue که در React وجود ندارند. امیدوارم که کاربردی بوده باشه :)