آیا تا به حال برای برنامه نویسی رابط کاربری یک وب سایت از جی کوئری (jQuery)، بوت استرپ (Vue.js ،(Bootstrap یا React و... استفاده کرده‌اید؟ در حال حاضر، هر یک از این فریم ورک‌های جاوا اسکریپت همراه با کتابخانه‌ها و ابزارهای کاربردی زیادی در دسترس هستند و یکی از نکات چالش برانگیز برای توسعه دهندگان این است که بهترین آن‌ها را انتخاب کنند.

به تازگی یک فریم ورک جدید و کوچک در دنیای فریم ورک‌های جاوا اسکریپت مورد استقبال قرار گرفته است که به آن Alpine.js گفته می‌شود. Alpine.js ماهیتی واکنش‌گرا (مشابه با React و Vue) را با هزینه‌ی بسیار کمتری فراهم می‌کند. علاوه بر آن، باعث می‌شود تا از پیچیدگی‌های کار تا حدی کم شود. برای فهمیدن این‌که Alpine.js چیست و چه ویژگی‌هایی دارد، با ما همراه باشید.

Alpine.js چیست؟

همان‌طور که گفتیم، Alpine.js یک فریم ورک جاوا اسکریپت است که از سال 2019  و با شعار رهایی از جی کوئری در اختیار توسعه دهندگان وب قرار گرفته است. Alpine.js به صورت رسمی برای فریم ورک Livewire که مربوط به لاراول است ساخته شد، اما همانند انگولار، React.js، Vue.js و Svelte این امکان را می‌دهد تا برنامه نویس به صورت بهینه کدنویسی کند، با دردسر کمتری کد خود را تغییر دهد و با استفاده از یک رابط، برنامه‌ی خود را آسان‌تر توسعه دهد. تفاوت اصلی Alpine.js با سایر فریم ورک‌ها را با یک مثال توضیح می‌دهیم.

فرض کنید که یک المان رابط کاربری مانند چند تب‌ (tab) را در یک صفحه از وب سایت دارید. هدف نهایی این است که وقتی کاربر روی یک تب کلیک می‌کند، محتویات مربوط به آن تب نمایش داده ‌شود. اگر از PHP استفاده کنید، به راحتی می‌توانید به این هدف در سمت سرور برسید. اما لود دوباره‌ی صفحه با کلیک بر هر تب کار بهینه و واکنش‌گرایی نیست.

پس برای ایجاد یک تجربه‌ی بهتر نسبت به حالت قبل، توسعه دهندگان به سراغ بوت استرپ و جی کوئری رفتند. در این حالت، باید یک تابع listener را برای هر تب ایجاد کنید تا زمانی که یک کاربر روی آن کلیک می‌کند، تابع صدا زده شود. اما همین روند در Alpine.js از این هم ساده‌تر است، چون Alpine.js نیازی به ساخت (build) ندارد. شما می‌توانید به سادگی یک کتابخانه را include کرده و در همان زمان، تمام ویژگی‌های آن کتابخانه اضافه می‌شوند. این کد در Alpine.js به صورت زیر نوشته می‌شود:

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

در کد بالا، ما با استفاده از دستور x-data یک شی را تعریف و مقداردهی کردیم. دستور  x-on برای کار با رویدادها استفاده می‌شود. دستور x-show نیز تب موردنظر را نمایش می‌دهد. درمورد دستورات Alpine.js در بخش‌های بعدی مفصل توضیح خواهیم داد.

چرا از Alpine.js استفاده می‌کنیم؟

هنگامی که یک صفحه در مرورگر کاربر ساخته می‌شود، المان‌هایی روی صفحه‌ نمایش داده می‌شود که به آن‌ها UI یا همان رابط کاربری می‌گویند. این المان‌ها در قالب یک درخت ساخته می‌شوند که DOM یا Document Object Model نامیده می‌شود. Alpine.js یک فریم ورک سبک‌ است که کمک می‌کند تا آسان‌تر DOM را دست‌کاری کنید. زمانی که در حال توسعه‌ی برنامه با بوت استرپ هستید، بیشتر متوجه عملکرد Alpine.js می‌شوید. برای مثال، در حالات زیر استفاده از Apline.js توسعه را راحت‌تر می‌کنند:

• نمایش و پنهان کردن گره‌های DOM تحت شرایط خاص

• بایندکردن (binding) ورودی کاربر

• فراخوانی رویداد (event) و تغییر رابط کاربر براساس آن

• اضافه کردن کلاس‌ها

Alpine.js می‌تواند با کتابخانه‌ی دیگر نیز مورد استفاده قرار گیرد. DOM مجازی نمی‌سازد و برای استفاده از آن نیاز به ساخت فایل جاوا اسکریپت ندارید؛ هر چند که در صورت تمایل می‌توانید این کار را نیز انجام دهید. همه چیز به سادگی در تگ script نوشته می‌شود.

معایب Alpine.js چیست؟

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

مشکل بعدی، عملیات ‌بروزرسانی DOM است. در Alpine.js، اگر به دلیل رویدادهای غیرتعاملی نیاز به بروزرسانی رابط کاربری باشد، DOM به صورت خودکار آپدیت نمی‌شود. برای مثال فرض کنید که یک تم dark دارید که می‌خواهید براساس ساعت سیستم یا تنظیمات نور نمایش‌گر به طور خودکار فعال شود. Alpine.js متوجه این تغییرات نمی‌شود و رابط کاربری را بروز نخواهد کرد. برای حل این مشکل، بهتر است از تغییرات DOM برای تشخیص و آپدیت این شرایط استفاده کنید که با دستور document.getElementById انجام می‌شود و ویژگی‌های المان را تنظیم می‌کند.

در راستای جمع‌بندی درمورد مزایا و معایب Apline.js، تصویر زیر این فریم ورک را با سایر فریم ورک‌های جاوا اسکریپت که عملکردی مشابه دارند، مقایسه می‌کند:

نصب و شروع کار با Alpine.js

پس از اینکه یاد گرفتیم Alpine.js چیست، در این بخش می‌خواهیم Alpine.js را نصب کرده تا بتوانیم کدنویسی را آغاز کنیم.

گام اول – نصب نود جی اس (Node.js)

برای نصب و اجرای افزونه‌های مختلف، نیاز به NPM دارید. Node.js ماژول‌های زیادی (module) را درون خود دارد. زمانی که Node.js را نصب می‌کنید، NPM یا node package manager هم در پس زمینه نصب می‌شود که با استفاده از آن‌ها می‌توانید بسته‌ها و ماژول‌های مربوط به پروژه‌ی خود یا کل سیستم را مدیریت کنید. برای نصب node.js می‌توانید مقاله‌ی "آموزش نصب node.js در ویندوز" را مطالعه کنید.

گام دوم – نصب Alpine.js

برای نصب Alpine.js، باید دستور زیر را اجرا کنید:

npm i alpinejs

عبارت –i مخفف نصب (install) است. به همین راحتی Alpine.js نصب شده و آماده‌ی اجراست.

گام سوم– استفاده از Alpine.js

برای استفاده از قابلیت‌های Alpine.js، باید آن را در کد import کنید:

import 'alpinejs'

برای پشتیبانی IE11 باید به جای دستور بالا، از اسکریپت زیر استفاده کنید:

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

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

مجموعه‌ دستورات در کدنویسی با Alpine.js

دستورات در مرکز فریم ورک Alpine.js قرار دارند، زیرا با کمک آن‌ها می‌توان چیدمان DOM را تغییر داد. حدود ۱۳ دستور اصلی در Alpine.js وجود دارد، که ما در این بخش ۱۰ مورد از رایج‌ترین دستورات استفاده ‌شده را توضیح خواهیم داد.

دستور x-data

<div x-data="[JSON data object]">...</div>

دستور x-data در یک المان Html، یک حوزه (scope) یا حالت (state) جدید به وسیله‌ی یک شی ایجاد می‌کند. همه‌ی عناصر Html درون آن المان نیز به داده‌ی تعریف شده دسترسی دارند. مثال:

<div x-data="{ foo: 'bar' }">...</div>

دستور x-init

<div x-data="..." x-init="[expression]"></div>

دستور x-init برای اجرای یک expression در هنگام مقداردهی یک کامپوننت استفاده می‌شود. مثال:

//1: runs on DOM initialization.
<div x-data="{ title: 'foo' }" x-init="title = 'bar'"></div>
//2 : runs post DOM initialization.
<div x-data="images()"
    x-init="fetch('https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=yellow+flowers&image_type=photo')
.then(response => response.json())
.then(response => { images = response.hits })"></div> 

دستور x-show

<div x-show="[expression]"></div>

دستور x-show ویژگی‌های CSS یک المان را در صورت صحیح یا غلط بودن عبارت نسبت داده شده، تغییر می‌دهد. اگر مقدار false باشد ویژگی ظاهری تغییری نمی‌کند. اگر true باشد مقدار آن به حالت پیش‌فرض نسبت داده شده تغییر می‌کند. مثال:

<div x-show="isOpen"></div>

دستور x-bind

<input x-bind:[attribute]="[expression]">

دستور x-bind برای بایندکردن مقادیر رشته، بولین و... استفاده می‌شود. مثال:

/*Value attribute binding:*/
<img x-bind:src="imgSrc">
/*Class attribute binding:*/
<div x-bind:class="{ 'hidden': isClosed }"></div>
/*Boolean attribute binding:*/
<input type="text" x-bind:hidden="true">

دستور x-on

<input x-on:[event]="[expression]">

دستور x-on یک event listener را به المان مورد نظر نسبت می‌دهد. در صورت فراخوانی رویداد، مقدار مورد نظر به المان نسبت داده می‌شود. مثال:

<input x-on:input="foo = 'bar'">

دستور x-if

<template x-if="[expression]"><div>Some Element</div></template>

دستور x-if برای تعریف و اجرای شرط‌ها استفاده می‌شود. توجه کنید که در صورت false بودن مقدار شرط، المان پنهان یا hide نمی‌شود، بلکه به طور فیزیکی از DOM حذف می‌شود. مثال:

<template x-if="true"><div>...</div></template>

دستور x-for

هنگامی که بخواهید چندین المان را در DOM بسازید، باید از دستور x-for کمک بگیرید. این دستور یک حلقه در Html ایجاد می‌کند که به کمک آن المان‌های جدید را می‌سازد. مثال:

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

دستور x-model

<input type="search" x-model="[data item]">

دستور x-model یک بایندینگ دوطرفه را ایجاد می‌کند. استفاده از این نوع بایندینگ باعث می‌شود که تغییرات سریع‌تر شناسایی شوند و مقادیر جدید از المان Html به بخش دیتای برنامه ارسال شوند. مثال:

<input type="search" x-model="search">

دستور x-text

<span x-text="[expression]"></span>

از آن‌جایی که دستور x-bind برای بایندینگ استفاده می‌شود، برای نمایش یک متن درونی نیاز به یک دستور جدید دارید که x-text این کار را انجام می‌دهد. مثال:

<span x-text="title"></span>

دستور x-html

<p x-html="[expression]"></p>

دستور x-html کمی مشابه با x-text عمل می‌کند، اما به جای تنظیم متن درونی، یک المان Html درونی را مشخص می‌کند. مثال:

<p x-html="text"></p>

جمع‌بندی

در این مقاله آموختیم که Alpine.js چیست. با ویژگی‌های آن آشنا شدیم و تلاش کردیم تا آن را از جنبه‌های مختلف بررسی کنیم. Alpine.js برای توسعه دهندگانی است که به دنبال ایجاد یک برنامه‌ی تک‌صفحه‌ای (SPA) نیستند. Alpine.js سبک است و برای نوشتن کدهای جاوا اسکریپت در سمت کلاینت طراحی شده ‌است.

برای آشنایی با سایر فریم ورک‌های مبتنی بر جاوا اسکریپت می‌توانید مقاله‌ی "فریمورک‌های جاوا اسکریپت : بهترین فریمورک‌های JavaScript" را مطالعه کنید. مقاله‌ی "آموزش React Native | ری اکت نیتیو چیست و چه کاربردی دارد؟" و مقاله‌ی "Vue.js چیست؟ آشنایی با فریم‌ورک محبوب جاوا اسکریپت" نیز روی آشنایی با این دو فریم ورک پرکاربرد جاوا اسکریپت تمرکز دارند. اگر در مورد Alpine.js سوال یا تجربه‌ای دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.

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