Alpine.js یک فریم ورک جاوا اسکریپتی سبک و کوچک است که به تازگی در دنیای توسعه وب به شهرت رسیده است. این فریم ورک اختصاصی برای کار با اچ تی ام ال (HTML)، جی کوئری (jQuery) (البته جایگزین آن می باشد)و وانیلا جاوا اسکریپت (Vanilla JavaScript) ساخته شده است. در این مقاله، ما به بررسی عمیق Alpine.js می پردازیم و مزایا و معایب آن را بررسی می کنیم.

Alpine.js چیست؟

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

هیچ مرحله ساختی وجود ندارد و اندازه فایل کتابخانه حدود 4 کیلوبایت گیگزیپ شده است. Alpine برای جایگزینی چارچوب هایی مانند Vue و React نیست. اگر یک برنامه تک صفحه ای بسیار تعاملی دارید، بهتر است از ابزارهای قدرتمندتر استفاده کنید. هنگامی که پروژه شما فقط به حداقل جاوا اسکریپت نیاز دارد، بهتر است از آن استفاده کنید، مانند زمانی که شما فقط به یک یا دو کامپوننت مانند dropdowns, sidebars, tabs, و image نیاز دارید.

Alpine مجموعه ای از 15 تا attributes و 6 properties و 2 متد است.

Alpine همچنین برای برنامه های رندر شده در سمت سرور، مانند Laravel، Rails و AdonisJS، که شما را ملزم به تغییر برخی از اجزای جاوا اسکریپت می کند، عالی است. و از آنجایی که DOM مجازی ندارد، راه اندازی آن آسان تر است.

اساسا، Alpine مانند Tailwind برای جاوا اسکریپت است. DOM و رفتار از هم جدا نیستند. شما می توانید DOM خود را حفظ کنید و رفتار خود را همانطور که می خواهید بپاشید. شما به راحتی می توانید کد اعلامی را برخلاف کد رویه ای بنویسید. در نهایت، Alpine ردپای بسیار کمی در برنامه شما دارد.

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

حالا بیایید به مراحل نصب برویم و دستمان را با Alpine عادت بدهیم.

نصب و استفاده اولیه

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

استفاده از تگ اسکریپت ساده ترین راه برای اضافه کردن Alpine به پروژه شما است. شما فقط باید قطعه زیر را در انتهای بخش <head> فایل HTML خود اضافه کنید:

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

به عنوان یک ماژول
با این روش ابتدا باید Alpine را از طریق npm نصب کنید:

npm install alpinejs

سپس، Alpine را به باندل خود وارد کرده و مقداردهی اولیه کنید:

import Alpine from 'alpinejs'

// optional
window.Alpine = Alpine

// initialize Alpine
Alpine.start()

یک کامپوننت ساده در آلپاین:

<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
    <div x-data="{ isOpen: true }">
      <button x-on:click=" isOpen = !isOpen">Toggle</button>
      <h1 x-show="isOpen">Alpinjs</h1>
    </div>
  </body>
</html>

اولین قدم برای استفاده از Alpine تعریف یک state است. state هر جا که لازم باشد می رود و همان محدوده اسکوب HTML را دارد که در آن قرار داده اید.

در کد بالا، ما یک محدوده را با استفاده از دستور x-data با ارسال یک شی به عنوان مقدار state تعریف کردیم. دستور x-on به رویدادها گوش می دهد. برای المان دکمه، ما به رویداد کلیک گوش می دهیم که مقدار isOpen را به true یا false تغییر می دهد. دستور x-show بسته به مقدار ویژگی isOpen شیء state ، یک عنصر را از DOM نشان می دهد یا پنهان می کند.

ساخت counter

بیایید با یک کامپوننت counter ساده شروع کنیم تا اصول اولیه گوش دادن به حالت و رویداد را در Alpine نشان دهیم با دو ویژگی اصلی.

موارد زیر را در تگ <body> وارد کنید:

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

اکنون، می توانید ببینید با 3 بیت آلپاین که در این HTML وجود دارد، ما یک کامپوننت تعاملی "counter" ایجاد کرده ایم.

دستورات کدنویسی Alpine.js

در هسته چارچوب Alpine دستوراتی وجود دارد که با افزودن و حذف عناصر DOM، طرح DOM را تغییر می‌دهد و رفتار و ظاهر عناصر را در DOM تغییر می‌دهد. دستورالعمل های آلپاین با علامت x و به دنبال آن نام دستورالعمل شروع می شود.

بیایید به سرعت برخی از دستورالعمل ها را مرور کنیم و ببینیم چگونه می توان از آنها استفاده کرد.

x-data

x-data یک محدوده کامپوننت جدید را با یک شی در یک عنصر HTML مقداردهی اولیه می کند. همه عناصر HTML فرزند به شی داده ای که در عنصر والد آن وجود دارد دسترسی دارند:

<div x-data="{ isOpen: false }">...</div>

x-init

x-init برای اجرای یک عبارت در هنگام مقداردهی اولیه کامپوننت استفاده می شود و می توان از آن برای تنظیم مقدار اولیه state کامپوننت استفاده کرد:

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

همچنین، x-init را می توان برای اجرای کد پس از مقداردهی اولیه کامپوننت با ارسال تابع callback استفاده کرد:

<div x-data="{ images: [] }"
  x-init="$nextTick(() => {
    fetch('https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=yellow+flowers&image_type=photo')
      .then(response => answer.json())
      .then(response => { images = answer.hits })
  })"
</div>

x-bind

آلپاین x-bind را به عنوان مکانیزمی برای اتصال value ، بولی و ویژگی های کلاس ارائه می کند.

اتصال مقدار attribute :

<img x-bind:src="imgSrc">

این مقدار یک attribute را به نتیجه عبارت تنظیم می کند.

اتصال attribute کلاس:

<div x-bind:class="{ 'hidden': isClosed }"></div>

برای اتصال کلاس، یک عبارت شی ارسال می شود. کلیدهای شیء نام کلاس ها هستند و مقادیر عبارت های بولی هستند. اگر عبارت بولی به true ارزیابی شود، نام کلاس برای آن عنصر اعمال می شود.

اتصال attribute بولی:

<input type="text" x-bind:hidden="true">

اتصال بولی مانند اتصال ویژگی عمل می کند، اما عبارت ارسال شده باید به true یا false ارزیابی شود.

x-on

x-on شنونده رویداد را به عنصری که در آن اعلام شده است اضافه می کند. هنگامی که عنصر آن رویداد را منتشر می کند (به عنوان مثال، یک کلیک یا رویداد ورودی)، یک عبارت (یا تابع) اجرا می شود:

<button x-on:click="foo = 'bar'">روی من کلیک کنید</button>

x-show

x-show ویژگی نمایش CSS عنصر را بسته به اینکه عبارت به true یا false ارزیابی شود تغییر می دهد. اگر عبارت به false ارزیابی شود، ویژگی display عنصر روی none تنظیم می شود. اگر به true برسد، ویژگی display روی بلوک تنظیم می‌شود:

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

x-if

در حالی که x-show می تواند برای تغییر ویژگی نمایش یک عنصر استفاده شود، عنصر در واقع از DOM حذف نمی شود. دستور x-if عناصر را با CSS پنهان نمی کند. آنها را به طور کامل از DOM اضافه و حذف می کند.

مقدار x-if یک عبارت بولی است که می تواند true یا false ارزیابی شود. اگر عبارت false ارزیابی شود، x-if عنصر خود را از DOM حذف می کند. x-if فقط در عنصر template کار می کند و باید یک ریشه عنصر در داخل تگ template داشته باشد:

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

x-for

x-for زمانی کمک می کند که می خواهید گره های DOM جدید برای هر مورد در یک مجموعه ایجاد کنید. درست مانند دستور x-if، دستور x-for باید روی یک تگ template وجود داشته باشد، نه یک عنصر DOM معمولی:

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

x-model

x-model یک قابلیت اتصال داده دو طرفه را به یک عنصر اضافه می کند و مقدار یک عنصر ورودی و داده های کامپوننت را همگام می کند. به اندازه کافی هوشمند است که تغییرات را در ورودی‌های متن، چک باکس‌ها، radios ،textarea و multi selecting تشخیص دهد و مقدار آنها را به داده‌های کامپوننت متصل کند:

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

x-text

در حالی که x-bind برای اتصال ویژگی است، x-text برای تنظیم مقدار innerText یک عنصر استفاده می شود:

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

x-html

x-html مشابه x-text کار می کند، اما به جای تنظیم innerText، مقدار innerHTML یک عنصر را تعیین می کند:

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

برای کسب اطلاعات بیشتر در مورد دستورالعمل های آلپاین، حتماً اسناد را بررسی کنید.

ساخت گالری تصاویر با Alpine

برای نشان دادن اینکه چگونه می توان از این دستورالعمل ها با هم استفاده کرد، اجازه دهید یک گالری تصویر ساده بسازیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css" />
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lora:400,700|Nunito:400,700"
      rel="stylesheet"
    />
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
    ></script>
    <link
      href="images/favicon_32.ico"
      rel="shortcut icon"
      type="image/x-icon"
    />
    <link href="images/favicon_256.ico" rel="apple-touch-icon" />
  </head>
  <body
    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 })"
  >
    <!-- Header section -->
    <header class="navigation">
      <div class="container navigation-content">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="index.html"
            ><img
              src="https://godwinekuma.github.io/we-connect/images/logo-white.svg"
              alt="weconnect logo"
              height="50"
              class="navbar-brand-image"
            />
            PictureGram</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
        </nav>
      </div>
    </header>
    <!-- Header section /-->
    <!-- Hero Section -->
    <div>
      <section class="hero">
        <div class="container">
          <div class="d-flex flex-column align-items-center">
            <h1 class="display-4" style="text-align:center">
              Search for images.
            </h1>
            <h2 class="" style="text-align:center">
              Pixel perfect images can be found here.
            </h2>
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="search images"
                x-model="q"
                aria-label="Text input with segmented dropdown button"
              />
              <select class="custom-select" x-model="image_type">
                <option selected>choose image type</option>
                <option value="all">All</option>
                <option value="photo">Photo</option>
                <option value="illustration">Illustration</option>
                <option value="vector">Vector</option>
              </select>
              <div class="input-group-append">
                <button
                  class="btn btn-primary"
                  type="button"
                  x-on:click="getImages()"
                >
                  Search
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section id="photos" class="my-5">
        <template x-for="image in images" :key="image.id">
          <img x-bind:src="image.webformatURL" alt="image.tags[0]" />
        </template>
      </section>
    </div>
    <script>
      function images() {
        return {
          images: [],
          q: "",
          image_type: "",
          getImages: async function() {
            console.log("params", this.q, this.image_type);
            const response = await fetch(
              `https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=${
                this.q
              }&image_type=${this.image_type}`
            );
            const data = await response.json();
            this.images = data.hits;
          }
        };
      }
    </script>
  </body>
</html>

برنامه گالری ما لیستی از تصاویر را از Pixabay دریافت می کند و آنها را نمایش می دهد. حالت برنامه بر روی تگ body توسط دستور x-data با استفاده از تابعی به نام images تنظیم می شود. تابع یک شی را برمی گرداند که حاوی image، q، image-type و getImages است.

مقدار اولیه یک تصویر با استفاده از دستور x-init تنظیم می شود. x-init لیستی از تصاویر را از Pixabay دریافت می کند و آن را به عنوان فیلد مقدار تصاویر تنظیم می کند. q مقدار <input> را می گیرد و با استفاده از دستور x-model تنظیم می شود. از سوی دیگر، image_type مقدار <select></select> را می گیرد و همچنین با استفاده از دستور x-model تنظیم می شود.

ما یک شنونده رویداد کلیکی را به <button> دادیم. هنگامی که دکمه کلیک می شود، متد ()getImages در state فراخوانی می شود. متد ()getImages تصاویر جدید را بر اساس مقدار q و image_type واکشی می کند.

مزایا و معایب Alpine.js

مزایا:

سبک و سریع
یکی از مزایای بزرگ Alpine.js سبک و سرعت آن است. این فریم ورک بسیار کم حجم است و به سرعت بارگذاری می شود.

اجزای تعاملی
Alpine.js به شما امکان می دهد اجزا ویژه ای را ایجاد کنید که به وب سایت شما تعاملی تر کنند و تجربه کاربری را بهبود ببخشند.

سادگی و آموزش آسان
یکی دیگر از مزایای Alpine.js، سادگی و آموزش آسان آن است. حتی توسعه دهندگان مبتدی نیز می توانند به راحتی از این فریم ورک استفاده کنند.

معایب:

کمبود اکوسیستم گسترده
یکی از معایب Alpine.js این است که اکوسیستم آن نسبت به فریم ورک های دیگر کمتر گسترده است. این ممکن است در پروژه های بزرگ تر مشکلاتی ایجاد کند.

تطابق نه چندان بالا با پروژه های بزرگ
Alpine.js بهترین عملکرد خود را در پروژه های کوچک تر نشان می دهد و تطابق آن با پروژه های بزرگ تر ممکن است دشواری داشته باشد.

نتیجه

در این آموزش نحوه استفاده از Alpine را توضیح دادیم و یک نمونه گالری تصویر با این فریم ورک را ساختیم. اگرچه ممکن است به طور کامل جایگزین فریمورک های دیگر نشود، اما می توان آن را در ترکیب با React یا Vue برای نمونه سازی سریع کامپوننت ها بدون نوشتن جاوا اسکریپت زیاد استفاده کرد. برای کسب اطلاعات بیشتر در مورد Alpine، حتماً به وب سایت آن مراجعه کنید.

دوره های آموزشی

مسیر یادگیری

شروع با Alpine.js | مزایا و معایب فریمورک Alpine.js

Mohammad Abdorrahmani

Mohammad Abdorrahmani

Alpine.js چیست؟

نصب و استفاده اولیه

ساخت counter

دستورات کدنویسی Alpine.js

x-data

x-init

x-bind

x-on

x-show

x-if

x-for

x-model

x-text

x-html

ساخت گالری تصاویر با Alpine

مزایا و معایب Alpine.js

نتیجه

مقاله های مشابه

تفاوت بین SSR, CSR, SSG و ISR : بررسی کلی و عمیق

Mohammad Abdorrahmani

Prisma ORM چیست : بررسی، مثال‌ها و جایگزین‌ها

Mohammad Abdorrahmani

Redux Toolkit چیست: بررسی کلی، مثال‌ها و جایگزین‌ها

Mohammad Abdorrahmani