مهدی فلاحتی
مهدی فلاحتی
خواندن ۲ دقیقه·۳ سال پیش

هفت دلیل برای مهاجرت از Vuetify به Quasar

هر دو فریم‌ورک Vuetify و Quasar بر پایه vuejs نوشته شده‌اند و از اصول طراحی گوگل متریال دیزاین پیروی می‌کنند.

اگر به تعداد ستاره‌‌های این دو فریم‌ورک نگاه کنیم متوجه محبوبیت بیشتر vuetify می‌شویم.

در ادامه مواردی رو بررسی می کنیم که نشان می‌دهد علارغم این که Quasar محبوبیت کمتری دارد ولی می‌تواند انتخاب هوشمندانه‌‌تری باشد.



۱.بررسی Menu, tooltip syntax

در این موارد هر دو slot و Activators رو دارن و تنها تفاوت در سینتکس هست .سینتک Quasar ساده تر و نیاز به کد کمتر است.

tooltip

Quasar tooltip
Quasar tooltip


Vuetify tooltip
Vuetify tooltip


Menus

Quasar menu
Quasar menu


Vuetify menu
Vuetify menu


tooltip , icon , menu

داستان وقتی پیچیده میشه که قصد استفاده از مثلا tooltip و icon و menu در یک دکمه رو داشته باشید.

Button with icon and badge and menu Quasar framework
Button with icon and badge and menu Quasar framework


Button with icon and badge and menu Vuetify framework
Button with icon and badge and menu Vuetify framework



۲.نوتیفیکیشن و دیالوگ فقط با جاوا اسکریپت!!

شاید بعضی مواقع نیازی به نوشتن کامپوننت دیالوگ و نوتیفیکیشن نداشته باشید و فقط لزوما بعد یه اکشنی نیاز به نمایش داشته باشید.

در Quasar این امکان وجود دارد که بدون کامپوننت و فقط با جاوا اسکریپت این مورد رو هندل کنید.

البته در Vuetify هم این امکان وجود دارد ولی باید پلاگین vuetify-dialog رو نصب کنید

Quasar dialog code
Quasar dialog code


result
result


۳.همه پلتفرم‌‌ها در یک کدبیس

با استفاده از Quasar میتوانید تمام موارد تحت وب (SPA,SSR,PWA) و برای موبایل‌ اندروید و ios (Capacitor/Cordova) و همچنین دسکتاپ (Electron) با یک کدبیس داشته باشید.

حتی می‌توانید با استفاده از Quasar اکستنشن های مرورگر درست کنید البته نه با یک کدبیس!.

quasarmodeaddpwaquasarmodeaddelectronquasarmodeaddssrquasarmodeaddcapacitor

تمام تنظیمات از قبل در فایل quasar.conf.js قرار داده شده است. به همین دلیل است که می‌توانید با یک کدبیس برای همه پلتفرم‌ها استفاده کنید. تنها نیاز است در command line دستورات را وارد کنید.

quasardev-mpwaquasardev-melectronquasardev-mssr


۴.دستورات command line و اکستنشن ها

در قسمت قبل مشاهده کردید که quasar دارای یک سری کامند لاین‌ها هست. مثلا شما می‌تونید یه کامپوننت جدید یا یه صفحه جدید درست کنید.

Quasar command line
Quasar command line


۵.بهینه بودن

یکی از مهم‌ترین دلایل استفاده از Quasar می‌توان بهینه بودن آن باشد. اگر دو فریم ورک رو با هم در زمان استارت پروژه در حالت dev مقایسه کنیم تفاوت کاملا مشاهده می‌شود.


۶. تعداد بیشتر کامپوننت‌های آماده

در Quasar کامپوننت‌‌های بیشتر نسبت به vuetify وجود دارد.

برای مثال WYSIWYG editors , chat messages مواردی هست که می‌توان به آن اشاره کرد.


۷.ابزارها و پلاگین‌های متنوع

meta

با استفاده از این پلاگین می‌توانید meta و title page رو مانند nuxt برای هر صفحه تنظیم کنید.

Quasar Meta
Quasar Meta


Local/session storage

اگر از localstorage جاوا اسکریپت استفاده کرده باشید با این پلاگین کاملا آشنا خواهید بود. با استفاده از این پلاگین یه مقدار کارتون راحت‌تر میشه.

Quasar LocalStorage
Quasar LocalStorage


Date utils

در Quasar می‌تونید کار با تاریخ و زمان بدون نیاز به moment.js انجام بدین و نیازی به اضافه کردن کتابخانه دیگری نداشته باشید.



در آخر تصمیم با شماست که از کدام فریم ورک استفاده کنید ولی قطعا Quasar ارزش یک بار تست کردن رو داره.

منبع






کوزارquasarویوتیفایویتیفای یا کوزارجاوا اسکریپت
شاید از این پست‌ها خوشتان بیاید