اصلا ویو جی‌اس چی هست؟ چرا توی محتوا های فارسی (حداقل ویرگول) چیز زیادی ازش نمی‌بینیم؟
تو این پست سعی می‌کنم یه معرفی جالب و در کنارش یه لیست از مزایا و معایب ویو جی‌اس بنویسم.
ویو معادل فرانسوی کلمه‌ی View یا همون ظاهر، چشم انداز یا هرچی که دوست دارید معنیش کنید هست. تلفظش هم به شکل /vjuː/ یا همون vyoo هست.
ویو جی‌اس هم یک فریم‌ورک جاوا اسکریپتی برای ساخت وب اپ ها به صورت Single Page Application یا همون SPA هست. اگر با مفهوم SPA آشنا نیستید با یه سرچ کوچیک میتونید محتوای جالبی در موردش پیدا کنید.
فریم‌ورک VueJS از سال 2014 تا به امروز توسط شخصی به اسم Evan You و تیم به شدت خفنش در حال توسعه‌است و میشه گفت به عنوان یکی از سه فریم‌ورک/کتابخونه‌ی جاوااسکریپتی مطرح این روز ها در کنار React و Angular نشسته.
حالا این که اسم ویو از کجا اومده هم خودش داستان جالبی داره که برمی‌گرده به زمانی که Evan you تو گوگل کار می‌کرده و بیشتر تسک هایی که ازش می‌خواستن مربوط به انیمیشن های ظاهری در وب بوده، اون هم میبینه که AngularJS (ورژن اولیه‌ی انگولار امروزی) اصلا برای این کار مناسب نیست، پس تصمیم میگیره فریم‌ورک خودش رو بسازه و هدف اصلی هم راحتی و سادگی در ساخت انیمیشن و تغییر ظاهر جذاب قرار میده، ورژن اولیه به اسم Seed JS بیرون میاد، اما بعدا تصمیم میگیره اسمش رو به Vue تغییر بده. در نهایت بعد از کلی بالا و پایین خروجی کار میشه چیزی که امروز میبینیم!
اکثر کسایی که اول راه توسعه دهنده‌ی فرانت اند هستند، بین انتخاب فریم‌ورک یا کتابخونه‌ی جاوا اسکریپت دو دل میشن و نمیدونن کدوم براشون انتخاب بهتریه! توی وب فارسی در مورد ری‌اکت محتوا به شدت زیاد هست، انگولار هم تخصص من نیست که بخوام راجع بهش نظر بدم، اما میتونم سعی کنم تفاوت بین ری‌اکت و ویو رو ببینید و راحت تر انتخاب کنید.
اولین چیزی که مهمه اینه که ویو بر خلاف ری‌اکت که یک کتابخونست، یه فریم‌ورکه و خودش به تنهایی ابزار های زیادی برای راحت کردن کار ما ارائه میده. مثلا شما برای استیت منیجمنت توی ری‌اکت تا چند وقت پیش باید از Redux یا ابزار های مشابهی استفاده می‌کردید که به عنوان پکیج های جداگونه نصب میشن اما ویو خودش به عنوان یک کتابخونه‌ی رسمی ابزار Vuex رو ارائه میده. مثال های زیادی شبیه به این هست، خلاصه‌ی همشون میشه این که ویو توی دل خودش ابزار های زیادی داره و نیاز کمتری به نصب پکیج های مختلف Third Party هست.
یکی دیگه از مهم ترین عواملی که میتونه باعث شه ویو رو انتخاب کنید، شیب یادگیری اون هست! یادگیری ویو برای کسی که تازه با جاوا اسکریپت آشنا شده به شدت ساده و قابل فهم هست. بخش جاوا اسکریپتی و بخش ساختار صفحه یا همون HTML و CSS از هم جدا هستن و خوانایی (حداقل برای من) بهتره و راحت تر می‌فهمم چه اتفاقی داره میوفته، البته که میتونید از JSX هم در ویو استفاده کنید، اما نظر شخصی من اینه که JSX یادگیریش کمی سخت تره برای کسی که تازه با جاوا اسکریپت آشنا شده.
ویو به نسبت فریم‌ورک های دیگه واقعا کم حجم به حساب میاد و کل پکیج حدودا 21KB حجم داره و این باعث میشه نسبت به رقبای خودش عملکرد سریع تری داشته باشه!
همچنین ویو (مثل رقبای دیگش البته!) توی هر صفحه فقط کامپوننتی که نیاز به آپدیت داره رو دوباره رندر می‌کنه و کاری به بقیه‌ی Virtual DOM نداره.
داکیومنت وب سایت رسمی Vuejs به شدت کامل، جذاب و قابل فهم نوشته شده و اگر میتونید دست و پا شکسته انگلیسی رو بفهمید بهترین جا برای یادگیری و خوندن در مورد ویو داکیومنت رسمیش هست.
تیم توسعه دهنده‌ی ویو با دقت خیلی زیادی روی نوشتن این داکیومنت وقت گذاشتن و تا کوچک ترین امکانات هم توضیحات کاملی داره.
یکی از مهم ترین و شیرین ترین بخش های کار با ویو ساخت افکت ها و انیمیشن های مختلف و پیچیده توی صفحات وب هست! ویو با ابزار هایی مثل Transition ها در اینجور مواقع به کمک شما میاد و روند ساخت انیمیشن/افکت رو به شدت ساده می‌کنه!
شما میتونید ترنزیشن خودتون را تنها با CSS، تنها با JS و یا حتی با ترکیبی از CSS و JS هندل کنید! چی از این جالب تر؟
ناکست (Nuxt) برادر ناتنی نکست (Next) به حساب میاد، برای ساخت وب اپ های SSR (Server Side Rendering) استفاده میشه. اگه بخوایم ساده توضیح بدیم توی SPA ها صفحه سمت مرورگر کاربر و بعد از لود شدن سورس کد ساخته میشه، یعنی اگه سورس صفحه رو نگاه کنید چند تا تگ HTML به شدت ساده می‌بینید که بعدا با جاوا اسکریپت تغییر می‌کنن و محتوای شما داخلش لود میشه.
بزرگ ترین مشکل این نوع صفحات اینه که گوگل تو موج اول Crawl محتوای صفحه‌ی شما رو نمیبینه و بعد از یه پروسه‌ی طولانی و سخت به شما رتبه میده.
ناکست این مشکل رو به این شکل حل می‌کنه که اطلاعات اولیه‌ی صفحه‌ی شما رو توی سرور میسازه و یک صفحه‌ی کامل میفرسته سمت مرورگر، این باعث میشه محتوا هم توی سورس کد وجود داشته باشه و در نهایت سایت شما خیلی بیشتر SEO Friendly باشه!
خوب چند تا از مهم ترین نکات مثبت ویو رو گفتم، هرچند دلم نمیاد اما یکم هم نکات منفیش رو بگم بدی هاش رو هم بدونید.
منابع یادگیری، دیباگ و هر چیز دیگه‌ی ویو توی وب فارسی به نسبت ری‌اکت و انگولار کمتره. اگر انگلیسی سرچ کنید خیلی کم (تقریبا هیچوقت) پیش میاد که به نتیجه‌ی دلخواه‌تون نرسید، اما خوب از حق نگذریم جامعه‌ی دولوپر های ری‌اکت توی ایران به شدت فعاله و بیشتر از ویو منابع داره، اما من تو تجربه‌ی تقریبا یک سالم از کار کردن با Vue/Nuxt به مشکلی بر نخوردم که با یکم تحقیق و خلاقیت اطرافیان حل نشه.
هرچند الان ویو یک فریم‌ورک شناخته شده به حساب میاد و تقریبا هر پکیج و پلاگینی یک ماژول برای ویو هم داره، اما بعضی از این پکیج ها خیلی Maintain نمیشن و توسعه دهنده‌ای که کار رو شروع کرده الان بیخیالش شده، خیلی وقت ها ممکنه پکیجی با کلی ایشوی باز ببینید و هیچکس هم اهمیتی نده!
من به شخصه تو این جور مواقع سراغ پکیج های معروف برای Vanilla JS میرم و اون ها رو توی وب اپ خودم جا میدم، اما خوب سختی کار بیشتره و اول راه ممکنه گیج کننده باشه.
درسته که انعطاف پذیری توی کد خیلی امر مهمی به حساب میاد، اما وقتی این انعطاف بیش از حد بشه باعث رخ دادن خطا ها و پیچیدگی های اضافی میشه، به خصوص اگر تیم های مختلف روش های مختلفی رو برای رسیدن به یک هدف واحد به کار بگیرن.
خوشبختانه ویو توی کشور ما بازار کار خوبی داره و کمبود شغل برای توسعه دهنده‌ی ویو وجود نداره، سطح حقوق هم از حدود چهار میلیون تومان (بدون هیچ تجربه‌ی قبلی) شروع میشه و بسته به تجربه و تخصصتون تا حدود بیست میلیون تومان (با تجربه و تخصص) هم میرسه.
تو سایت های کاریابی مثل کوئرا و جاب اینجا و … میتونید پوزیشن های Vue Developer رو ببینید.
حالا چی شد؟ ویو خوبه؟ بده؟ سراغش بریم یا نه؟
این که سراغش برید یا نه کاملا به خودتون بستگی داره! من به هیچ وجه نتونستم ارتباط خوبی با JSX بگیرم، برای همین استفاده از ویو برام ساده تر و هیجان انگیز تره، از طرفی هم اگر شما به نوشتن تو قالب JSX عادت دارید میتونید توی ویو هم از زاین فرمت استفاده کنید.
اگر دنبال یه تجربه‌ی زیبا و روان توی توسعه‌ی فرانت پروژه دارید ویو میتونه یک انتخاب عالی باشه.
