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

در این مجله ی آموزشی ما قصد داریم ویو جی اس ( vue js ) و ری اکت جی اس ( react js ) را مقایسه کنیم . پس اگر به تازگی قصد دارید یکی از اینها را انتخاب کنید این مطلب را تا انتها و با دقت مطالعه فرمائید. خب اول بریم سراغ تعاریف بصورت خلاصه و بعد مقایسه ...

در ویدیو زیر نیز یک مقایسه ی سریع بین vue.js و react.js خواهیم داشت :

 

فریمورک Vue.js چیست ؟

ویو جی اس ( Vue.js ) یکی از فریمورک های سبک و منعطف برای جاوااسکریپت است و دارای ابزارهای فراوانی است که بتوانید فرانت اند وب سایت را توسعه بدهید. ویو علاوه بر اینکه بسیار منعطف میباشد دارای ماژول های سفارشی و کامپوننت های بصری هست که عملکرد یک وب سایت را بالاتر میبرد.

 

تاریخچه ی Vue js :

آقای evan you برنامه نویسی که در گوگل مشغول بود و بعد از انجام چند پروژه با Angular.js در شرکت گوگل ، تصمیم گرفت ویو جی اس را بسازد. او میگوید : 

من فکر کردم اگر بتوانم بخش های سبک Angular.js را جدا کنم و یک چیز فوق العاده سبک تولید کنم چه میشود.

اولین نسخه ی پروژه vue.js در جولای ۲۰۱۳ منتشر شد و در فوریه همان سال رسما با نام Vue آنرا معرفی کرد.

 

اپلیکیشن های معروف که با Vue js  ساخته شده اند : 

در زیر اپلیکیشن های معروف که از vue js در توسعه ی خود استفاده کرده اند را لیست کرده ایم: 

1. Gitlab
2. Grammarly
3. Behance
4. Laravel Spark
5. Adobe Portfolio
6. 9gag
7. Behance
8. Nintendo
9. Font Awesome

 

کتابخانه React.js چیست ؟

ری اکت جی اس یکی از کتابخانه های متن باز ( OpenSource ) جاوا اسکریپت است که برای طراحی رابط کاربری های پیچیده مناسب است. ری اکت به کاربران اجازه میدهد کامپوننت های سفارشی بسازند که قابلیت استفاده مجدد دارند و سرعت توسعه ی یک وبسایت را افزایش میدهد. علاوه بر این با ری اکت میتوانید وب سایت های سریع بسازید که SEO خوبی هم داشته باشد. بطور کلی این کتابخانه برای ساخت وب سایت های شخصی گرفته تا سایت های سازمانی پیشنهاد میشود.

تاریخچه ی React js :

در مقایسه با Vue.js و Angular.js کتابخانه ی React از همه سن بیشتری دارد. این کتابخانه در سال ۲۰۱۳ توسط شرکت فیسبوک برای ساخت وب سایت هایی که نیاز به ظاهر داینامیک داشتند منتشر شده است. در واقع virtual DOM نماینده ی عناصر DOM است که توسط کامپوننت های React ساخته میشود پایه و اساس ری اکت میباشد.

 

اپلیکیشن های معروف که با React js  ساخته شده اند : 

در زیر اپلیکیشن های معروف که از react js در توسعه ی خود استفاده کرده اند را لیست کرده ایم: 

1. Facebook
2. Netflix
3. Twitter
4. PayPal
5. BBC News
6. Yahoo
7. Instagram
8. WhatsApp
9. Dropbox

 

فیچر های اصلی Vue.js

فریمورک Vue دارای امکانات به درد بخوری میباشد که با آن میتوانید اپلیکیشن های تحت وب سازمانی بسازید . برخی از این ویژگی ها را در زیر میتوانید ببینید :

 

۱- DOM مجازی :

این مفهوم در اکثر فریمورک ها و کتابخانه های جاوااسکریپت وجود دارد و فریمورک vue هم از این قاعده مستثنی نیست. در این حالت بجای استفاده مستقیم از DOM یک نسخه ی مجازی از آن ساخته میشود که در ساختار جاوااسکریپت استفاده میشود.

 

۲- دو روش Bind کردن دیتا :

ویو جی اس برپایه ی معماری mvvm هست و دو نوع bind کردن دیتا را ارائه میدهد ( در عکس زیر نشان داده شده ). در ویو دستوری به اسم v-bind ارائه شده است که به شما این امکان را میدهد که تگ های html را ادیت کنید. این عملکرد با React متفاوت است که یک ارتباط یک طرف ایجاد میکند.

 

 

۳- کامپوننت ها در vuejs :

کامپوننت ها نوعی از آبجکت های vuejs هستند که عناصر خاص HTML دارند و قابل استفاده مجدد هستند. آبجکت های vuejs و عناصر HTML در prop ها و event ها تعامل دارند. استفاده از کد بلاک های کامپوننت در vuejs برای ساخت اپ های منعطف و پایدار ضروری است.

 

۴- Computed Properties در ویو جی اس :‌

زمانی که ما قصد داریم دو پراپرتی مرتبط به هم داشته باشیم یعنی یکی از پراپرتی ها به دیگری گوش بدهد و خود را با مقدار آن آپدیت کند از computed استفاده میکنیم. در تصویر زیر یک نمونه computed propery تعریف کردیم :‌

 

 

۵- CSS Transitions و انیمیشن ها :

وقتی که عناصر html روی صفحه تغییر پیدا میکند ( حذف ، آپدیت ، اضافه شدن ) این ویژگی کمک میکند با استفاده از متود های مختلف بتوانید transition پیاده سازی کنید. این ویژگی توسط یک کامپوننت transition درونی در ویو جی اس ارائه میشود. همچنین توسعه دهندگان به راحتی میتوانند از کتابخانه های جانبی دیگری نیز برای transition استفاده کنند.

 

۶- Watcher ها :

watcher ها بر روی داده هایی استفاده میشوند که ممکن است مرتبا عوض شوند مثل input های یک فرم. در این صورت توسعه دهنده نیاز نیست کار خاصی بکند watcher ها هر نوع بروزرسانی در فرم را کنترل میکنند.در تصویر زیر نمونه ی ساده watcher ها را میبینیم :‌

شما میتوانید برای فهمیدن تغییرات از Watcher ها , method ها و computed property ها استفاده کنید ولی هر کدام عملکرد متفاوتی دارد و بهتر است هرکدام را جای مناسب خود استفاده کنید. زمانی که عملیات asynchronous یا عملیات سنگین برپایه ی تغییرات مرتب دارید بهترین گزینه watcher ها هستند.

 

فیچر های اصلی React.js

کتابخانه ی React js نیز ویژگی ها و مزیت های خاص خود را دارد که به شما کمک میکند یک اپلیکیشن تحت وب سازمانی بسازید. برخی از ویژگی های این کتابخانه را در زیر لیست کردیم : 

 

۱- Virtual DOM :

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

 

۲- شیوه ی bind یک طرفه داده ها :

در ری اکت برعکس vue.js شیوه ی bind کردن داده ها یکطرفه است و برنامه نویسان را قادر میسازد تا از طریق تابع callback برای ویرایش کامپوننت ها بجای ویرایش مستقیم آنها استفاده کنند.تصویر زیر را ببینید :‌

flux یک کامپوننت طراحی اپ برای javascript است که به شما امکان کنترل data را میدهد. این ابزار به توسعه دهندگان React قدرت بیشتری میدهد و از سه جز تشکیل شده است : dispatcher, store ها و view ها (کامپوننت ها). 

 

۳- JSX : 

jsx در واقع یعنی javascript xml که یک زبان markup هست که رابط کاربری یک اپلیکیشن را تعریف میکند. jsx سینتکس مشابه HTML میسازد که برای توسعه ی کامپوننت های React مورد استفاده قرار میگیرد. یکی از نقاط قوت React همین jsx هست که به توسعه دهندگان اجازه میدهد که به راحتی بلاک های خود را بسازند.

 

۴- کامپوننت ها : 

هر رابط کاربری که با React طراحی شود برپایه ی کامپوننت ها پیاده سازی شده است که هر یک از آنها عملکرد خود را دارند و با js نوشته میشوند. بنابراین برنامه نویسان میتوانند data را بدون دخالت در DOM جابجا کنند. بصورت کلی ظاهر و عملکرد یک اپلیکیشن تحت React به شدت از کامپوننت ها تاثیر گرفته است.

 

۵- Declarative UI 

Declarative UI باعث میشود کدهای React خواناتر شوند و فیکس کردن باگها نیز آسانتر شوند. نه تنها در طراحی رابط کاربری اپلیکیشن های تحت وب بلکه در طراحی اپ های موبایل نیز React این قدرت را دارد تا به توسعه دهندگان اجازه دهد اپلیکیشن هایی با رابط کاربری زیبا و قوی بسازند.

 

مشابهت های vue.js و react.js 

از آنجایی که vue.js بعد از Angular و React توسعه داده شده قطعا از React نیز الهام گرفته که بخش هایی مشابه هم هستند. در لیست زیر به آنها میپردازیم:

1. پشتیبانی از PWA
2. DOM مجازی 
3. کامپوننت هایی میبینیم که در هر دو composable و reactive هستند.
4. استفاده از کد جاوااسکریپت 
5. تمرکز روی کتابخانه ی core یا اصلی
6. قابلیت ادغام در پروژه هایی موجود تحت وب

 

ویو جی اس یا ری اکت جی اس ؟ کدام بهتر است ؟‌

در ابتدا این نکته را در نظر داشته باشید که این مقاله صرفا برای مقایسه ی بی طرف میباشد و هرگز جهت گیری به سمت vue.js یا برعکس React.js ندارد. شما میتوانید با هر دو اپلیکیشن های تحت وب عالی و زیبایی بسازید و هر دو مدرن هستند ولی در بعضی جاها با هم متفاوت هستند که به بررسی آنها میپردازیم.

 

محبوبیت ( کامیونیتی) و بازار کار 

درباره ی محبوبیت باید به گیتهاب هر دو پروژه سر بزنیم و ببینیم چه تعداد برنامه نویسان از آنها استفاده میکنند.

در گیتهاب vue.js میبینیم که این پروژه ۲۰۶ هزار ستاره دارد.

در گیتهاب react.js میبینیم که این پروژه ۲۱۵ هزار ستاره دارد.

محبوبیت هر دو پروژه شبیه به هم هست ولی باید در نظر داشته باشید عوامل دیگری همچون پشتیبانی از ری اکت توسط شرکت بزرگی مثل فیسبوک در این نتیجه تاثیر گذار بوده است.

اگر بازار کار را در سطح جهانی در نظر بگیریم میزان شغل و پروژه های موجود برای هر دو یکسان است اما در کشور ایران ۶۰٪ بازار کار برای ری اکت و ۴۰٪ برای ویو جی است.

 

نمودار یادگیری 

در بحث یادگیری vue.js همیشه یک قدم از بقیه فریمورک ها جلوتر است. در اینجا نیز شروع یادگیری و متخصص شدن در react به زمان بیشتری نیاز دارد و دلیل آن این است که vue.js برپایه ی سادگی بنا شده است. پس یادگیری vue.js قطعا زمان کمتر و زحمت کمتری نسبت به react.js میطلبد. همچنین مستندات فریمورک ویو جی اس بسیار روان و تمیز نوشته شده که برای یادگیری سریعتر آن کمک میکند.

 

پرفرمنس یا سرعت 

در بحث سرعت بارگزاری ، سایت هایی که با vue نوشته شده اند سریعتر از سایت های react میباشند. طبق یک عدد آزمایش ما پردازش ۱۰،۰۰۰ رکورد را برای vue و react بصورت همزمان انجام دادیم و نتیجه به شکل زیر شد :

با ویو جی اس ۱۶۱۵ میلی ثانیه طول کشید.

با ری اکت جی اس ۲۰۸۵ میلی ثانیه طول کشید.

همچنین حجم اپلیکیشن های پایه ای که با vuejs نوشته میشود حدود ۵۰ تا ۱۰۰ کیلوبایت است درحالیکه اپلیکیشن های پایه ای که با reactjs نوشته میشود حدود ۱ تا ۲ مگابایت حجم دارد و این سنگینی باعث کند شدن سایت و افت پرفرمنس سایت خواهد شد.

 

برای استفاده در ساخت اپ موبایل 

به دلیل وجود react-native ساخت اپلیکیشن های موبایلی توسط ری اکت بهتر از vuejs خواهد بود هرچند که با vuejs نیز میتوانید اپ موبایل بسازید ولی قطعا به توانایی های ری اکت نیتیو نخواهد رسید. پس اگر به توسعه ی اپلیکیشن های موبایل در کنار برنامه نویسی فرانت-اند فکر میکنید ری اکت گزینه ی بهتری خواهد بود.

 

نتیجه گیری : 

ما مزیت ها و معایب vue.js و react.js را در این مقاله بیان کردیم. هر دو عالی هستند ولی در بعضی قسمت ها کمی با هم متفاوت هستند. بستگی به خود شما دارد که کدام را انتخاب کنید. نظر ما این است که برای هر کدام دوره ی آموزشی مناسب دم دست دارید شروع کنید و اگر پروژه هایی را میبینید که برای یکی از آنهاست و قصد دارید انجام دهید ، همان فریمورک را انتخاب کنید.