بهترین فریم ورک های UI مبتنی بر VueJS و مقایسه آنها

اگر یک توسعه دهنده‌ی front end - فرانت اند هستید، یا تجربه کار با فریم ورک محبوب Vue.js - ویو جی اس را دارید، احتمالاً برای توسعه ی پروژه های خود، نیاز به وجود یک UI framework خوب را احساس کرده اید و ضرورت وجود آن در پروژه را لمس کرده اید. از طرفی با توجه به فراوانی گزینه ها و همچنین تبلیغات گسترده ای که صاحبان و توسعه دهندگان هر یک از فریم ورک ها از کیفیت محصول خود می کنند، ممکن است انتخاب یک فریم ورک خوب قدری برای شما چالش برانگیز شده باشد.

اگر این مشکل برای شما آشناست و می خواهید معروفترین فریم ورک های رابط کاربری مبتنی بر Vue.js را بیشتر بشناسید، این مقاله را تا پایان دنبال کنید.

ویژگی های فریم ورک VueJS - ویو جی اس

طی چند سال گذشته، فریم ورک vue.js با قدم های محکم پا به میدان گذاشته و به رقیبی قدرتمند برای فریم ورک های React و Angular تبدیل شده است. می توان دلیل رشد و محبوبیت vue.js را در ویژگی هایی از این دست جستجو کرد:

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

همه ی این ها، در کنار وجود UI framework (یا UI component library) های بسیار خوبی مانند BootstrapVue، Vuetify و Element، Quasar و ... ؛ فریم ورک ویو جی اس را به یکی از بهترین و محبوب ترین فریم ورک ها در حوزه ی برنامه نویسی سمت کاربر تبدیل کرده است.

ما در این مقاله، به مقایسه ی سه مورد از برجسته ترین و ممتازترین UI component library هایی که برای vue.js نوشته شده اند می پردازیم: Quasar و Vuetify و BoostrapVue

برخی ویژگی های خوب که در بین هر سه فریم ورک مشترکند

وب کامپوننت های واکنش گرا و با کارآیی بالا
داشتن جامعه ی بزرگی از دنبال کنندگان و کاربران (community)
برخورداری از مستندهای خوب و جامع
داشتن ابزار CLI (Command Line Interface یا رابط خط فرمان) قدرتمند
پشتیبانی از RTL
داشتن امنیت بالا
فراهم کردن این امکان که تنها کامپوننت ها و directive ها و گروه های مورد نیاز پروژه را به پروژه اضافه کنیم و برای استفاده ی صرف از قسمتی خاص، مجبور نباشیم کل کد فریم ورک را به کدمان اضافه کنیم. (درخت تکانی یا treeshaking)

البته در هر یک از موارد بالا، برخی از فریم ورک ها گوی سبقت را از دیگری ربوده اند که در ادامه به آن ها اشاره می کنیم.

فریم ورک Quasar

https://quasar.dev/

اولین فریم ورکی که بررسی می کنیم، Quasar است. Quasar (کوئِیزار با تلفظ ˈkwāˌzär) یک کتابخانه یا فریم ورک رابط کاربری است که متن باز بوده و برای vue.js توسعه داده شده است. با استفاده از این فریم ورک می توان به سرعت انواعی از نرم افزارهای تحت وب را توسعه داد. از جمله اپلیکیشن های تک صفحه ای (single page application) واکنش گرا (responsive)، اپلیکیشن های مترقی (PWA یا progressive web applications)، اپلیکیشن هایی که سمت سرور render می شوند (server rendered applications) و ... . در کنار این ها می توان از Quasar برای توسعه ی اپلیکیشن های دسکتاپی و موبایلی نیز بهره برد.

با استفاده از Quasar می توانیم برای تمامی پلتفرم ها (وب، موبایل یا دسکتاپ) از یک کد پایه ی واحد (single code base) استفاده کنیم. این فریم ورک یک ابزار CLI (رابط خط فرمان یا command line interface) و مجموعه ای از کامپوننت های کاربردی را نیز در اختیار ما قرار می دهد.

معروف است که Quasar از بهترین روش های کدنویسی (best practice) استفاده می کند. در واقع Quasar مجموعه ای از بهترین روش های کدنویسی را در کد داخلی خود پیاده کرده است، به گونه ای که نیازی به تنظیم اولیه از سوی کاربر وجود ندارد. این روش های بهینه یا best practice ها عبارتند از:

کوچک سازی کد های HTML/CSS/JS (minification)
انجام فرایند cache busting (فرایندی که کمک می کند وقتی یک فایل در مرورگر کش شده اما زمان انقضای آن فرانرسیده است، اگر تغییری در سمت سرور بر روی آن فایل ایجاد شد، مرورگر با وجود داشتن آن فایل در cache خود، دوباره فایل را از سرور درخواست کند)
ایجاد امکان درخت تکانی به صورت خودکار
ایجاد امکان نگاشت کد (source mapping)
تقسیم کد به بخش های مختلف کوچک تر (code-splitting) و بارگیری آن در زمان مورد نیاز (با قابلیت lazy loading)
حلاجی کردن کد (داشتن امکان code linting)

وقتی به آمار Quasar در گیت هاب نگاهی می اندازیم، می بینیم که این فریم ورک بیش از 18000 ستاره ی گیت هاب و بیش از 400 نفر همکار توسعه دهنده (contributor) دارد که به نظر می رسد این آمار رو به افزایش نیز باشد. در حال حاضر شرکت های معروفی چون Jounce، Qrstore، Whiteboard-it، Biting Bit و Decision6 از Quasar استفاده می کنند.

مزایای فریم ورک Quasar

استفاده از بهترین روش های کدنویسی در کد این فریم ورک
پیروی کردن از اصول طراحی Material design 2.0
وجود بیش از 40 بسته ی زبانی مخصوص این فریم ورک، برای توسعه ی اپلیکیشن های غیر انگلیسی
زیبایی قابل توجه
داشتن کامپوننت هایی برای استفاده ی خاص، که در سایر فریم ورک ها به ندرت یافت می شود
سادگی در جابجایی پروژه هایی که از Quasar استفاده نمی کنند روی این فریم ورک. این کار با استفاده از ماژول یکپارچه ی تعریف (UMD یا Unified Module Definition) انجام می شود.
داشتن درخت تکانی خودکار

معایب فریم ورک Quasar

مشهور است که بیشتر بخش های فریم ورک Quasar توسط تنها یک نفر توسعه داده شده که این موضوع می تواند در آینده مشکلاتی را برای پشتیبانی این فریم ورک ایجاد کند.
از طرفی افزون بر زیاد بودن دنبال کنندگان این فریم ورک، باز هم فریم ورک های BootstrapVue و Vuetify جامعه ی پرجمعیت تری نسبت به آن دارند. همان طور که می دانیم، داشتن یک جامعه ی غنی، در زمینه ی پشتیبانی و یافتن پاسخ سوالات مرتبط، کمک شایانی به برنامه نویسان یک فریم ورک خواهد کرد.

فریم ورک Vuetify

منبع: https://vuetifyjs.com/en/

Vuetify یا به فارسی ویوتیفای یکی دیگر از فریم ورک هایی است که بر پایه‌ی vue.js - ویو جی اس و برای آن توسعه داده شده. این فریم ورک مجموعه ای از کامپوننت ها را در اختیار کاربران قرار می دهد که هر یک از تجربه ی کاربری غنی و مناسبی برخوردارند و قابلیت استفاده ی مجدد دارند (reusable هستند). مشابه Quasar، فریم ورک Vuetify نیز تقریباً تمامی مرورگر های وب را پشتیبانی می کند. یکی از ویژگی های بسیار خوب Vuetify، پشتیبانی آن از سایر پلتفرم ها برای توسعه ی نرم افزار است. به عنوان مثال Vuetify افزون بر وب، قالب های استانداردی برای توسعه ی PWA، توسعه ی اپلیکیشن های موبایلی (برای cordova) و توسعه ی اپلیکیشن های دسکتاپی دارد (برای electron).

Vuetify از استاندارد های Material design پیروی می کند

Vuetify به طور کامل بر اساس اصول Material design طراحی شده که به استاندارد سازی طرح ها کمک می کنند. با این وجود برای برخی نیاز ها، ممکن است سفارشی سازی هایی لازم باشد و امکان ویرایش کامپوننت ها و قابلیت های فریم ورک وجود داشته باشد. از این رو Vuetify مجموعه ای از طرح بندی ها (layouts) را برای سفارشی سازی اپلیکیشن، و مجموعه ای از متغیر های sass را برای سفارشی سازی کامپوننت ها در اختیار قرار می دهد.

اگر آمار گیت هاب را در نظر بگیریم، Vuetify بیش از 30000 ستاره و بیش از 600 نفر همکار توسعه دهنده دارد که از این نظر گوی سبقت را از سایر رقبا ربوده است. شرکت هایی نظیر Taigbot، qfl-stack، FinTech Consortium و Bitting bit از جمله شرکت های معروفی هستند که Vuetify را به عنوان فریم ورک رابط کاربری خود انتخاب کرده اند.

مزایای فریم ورک Vuetify

زیبایی قابل توجه
تنوع گسترده ی کامپوننت ها
سازگاری با مرورگر های مختلف
پیروی از اصول Material design
به روزرسانی دائمی
داشتن درخت تکانی خودکار
اضافه کردن کد های لازم به markup صفحه، مطابق با اصول WAI-ARIA. (به گونه ای که افراد دارای محدودیت های جسمی نیز بتوانند از آن استفاده کنند. در صفحه MDN مربوطه، و نیز در این صفحه از سایت w3.org می توانید درباره ی WAI-ARIA بیشتر بخوانید).

معایب فریم ورک Vuetify

به هردلیلی اگر تمایل به استفاده از Material design نداشته باشید، Vuetify گزینه ی مناسبی برای شما نخواهد بود.
سفارشی سازی کامپوننت های این فریم، قدری چالش دارد. از این رو در پروژه هایی که طرح های سفارشی برای رابط کاربری آن در نظر گرفته شده، این موضوع ممکن است دردسر ساز باشد.
برخی کامپوننت های آن event های جامعی را ارائه نمی کنند، از این رو در برخی نیاز های خاص، لازم است کدنویس حرفه ای و با تجربه ای باشید تا بتوانید سناریوهای مد نظرتان را پیاده کنید.

فریم ورک BootstrapVue

منبع: https://bootstrap-vue.org/

می توان گفت bootstrap (بوت استرپ) معروف ترین فریم ورک مورد استفاده در وب سایت ها و وب اپلیکیشن هاست. حال BootstrapVue نسخه ی سفارشی شده ی bootstrap است که برای فریم ورک vue.js توسعه داده شده. BootstrapVue بیش از 85 کامپوننت، بیش از 45 افزونه (plugin)، بیش از 1200 آیکون و چندین دایرکتیو (directive) و پوسته(تم یا theme) دارد. این فریم ورک جامع ترین پیاده سازی نسخه 4 bootstrap را دارد و در آن کامپوننت ها و سیستم جدول بندی صفحه ی (grid) bootstrap پیاده سازی شده است.

در BootstrapVue، المان های معمول bootstrap به صورت کامپوننت های ویو در آمده اند. اگر شما با bootstrap آشنایی دارید، یادگیری کار با BootstrapVue زمان زیادی را از شما نخواهد گرفت. شرکت هایی نظیر Ophigo، Channext Platform و Keymentics را می توان از جمله شرکت های مهمی دانست که از این فریم ورک استفاده می کنند. این فریم ورک بیش از 13000 ستاره ی گیت هاب و نیز بیش از 300 همکار توسعه دهنده دارد.

مزایای فریم ورک BootstrapVue

صفحه بندی (layout) واکنش گرا به صورت mobile-first
سادگی و سرعت در استایل دهی به المان ها
اضافه کردن کد های لازم به markup صفحه، مطابق با اصول WAI-ARIA. (به گونه ای که افراد دارای محدودیت های جسمی نیز بتوانند از آن استفاده کنند. در صفحه MDN مربوطه، و نیز در این صفحه از سایت w3.org می توانید درباره ی WAI-ARIA بیشتر بخوانید)
داشتن قابلیت ها و کارکرد های به روزی که در bootstrap وجود دارد.
امکان ایجاد تم دلخواه با استفاده از متغیر های scss و پیکربندی دلخواه

معایب فریم ورک BootstrapVue

کامپوننت های این فریم ورک به صورت پیش فرض از ظاهر ساده ای برخوردارند.

مقایسه ی این سه فریم ورک

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

منبع: https://vuetifyjs.com/en/introduction/why-vuetify/#why-vuetify3f

جدول بالا مقایسه ی فریم ورک های رابط کاربری vue.js است که وبسایت رسمی Vuetify منتشر کرده. Vuetify اصول Material design را به خوبی پیاده کرده. اگر با این اصول آشنا هستید و مایل هستید آنها را در برنامه ی خود پیاده کنید، استفاده از Vuetify می تواند بهترین گزینه برای شما باشد.

البته BootstrapVue نیز مزایایی دارد که در جدول بالا منعکس نشده. به عنوان مثال سفارشی سازی آن نسبت به Vuetify راحت تر است، در نتیجه اگر اپلیکیشن شما طرح خاصی دارد و ملزم هستید که از روی یک طراحی از قبل تعیین شده اپلیکیشن خود را پیاده کنید، BootstrapVue انتخاب بهتری نسبت به Vuetify است. از طرفی برخی کامپوننت های BootstrapVue، event های بیشتری نسبت به Vuetify دارند که این موضوع نیز کار سفارشی سازی را آسان تر می کند. در کنار این ها، از آنجا که BootstrapVue بر اساس bootstrap توسعه داده شده، احتمالاً اگر حین توسعه ی اپلیکیشن خود به مشکلی برخوردید، راحت تر می توانید در دنیای اینترنت پاسخ سوال ها و مشکل های خود را پیدا کنید. برای افرادی که تجربه ی کمی در برنامه نویسی دارند نیز BootstrapVue می تواند گزینه ی بهتری باشد.

طبق جدول بالا و توضیحاتی که ارائه دادیم، می توان گفت که Vuetify و BootstrapVue در کل گزینه های مناسبی برای توسعه ی اپلیکیشن های بزرگ هستند و امتحان خود را پس داده اند. جدول زیر نیز که با مراجعه به سایت npm trends تهیه شده، وضعیت دانلود هفتگی این سه فریم ورک در رجیستری npm را طی شش ماهه ی اخیر نشان می دهد:

همانطور که می بینید، BootstrapVue و Vuetify رقبای جدی یکدیگرند.

اما Quasar نیز حرف هایی برای گفتن دارد. داشتن برخی کامپوننت های خاص که در هیچ یک از دو فریم ورک دیگر یافت نمی شود، Quasar را از رقبایش متمایز می کند. کامپوننت هایی مانند editor، pull to refresh، resize observer و ... از این قبیل هستند. این ویژگی در کنار زیبایی چشمگیر این کامپوننت، از جمله مزایای فریم ورک Quasar است. از این رو اگر می خواهید با زحمت کم، یک اپلیکیشن زیبا داشته باشید، یا پروژه شما نیاز به کامپوننت هایی دارد که تنها در فریم ورک Quasar یافت می شود، یا می خواهید طرح متفاوتی را تجربه کنید و چالش جدیدی داشته باشید، استفاده از این فریم ورک می تواند فکر خوبی باشد.