مقایسه ی فریم ورک های BootstrapVue، Vuetify و Quasar و بررسی ویژگی های آنها

مقایسه ی فریم ورک های BootstrapVue، Vuetify و Quasar و بررسی ویژگی های آنها

مقایسه ی فریم ورک های BootstrapVue، Vuetify و Quasar و بررسی ویژگی های آنها

مقدمه:

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

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

طی چند سال گذشته، فریم ورک 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

quasar framework

  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

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

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 یافت می شود، یا می خواهید طرح متفاوتی را تجربه کنید و چالش جدیدی داشته باشید، استفاده از این فریم ورک می تواند فکر خوبی باشد.

 

پیروز باشید...

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: