مقایسه Vue.js با فریمورک‌های جدید جاوااسکریپت

از آنجا که طراحی فرانت-اند برای موفقیت یک برنامه روزبه‌روز اهمیت بیشتری پیدا می‌کند، نیاز به کار با بهترین فریمورک فرنت-اند به یک ضرورت تبدیل شده است.

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

برای توسعه‌دهندگانی که با جاوااسکریپت کار می‌کنند، Vue به یک فریمورک محبوب و جا افتاده تبدیل شده است. با این حال پروژه‌های مختلف به راه حل‌های متفاوتی نیاز دارند و یافتن جایگزین برای Vue می‌تواند پروژه‌ای را با سرعت، عملکرد و هماهنگی بیشتر پیش ببرد.

در این مقاله قصد داریم Vue را باSvelte ،Riot ، Hyperapp و Alpine (برخی از فریمورک‌های جاوااسکریپت جدید و کمتر شناخته شده) مقایسه کنیم که ویژگی‌های مفیدی را ارائه می‌دهند.

مروری سریع بر Vue.js

Vue یک فریمورک جاوااسکریپت متن باز است و از الگوی طراحی Model-View-ViewModel (MVVM) استفاده می‌کند که سه لایه را در ایجاد و توسعه برنامه‌ شامل می‌شود.

اگر با الگوی محبوب Model-View-Controller (MVC) آشنایی دارید، توجه داشته باشید که Vue وظیفه کنترلر را با استفاده از لایه view model انجام می‌دهد.

در یک برنامه Vue، لایه Model دسترسی به داده‌ها را فراهم می‌کند. همچنین منطق انتقال داده‌ها از Model به View و بالعکس در لایه ViewModel قرار دارد.

این مدل می‌تواند چیزی شبیه به زیر باشد:

var model_data = {
  js_frameworks: [‘Vue’, ‘Svelte’, ‘Riot’, ‘Hyperapp’, ‘Alpine’]
};

لایه ViewModel لایه‌های view و model را با استفاده از اتصال داده‌های دو طرفه به هم مرتبط می‌کند. در Vue یک شی view model را می‌توان به صورت زیر مثال زد:

var vm = new Vue({ 
  el: ‘#app’,
  data: model_data
});

توجه داشته باشید که پارامتر el با استفاده از id عنصر، لایه view model را به هر عنصر دیگری در view متصل می‌کند. در این مثال، ما لایه view model خود را به عنصری متصل می‌کنیم که مقدار خصوصیت id آن app است. سپس پارامتر داده view model را به model وصل می‌کند.

لایه view شامل DOM و تمام عناصر آن است که داده‌های موجود در لایه model را به کاربران نشان می‌دهد. مثال مربوط به لایه‌های model و view model بالا به شکل زیر است:

<div id=”app”>
  <ul>
    <li v-for=”framework in js_frameworks”>{{framework}}</li>
  </ul>
</div>

id بیرونی‌ترین div بالا با id مشخص شده در لایه view model مطابقت دارد و دسترسی به داده‌های model را در view فراهم می‌کند. ما از سینتکس v-for برای ایجاد حلقه for بر روی داده‌ها و نمایش آنها به عنوان یک لیست استفاده می‌کنیم.

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

Vue.js در مقابل Svelte

یک ویژگی متداول که هنگام مقایسه فریمورک‌ها باید در نظر گرفته شود، سرعت آنهاست. در اینجا به بررسی نحوه ساخت و اجرای هر برنامه به همراه دستکاری DOM در هر فریمورک خواهیم پرداخت.

از آنجا که Vue رابط کاربری یک برنامه را از طریق DOM مجازی ارائه می‌دهد، کار با آن را آسان‌تر می‌کند. اما با اینکه این روش سریع است، کامپایل در زمان اجرا روند بارگیری را به میزان قابل توجهی کند می‌کند.

با این حال، Svelte این مشکل عملکردی را در زمان ساخت حل می‌کند. این فریمورک جاوااسکریپت با سرعت و عملکرد بالایش شناخته می‌شود. همراه با یک کامپایلر که هنگام اجرای برنامه، کد فریمورک را به جاوااسکریپت vanilla تبدیل می‌کند.

همچنین هنگام اتمام ساختن یک برنامه، همه آثار Svelte ناپدید می‌شوند و فقط جاوااسکریپت vanilla باقی می‌ماند. و از آنجا که مرورگرها جاوااسکریپت را بهتر می‌فهمند، دیگر نیازی به بارگیری کتابخانه نیست و زمان بارگیری اولیه بدین صورت از بین می‌رود.

بر خلاف Vue ، Svelte تغییرات مستقیمی در DOM ایجاد می‌کند. همچنین پکیج‌های حاوی کد جاوااسکریپت vanilla معمولا سبک‌تر از پکیج‌هایی‌اند که همراه کتابخانه‌ها هستند.

همه موارد ذکر شده برای بهبود عملکرد کلی برنامه با هم همکاری می‌کنند.

هر چند Vue و Svelte هر دو دارای سینتکسی ساده و قابل فهم هستند، اما Svelte برای پیاده سازی عملکردهای مختلف به کد کمتری نیاز دارد.

Svelte در مقایسه با Vue که از الگوی طراحی MVVM استفاده می‌کند، الگوهای طراحی را به طور کلی کنار می‌گذارد. در عوض کامپوننت‌های کپسوله شده را با HTML ، CSS و JavaScript در یک صفحه ایجاد می‌کند:

در کد جاوااسکریپت بالا، ما یک متغیر ایجاد کردیم که یک رشته را نگه می‌دارد. توجه داشته باشید که در HTML یک باکس ورودی و پاراگراف با استفاده از داده‌های دو طرفه از طریق خصوصیات bind به هم متصل می‌شوند.

این کد به ما یک باکس متنی که name نام دارد، تحویل می‌دهد و متن را در پاراگراف زیر باکس درج می‌کند.

اگر مقدار موجود در text box را تغییر دهیم، مقداری که name دارد و همچنین مقدار درج شده در پاراگراف نیز تغییر می‌کند. در انتها هم یک رنگ قرمز را به استایل متن پاراگراف می‌دهیم.

با اینکه برخی رویکرد ساده Svelte را به منظور حفظ کد، نشانه گذاری و استایل دهی ترجیح می‌دهند، اما می‌توان آن را یک روش قدیمی در نظر گرفت و بسته به مقیاس پروژه، الگوی طراحی MVVM مدرن در Vue ممکن است ترجیح داده شود.

Vue در مورد جامعه، پایگاه کاربر و پشتیبانی حرف اول را می‌زند. از آنجا که اکوسیستم Svelte همچنان در حال رشد است، کاربران آن هنوز منابع کافی، ابزارهای متن باز، پلاگین‌ها و پشتیبانی جامعه را ندارند، در حالی که توسعه‌دهندگان Vue از داشتن این امکانات لذت می‌برند.

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

با این حال قابلیت‌های svelte به طور یکپارچه با هم کار می‌کنند تا عملکرد کلی را به همراه زمان بارگیری کمتر و فضای حافظه بیشتر بهبود بخشند.

Vue.js در مقابل Riot.js

<script>
  let name = "Samson";
</script>


<main>

  <input bind:value="{name}" />
  <p>My name is {name}.</p>

</main>

<style>
  p {
    color: red;
  }
</style>

Riot.js خود را به عنوان یک کتابخانه ساده و سبک رابط کاربری معرفی می‌کند و به توسعه‌دهندگان کمک کرده تا هنگام ایجاد UIهای زیبا در تولید برنامه‌هایشان پیشرفت کنند.

درست مانند React کاربران می‌توانند تگ‌های سفارشی در Riot ایجاد کنند. این یکی از نقاط قوت کتابخانه است زیرا توسعه‌دهندگان می‌توانند:

• با HTML و JavaScript کامپوننت‌هایی مانند هدر، منوهای ناوبری، دکمه‌ها و کارت‌ها را ایجاد کنند.
• کامپوننت‌ها را با استفاده از عناصری که به صورت منحصر به فرد نام گذاری می‌شوند و خوانایی کد را بالا می‌برند، بسازند.
• از کامپوننت‌ها به طور نامحدود مجددا استفاده کنند.

مزیت دیگر Riot اندازه کوچک آن است. این مورد به عنوان یک فریمورک مینیمالیست شناخته می‌شود و حداقل نیازها را برای ایجاد یک پروژه فرانت-اند فراهم می‌کند. از آنجا که امکانات کمتری در مقایسه با Vue دارد، چیزهای کمتری هم برای یادگیری وجود دارد و به تبع با سرعت بالایی در مرورگرها بارگیری می‌شود.

به جای الگوی MVVM که Vue از آن بهره می‌گیرد، Riot از الگوی Model-View-Presenter (MVP) استفاده می‌کند. model و view آن مشابه Vue هستند، اما به جای لایه view model، Riot از یک لایه presenter برای انتقال داده‌ها از model به view و بالعکس استفاده می‌نماید.

یک تفاوت عمده بین Vue و Riot این است: با اینکه Vue از DOM مجازی برای ارائه رابط کاربری برنامه استفاده می‌کند، Riot از دستورات binding مرتبط مانند AngularJS کمک می‌گیرد. این بدان معنی است هر بار که تغییری در کد ایجاد می شود، به درخت DOM می‌رود و گره‌ها را به روز می‌کند.

bind عبارات برای برنامه‌های کوچک و متوسط بسیار ​​مفید است، اما می‌تواند مشکلات عملکردی برای برنامه‌های بزرگتر ایجاد کند.

یکی از مزیت‌های بزرگ Vue نسبت به Riot، جامعه بزرگ آن است. Riot هنوز به طور گسترده پذیرفته نشده، در حالی که Vue توسط بیشتر شرکت‌ها و توسعه‌دهندگان پذیرفته شده است.

Vue.js در مقابل Hyperapp

Hyperapp فریمورکی فوق العاده سبک با حجم 1 کیلوبایت برای ایجاد فرانت-اند است که خیلی سریع راه اندازی می‌شود و در مقایسه با Vue به حافظه کمتری احتیاج دارد (مزیتی که هنگام اجرای برنامه بر روی دستگاه‌های رده پایین برجسته می‌شود).

یک شباهت بین Vue و Hyperapp این است که هر دو از DOM مجازی استفاده می‌کنند.

اگر در حال ساخت یک برنامه پیچیده هستید، ویژگی‌ها و هماهنگی‌های داخلی Vue بهترین خدمات را به شما می‌دهد. به همین دلیل اگر به دنبال فریمورکی هستید که سادگی را با یک API واضح در اولویت قرار دهد، باید Hyperapp را امتحان کنید.

مشابه React ، Hyperapp نیز از JSX پشتیبانی می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا کامپوننت‌های قابل استفاده مجدد را برای به کارگیری در فریمورک‌های دیگر ایجاد کنند. توجه داشته باشید که هنگام استفاده از JSX در Hyperapp، باید کد JSX را توسط یک کامپایلر به تابعی قابل فراخوانی تبدیل کنید، زیرا مرورگرها نمی‌توانند JSX را تفسیر کنند.

سادگی Hyperapp پذیرش آن را ساده‌تر می‌کند. چرا که تغییرپذیری را بالا برده و کمتر مستعد خطا است (بر خلاف Vue).

مانند دیگر فریمورک‌هایی که تا کنون بررسی کرده‌ایم، Hyperapp چندان محبوب نیست. با این حال جامعه کوچک آن به طور فعال برای بهبود فریمورک تلاش می‌کند. در زمان نوشتن این مقاله، Hyperapp هنوز وب سایت رسمی ندارد و مستندات آن هم به خوبی Vue نیست. برای کسب اطلاعات بیشتر در مورد نحوه کار Hyperapp می‌توانید این آموزش مقدماتی را که سازندگان آن ایجاد کرده‌اند، بررسی کنید.

Vue.js در مقابل Alpine.js

ساختن پروژه با Alpine بسیار آسان است. هیچ نصب و راه اندازی مورد نیاز نیست و تنها با اضافه کردن کتابخانه آن به پروژه می‌توانید شروع به کار کنید:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

همچنین نیازی به ابزارهای پیچیده build، bundlerها و حتی پکیج منجرها هم ندارد.

با اینکه Vue یک CDN را در اختیار توسعه‌دهندگان قرار می‌دهد، اما باز هم کاربران نمی‌توانند از کامپوننت‌های تک فایل استفاده کنند. به همین جهت برای توسعه برنامه‌های بزرگ با Vue توصیه می‌شود آن را از طریق npm نصب کنید.

یک مزیت بزرگ Alpine سبک بودن آن است، بنابراین بعید است کاربران با مشکلات سرعت و عملکرد روبه‌رو شوند. این به شدت از Tailwind CSS الهام گرفته است، زیرا کاربران می‌توانند با استفاده از کلاس‌ها از جاوااسکریپت به طور مستقیم در کدهای HTML استفاده کنند.

به علاوه Alpine جدیدتر از jQuery است، بنابراین رویکرد آن برای دستکاری DOM مدرن‌تر است. بر خلاف Vue (با داشتن DOM مجازی)، Alpine هنگام ایجاد یک برنامه تغییرات را مستقیما در DOM واقعی اعمال می‌کند.

از نظر سینتکسی Alpine بسیار شبیه Vue نوشته شده (اقدامی عمدی توسط خالق آن یعنیCaleb Porzio) و دارای 14 دستور برای گسترش کدهای جاوااسکریپت در HTML است:

x-data
x-init
x-show
x-bind
x-on
x-if
x-for
x-model
x-text
x-html
x-ref
x-transition
x-spread
x-cloak

Alpine جایگزین مناسبی برای پروژه‌هایی است که به کارگیری Vue برای آنها بسیار سنگین است، مانند برنامه‌های کوچکی که فقط به چند ماژول ساده نیاز دارند.

جمع‌بندی

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

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

این فریمورک‌ها را بررسی کنید و سعی کنید از آنها در پروژه‌های بعدی خود استفاده نمایید تا مزایای آنها را از نزدیک ببینید.

منبع