Alpine.js چیست؟ فریمورکی در حد React و Vue
آموزش جاوااسکریپت (JavaScript) زمان مطالعه: 6 دقیقه تاریخ انتشار: 12 ماه قبل

Alpine.js چیست؟ فریمورکی در حد React و Vue

امروزه کتابخانه React و فریمورک Vue در توسعه وب اپلیکیشن های مدرن به خصوص برنامه های تک صفحه ای مورد استقبال توسعه دهندگان وب قرار گرفته است. همیشه انتخاب یکی از این فریمورک ها برای توسعه دهندگان چالش های زیادی را به همراه داشته است. به تازگی فریمورک نسبتا کوچک اما کاربردی با نام فریمورک Alpine.js منتشر شده است که امکانات React و Vue را در اختیارتان قرار می دهد اما با هزینه کم تر و کدنویسی نسبتا آسان تر! با هیرود در ادامه این مقاله همراه باشید تا به بررسی فریمورک alpine.js بپردازیم و امکانات مخوف آن را برایتان برملا کنیم😁

 

Alpine.js چیست؟

Alpine.js در سال 2019 منتشر شد و شعار اصلی آن خلاص شدن از jquery بود و در اختیار توسعه دهندگان قرار گرفت. Alpine.js به صورت اختصاصی برای Livewire که فول استک فریمورک لاراول است ساخته شده است ما کارایی مشابه فریمورک هایی نظیر React.js ، Vue.js و Angular دارد که به توسعه دهندگان در ساخت رابط های کاربری پیشرفته تحت وب کمک می کنند و می توان بهترین اپلیکیشن های تحت وب را با آن ها ساخت. برای درک بهتر کار Alpine.js یک مثال را با هم بررسی می کنیم.

فرض کنید قصد دارد با کلیک بر روی یک دکمه یک منوی Dropdown را نمایش دهید. در حالت عادی باید از جی کوئری یا جااواسکریپت خام استفاده کنید و با تنظیم یک listener بر روی آن دکمه زمانی که کلیک انجام شد با اضافه کرده class به المان Dropdown آن را به نمایش در آوردید که کمی زمان بر و طاقت فرسا است. اما با استفاده از 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 شئ مورد نظر خود را تعریف و مقداردهی کردیم. از :class جهت تعریف کلاس های پویا و از x-show جهت نمایش المان استفاده شده است. همچنین با استفاده از @click به راحتی می توان رویداد کلیک را روی هر المان تعریف کرد.

علت استفاده از Alpine.js

یک صفحه وب از تگ ها html به صورت درختی تشکیل شده است که به آن Ui را رابط کاربری می گویند. ما در جاوا اسکریپت آن را به صورت DOM یا همان Document Object Model که به صورت سلسه مراتبی یا درخت است در اختیار داریم و می توانیم تغییرات خود را در آن اعمال کنیم و در نهایت نتیجه آن را در صفحه وب مشاهده کنیم. Alpine.js آمده است تا به شما در راحت تر دست کاری کردن DOM کمک کند. همچنین اگر از Bootstrap استفاده می کنید خیلی بهتر می توانید از Alpine استفاده کنید. Alpine.js در مثال های زیر Alpine.js کار شما می تواند بسیار راحت کند:

  • نمایش یا مخفی سازی گره های DOM

  • Bind کردن ورودی ها

  • کنترل کردن Class ها به صورت پویا

  • تعریف Event ها

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

 

آشنایی با معایب Alpine.js

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

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

مقایسه Alpine.js با سایر فریمورک ها

 

نصب و آموزش اولیه Alpine.js

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

 

نصب Alpine.js با NPM

برای نصب alpine.js کافیست دستور زیر را در خط فرمان اجرا کنید:

npm i alpinejs

پس از اجرا دستور بالا در مسیر پروژه به راحتی این فریمورک نصب و قابل اجرا است.

 

استفاده از alpine.js

برای استفاده از alpine.js باید آن را در پروژه خود import کنیم.

import 'alpinejs'

همچنین جهت پشتیبانی از IE11 بیاد از دو اسکریپت زیر جای دستور بالا استفاده کنید.

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>

اگر تمام کارها را درست انجام دهید و خطایی وجو نداشته باشد می توانید شروع به کدنویسی کنید.

 

دستورات اصلی Alpine.js

ما در ادامه به بررسی عملکرد 10 دستور اصلی Alpine.js می پردازیم.

 

دستور x-data

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

برای تعریف یک Scope (حوزه) در alpine.js از دستور x-data استافده می شود و تمام المان های موجو در این حوزه به دیتاها این حوزه دسترسی خواهند داشت.

 

دستور x-init

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

برای تعریف یک expression در هنگام تعریف یک کامپوننت از این دستور استفاده می شود.

 

دستور x-show

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

 

x-show مانند یک شرط عمل می کند. اگر عبارت نسبت داده شده به آن true باشد. css آن المان تغییر و نمایش داده می شود و اگر false باشد خلاف آن رخ می دهد.

 

دستور x-bind

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

این دستور برای bind کردن یک مقدار با نوع های مختلف استفاده می شود.

 

دستور x-on

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

این دستور برای تعریف یک event listener بر روی المان استافده می شود و در صورت فراخوانی رویداد، مقدار آن به المان نسبت داده می شود.

 

دستور x-if

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

برای تعریف شرط از این دستور استفاده می شود و در صورت false بودن شرط آن المان از Dom حذف می شود.

 

دستور x-for

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

برای تعریف یک حلقه و ایجاد المان های جدید در DOM باید از این دستور استفاده کنید

 

دستور x-model

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

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

 

دستور x-text

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

برای نمایش متن های درونی باید از این دستور بجای x-bind استفاده کنید.

 

دستور x-html

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

مشاهبه دستور x-text است. اما برای نمایش عبارت html استفاده می شود.

 

بیا نتیجه بگیریم

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

امتیاز به این مقاله فراموش نشه
میانگین امتیاز 3 از 5 ، کل امتیازات: 4
امیر اشرفی
نویسنده: امیر اشرفی

امیر اشرفی هستم مدیر و بنیان گذار آکادمی هیرود، حدود 10 سالی میشه که در حوزه برنامه نویسی و توسعه وب و موبایل فعالیت میکنم و تونستم تجربه خوبی در این حوزه بدست بیارم. یکی از علاقه هام انتقال تجربه هایی که در اختیار دارم به دیگرانه و باعث میشه حالم خوب بشه و اشتیاق یادگیریم افزایش پیداکنه، در واقع هیرود نتیجه حال خوبیامه :)

دوره های قهرمانی پیشنهادی

اولین قدم برنامه نویسی

اولین قدم برنامه نویسی

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

سبد خرید

سبد خرید شما خالی است.

پیش به سوی قهرمانی