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