متى ولماذا أفضل استخدام Alpine.js

•
Javascript Alpine.js

تشتهر  حالياً أُطر العمل Javascript مثل Vue.js, React, Angular قاموا باحتلال مكان مكتبة JQuery وجاءوا بديلا عنها. بتعودنا على أُطر العمل هذه بدأنا باستخدامها في كافة المشاريع البسيطة منها أو الكبيرة، فمثلا قد نستخدم vuejs فقط لإضافة تفاعل على قوائم منسدلة أو إخفاء وإظهار بعض العناصر، ومقارنة بحجم والمزايا التي يقدمها Vue.js فهذا الإستخدام ليس الإستخدام الأمثل لها، فنحن نقوم بتحميل أحمال إضافية الخاصة Vue.js  مثلا على الصفحة دون استخدامها.

جاء إطار العمل Alpine.js لتوفير المزايا الأساسية متكررة الاستخدام لإضافة التفاعل للصفحات، وحسب التوثيق:

توفر لك Alpine.js بنية تفاعلية (تصريحية) مثل أُطر العمل الشهيرة كـ Vue و React بكُلفة وجهد أقل بكثير.

يمكنك الإحتفاظ بـ DOM والاستمرار في استخدامه، وإضافة الدّوال والوظائف له عند الحاجة.

يشبه إلى حد ما Tailwind ولكن في الجافاسكربت.

ملاحظة: نشير إلى أن بُنية Alpine.js شبية جداً إلى Vue (أو Angular). أنا ممتن لهذه الأُطر بما قدموه في تطوير الويب.

فبنية Alpine.js شبية جداً بأُطر العمل الشهيرة هذه، ولكنها فقط تقدم الوظائف البسيطة منها.

متى يستحسن استخدام Alpine.js:

يستحسن استخدامها عند يكون التطبيق يحتاج على تفاعلية بسيطة مثل:

  • إظهار وإخفاء عناصر DOM.
  • ربط قيم سمات العناصر binding، ومزامنة البيانات وإضافة اتصال ثنائي الاتجاه two ways binding.
  • الإنصات للأحداث وتعديل على العناصر تبعا لها.
  • التعديل على class attribute.

متى يفضل استخدام أحد أُطر العمل الأخرى؟

عندما تحتاج لجلب بيانات أو حفظها عن طريق APIs أو عند التحقق من البيانات validation ففي هذه الحالات سيزيد تعقيد اﻷكواد وتداخلها، ويفضل استخدام أطر العمل الشهيرة فهي توفر طرق تنظيمية ودوال أو إضافات جاهزة للتطبيق هذه المتطلبات.

الاستخدام:

للإطلاع على كيفية تركيب واستخدام alpine.js لنقوم بإنشاء قائمة منسدلة dropdown menu بسيطة.

التركيب:

باستعمال CDN نضيف سكربت التالي إلى نهاية <head>

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

قمت بتصميم قائمة بسيطة، وأضفت السكربت  مثل التالي:

<!DOCTYPE html>
<html lang\="en" dir\="rtl">
  <head>
     
    <meta charset\="UTF-8" />
     
    <meta name\="viewport" content\="width=device-width, initial-scale=1.0" />
     
    <title>Alpinejs Examples</title>

     
    <!-- Tailwind CSS CDN -->
     
    <link
      href\="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel\="stylesheet"
    />

     
    <!-- Alpinejs CDN -->
     
    <script
      src\="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
      defer
    ></script>
  </head>
  <body>
     
    <div class\="w-full flex justify-center mt-20">
         
      <div class\="relative inline-block">
             
        <div>
                 
          <button
            type\="button"
            class\="inline-flex justify-center w-full rounded border border-gray-300 shadow-sm px-4 py-2 bg-black text-white text-sm font-semibold"
          >
                      الخيارات          
            <svg
              class\="mr-2 h-5 w-5"
              xmlns\="http://www.w3.org/2000/svg"
              viewBox\="0 0 20 20"
              fill\="currentColor"
              aria-hidden\="true"
            >
                         
              <path
                fill-rule\="evenodd"
                d\="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule\="evenodd"
              />
                       
            </svg>
                   
          </button>
               
        </div>
             
        <div
          class\="origin-top-right absolute right-0 mt-2 w-56 rounded shadow-lg bg-white border border-gray-300"
        >
                 
          <div class\="py-1">
                     
            <a
              href\="#"
              class\="block px-4 py-2 text-sm text-gray-700 border-b border-gray-100"
              role\="menuitem"
              >Alpine.js</a
            >
                               
            <a
              href\="#"
              class\="block px-4 py-2 text-sm text-gray-700 border-b border-gray-100"
              role\="menuitem"
              >Vue.js</a
            >
                               
            <a
              href\="#"
              class\="block px-4 py-2 text-sm text-gray-700"
              role\="menuitem"
              >React</a
            >
                             
          </div>
               
        </div>
           
      </div>
       
    </div>
  </body>
</html>

ليكون شكلها:

التفاعل الذي نريده على هذه القائمة هو أن تكون القائمة المنسدلة السفلية مخفية، تظهر عند الضغط على زر الخيارات وتختفي عند الضغط عليه مرة أخرى أو تختفي عند الضغط على جزء آخر من الصفحة.

لإنشاء مكون component جديد باستخدام alpine.js نستخدم x-data ونحدد بها القيم المبدئية للمتغيرات المستخدمة داخل هذه القائمة.

  • متغير open لتحديد ما إذا كانت القائمة مفتوحة أو لا، وتكون قيمه من نوع boolean.

نضيف الحقل open بقيمة مبدئية false:

<div x-data="{ open: false }" class\="relative inline-block">

يجب إضافة x-data على العنصر الحاوي لكل القائمة، فهو بمثابة تعريف لهذا المكون ويمكننا استخدام المتغيرات المضافة بها داخل هذا العنصر فقط.

لإخفاء وإظهار القائمة المنسدلة تبعا لقيمة هذا المتغير نستخدم الموجه x-show:

<div
         x-show="open"
         class\="origin-top-right absolute right-0 mt-2 w-56 rounded shadow-lg bg-white border border-gray-300"
       >

ستختفي القائمة:



لتغيير القيمة المتغير في كل مرة يتم الضغط زر الخيارات نستخدم الحدث click كاﻵتي:

<button
          @click\="open = !open"
          type\="button"
          class\="inline-flex justify-center w-full rounded border border-gray-300 shadow-sm px-4 py-2 bg-black text-white text-sm font-semibold"
        >
          الخيارات
          <svg
            class\="mr-2 h-5 w-5"
            xmlns\="http://www.w3.org/2000/svg"
            viewBox\="0 0 20 20"
            fill\="currentColor"
            aria-hidden\="true"
          >
            <path
              fill-rule\="evenodd"
              d\="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule\="evenodd"
            />
          </svg>
        </button>

لإغلاق القائمة عند الضغط على جزء آخر بالصفحة نستخدم @click.away على القائمة المنسدلة ليتم إغلاقها.

<div
         x-show="open"
         @click.away="open = false"
         class\="origin-top-right absolute right-0 mt-2 w-56 rounded shadow-lg bg-white border border-gray-300"
       >

فقط بهذه الخطوات الأربع السريعة تمكنا من إنشاء قائمة منسدلة وإضافة التفاعل عليها.

لمعرفة المزيد عن  Alpine يمكنك قراءة التوثيق فهو سهل ومبسط ويحتوى على أمثلة مفيدة تساعدك على التطبيق.

التوثيق باللغة الانجليزية: https://github.com/alpinejs/alpine

باللغة العربية: https://alpinejs.abdelhadi.org/#/