https://alichraghi.github.io
چرا از Vue استفاده میکنم؟ و چرا به React ترجیهش میدم...
اینکه چرا من تا این حد Vue رو دوست دارم و React رو رها کردم داستان خودشو داره، ولی میخوام اینجا یه سری دلایل بیارم که چرا باید React یا Angular رو بیخیال بشید و بچسبید به Vue و مکمل محبوب SSR اون یعنی Nuxt.
در ادامه قراره رستگار بشید :)
1 - انعطاف پذیره
در واقع منظورم از انعطاف پذیری بحث های حاشیهای نیست. خیلی واضح میگم:
وقتی با Vue کار میکنید روش های زیادی برای انجام یک کار دارید. Vue سعی نمی کنه شما رو در انجام کارها به یک روش خاص، مثل بعضی از چارچوب های معروف جاوا اسکریپت، محدود کنه.
برای پروژه های بزرگ ، هر دوی Vue و React در روتینگ ( Routing ) راه حل های قدرتمندی ارائه میدهند. همچنین جامعه React با ارائه ابزار های State Management مثل Redux و Flux قدرت بیشتری به React داده است. اما فکر نمیکنم Vuex کم از این دو داشته باشد، حتی کار با Vuex خیلی راحت تر است مخصوصا اگر از Nuxt هم استفاده کنید دیگر آن دردسر های همیشگی فهموندن رو ندارید...
اینجاست که Vue یک قدم از React جلو میافته :)
2 - عاشق چشم و ابروی ما است
وقتی با Vue کار میکنید حس میکنید که ما رو دوست داره... اما چرا؟
برای مثال VueCli که با پیکربندی ، اجرا ، تجزیه و تحلیل و آزمایش یک پروژه جدید سرعت پروژه را افزایش میدهد. VueCli در مقایسه با رقبا بسیار انعطاف پذیرتر است و تنظیمات از پیش پیکربندی شده بسیاری را ارائه می دهد.
یا Syntax ویو که همه اجزاش به طور یکپارچه به شکلی بسیار ساده با هم در ارتباط هستند.
اصلا همین سادگی Vue هست که همه رو مجذوب خودش کرده و الان هم که دارم این مطلب رو مینویسم 173 هزار تا ستاره تو GitHub خورده...
همچنین بگم که همینطور که میدونید یا شایدم نمیدونید وقتی CSS رو تو React ایمپورت میکنید React اون رو به CSS In JS تبدیل میکنه تا استایل شما فقط روی کامپوننتی که میخواید محدود بشه که روی پرفورمنس تاثیر خوبی نداره! اما تو Vue اینطور نیست و میتونید بدون اینکه از CSS In JS استفاده کنید از وجود CSS محدود شده ( Scoped ) لذت ببرید. البته همانطور که گفتم Vue شما را محدود نمیکند، و میتوانید از وجود پکیج هایی مثل styled-components-vue و vue-emotion بهره ببرید!
3 - کتابخانه های UI
حتما شما هم برای انتخاب بهترین UI Framework سرچ و تحقیق کردهاید و اگر با React کار میکنید BluePrint انتخاب اولتان است اما در Vue اوضاع کمی متفاوت است و شما با کلی UI Framework طرف هستید. مخصوصا دو غول به اسم های Vuetify و BootstrapVue ( رقابتشون فعلا سر تعداد کامپوننت
ها است )
همچنین وقتی با UI Frameworks کار میکنید اضافه کردن کامپوننت ها در React بسیار سخت است و باید تک تک کامپوننت ها را ایمپورت کنید که حتی باعث میشود دور UI Frameworks ها را خط بکشید
import { Button, Alert, Cards, Forms, Images, Figures, Jombotron, ListGroup, Progress, Spinners, Modal, Navs, Tabs, Popovers, Pagination } from 'react-bootstrap/Button';
عذاب آور نیست؟!!
لیست کامل UI Framework های محبوب Vue و React
Vue
- Vuetify
- BootstrapVue
- Buefy
- Quasar
- CoreUI Vue
- Vue Material
- Vuesax
- iView
- Vue Material Kit
- PrimeVue
- Element
- Keen UI
- Mint UI
- VueTailwind
React
- Ant Design
- MaterialUI
- React Bootstrap
- Blueprint
- Semantic UI React
- Rebass
- Fluent UI
- Evergreen
- Chakra UI
- Grommet
هر دو فریمورک در گستره عظیم UI Frameworks عملکرد خوبی داشتند اما React بدلیل مشکل خود در ایمپورت شما را به سمت کار با کلاس ها سوق میدهد.
4 - کارایی، سرعت و حجم
تو عکس بالا هیچ حرفی نیست... فقط میخوام بگم که React توی بحث برفورمنس خیلی از Vue عقب تره!الان که دارم این مقاله رو مینویسم نسخه فعلیش 2.6.10 هست که حجم Runtime کلیش 22.8KB هست ولی نسخه 3 که فقط چند روزه منتشر شده فقط 10KB حجم داره که یعنی تقریبا 1/4 React و برای هرکسی باور نکردنیه! (300 خط کد حدوداً میشه 10KB ) در این بین هم که Ember.js و Angular توی حجم روسیاه هستند...
5 - محبوب است و توسط بهترین ها استفاده شده
حتما تا حالا رستگار شدید و به قدرت Vue.JS ایمان آوردید پس چرا گوگل نیاره! بله درست متوجه شدید. گوگل که خود به وجود آورنده Angular است در قسمت استخدام و فرصت های شغلی خود از Vue.JS استفاده میکند. البته استفاده از Vue به گوگل محدود نمیشود و شرکت ها و سایت های معروف بسیاری با استفاده از این فریمورک قدرتمند ساخته شدهاند. مثل :
- Adobe Behance
- Adobe Schrift Bewegt
- Apple Developers
- Facebook NewsFeed
- Netflix
- Xiaomi
- Alibaba
- GitLab
- LiveStorm
- 9Gag
- Nintendo
- Chess
و ....
6 - قدرتمند است!
برخلاف دیگر فریمورک ها، Vue از ابتدا طراحی شده است تا به تدریج قوی تر شود (: این مدلی دوست دارم :) همچنین هسته اصلی Vue فقط بر روی لایه View متمرکز شده (معماری MVVM ) و انتخاب و ادغام آن با سایر فریمورک ها یا پروژه های دیگر آسان است. و همچنین یادتان نرود دست شما را در انجام هر کاری باز میگذارد...
مطلبی دیگر از این انتشارات
composition api
مطلبی دیگر از این انتشارات
پیاده سازی SSR (سرورساید رندرینگ)روی Vue و بررسی تاثیر بر SEO
مطلبی دیگر از این انتشارات
سه روش برای مقدار دهی اولیه store با استفاده از vuex در پروژه های vue-cli