معرفی
لاراول انتخابی عالی برای ساخت برنامه‌های وب مدرن است. با این حال، ساخت رابط‌های کاربری پویا در سمت کاربر، مانند آنچه با فریم‌ورک‌های فرانت‌اند مانند React یا Vue ایجاد می‌شود، ممکن است در لاراول چالش‌برانگیز باشد. این به این دلیل است که لاراول یک فریم‌ورک سمت سرور نوشته شده با PHP است که به‌طور طبیعی باعث بارگذاری مجدد صفحات می‌شود و تجربه کاربری را بهینه نمی‌کند.
برای ارائه تجربه‌ای برتر به کاربران و جلوگیری از بارگذاری مجدد صفحات، توسعه‌دهندگان می‌توانند از فریم‌ورک‌های جاوااسکریپت در سمت کاربر استفاده کنند. اما این کار می‌تواند پیچیدگی سیستم را به‌طور قابل‌توجهی افزایش دهد. درک کامل جاوااسکریپت و فریم‌ورک انتخابی (React، Vue، Svelte و غیره) ضروری است.
خوشبختانه، پاسخ به این سوال که آیا می‌توانیم رابط‌های کاربری پویا را در همان زبان و فریم‌ورک بدون مدیریت دو مورد جداگانه ایجاد کنیم، بله است، و این امر با استفاده از Livewire ممکن می‌شود.
مقدمه‌ای کوتاه از Livewire
Livewire یک فریم‌ورک کامل در لاراول است که توسط Caleb Porzio ساخته شده و ایجاد رابط‌های واکنش‌گرا را بدون نیاز به نوشتن کد جاوااسکریپت آسان میکند. بله درست شنیدید، بدون جاوااسکریپت، همه چیز در PHP. این به این معناست که توسعه‌دهندگان می‌توانند از قدرت لاراول و قالب‌های Blade برای ساخت رابط‌های کاربری پویا استفاده کنند. با استفاده از Livewire، می‌توان به اقدامات کاربر مانند ارسال فرم، پیمایش، حرکات ماوس یا کلیک بر روی دکمه‌ها پاسخ داد، بدون اینکه صفحه مجدداً بارگذاری شود. این بدین معناست که کاربران می‌توانند از تجربه‌ای روان‌تر و سیال‌تر در تعامل با برنامه‌های وب ساخته شده با Livewire لذت ببرند، همانند دیگر فریم‌ورک‌های فرانت‌اند.
نمونه‌هایی از کد Livewire
در ادامه چند نمونه از کدهای Livewire را مشاهده می‌کنید که نشان‌دهنده قابلیت‌های این فریم‌ورک در ایجاد رابط‌های کاربری واکنش‌گرا هستند.
// The Implementation logic
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class CountButton extends Component
{
public $count = 0;
public function increment() {
$this->count++;
}
public function render()
{
return view('livewire.count-button');
}
}
----- Templates ----
<div>
You've clicked me {{$count}} times
<button wire:click="increment" class="p-4 bg-green">
Click Me!
</button>
</div>
-- Page ---
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@livewireStyles
</head>
<body class="antialiased">
<livewire:count-button />
@livewireScripts
</body>
</html>
بیایید نگاهی سریع به بخش‌های کد بالا بیندازیم. بلوک کد اول مربوط به پیاده‌سازی یک کامپوننت Livewire به نام CountButton است. این کد یک ویژگی عمومی به نام $count تعریف میکند که به طور اولیه روی 0 تنظیم شده است و دو متد دارد: increment() و render(). متد increment() ویژگی $count را به میزان 1 افزایش می‌دهد و متد render() نمای مرتبط با کامپوننت را که livewire.count-button است، بازمی‌گرداند.
بلوک کد دوم قالب Blade مرتبط با کامپوننت CountButton Livewire است. این قالب تعداد دفعات کلیک روی دکمه ($count) و یک دکمه با متن “Click Me!” را نمایش می‌دهد. وقتی روی دکمه کلیک می‌شود، متد increment() که در بلوک کد قبلی تعریف شده است، فراخوانی می‌شود.
بلوک کد سوم یک صفحه HTML نمونه است که کامپوننت CountButton Livewire را شامل می‌شود. ابتدا استایل‌های Livewire را شامل میکند، سپس کامپوننت را با استفاده از تگ livewire:count-button اضافه میکند. در نهایت، اسکریپت‌های Livewire را شامل می‌شود. وقتی تگ livewire:count-button رندر می‌شود، Livewire آن را شناسایی کرده و به صورت دینامیک با خروجی متد render() که در بلوک کد اول تعریف شده است، جایگزین میکند.
وقتی روی دکمه کلیک می‌کنید، متد increment() فراخوانی می‌شود. این باعث افزایش مقدار count می‌شود و شما می‌توانید تغییرات را در رابط کاربری بدون نیاز به بارگذاری مجدد صفحه ببینید. همه این‌ها در لاراول نوشته شده‌اند، بدون نیاز به نوشتن جاوااسکریپت. هدف این مقاله ارائه یک دید کلی از نحوه کارکرد Livewire در پشت صحنه است.
برای توضیح این فرآیند، بیایید یک مثال مرحله به مرحله با یک مؤلفه شمارنده (Counter) را بررسی کنیم:
class Counter extends Component
{
public $count = 1;
public function increment() {
$this->count++;
}
public function decrement() {
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}
- در فرم بالا 2 دکمه برای افزایش و کاهش مقدار یک شمارنده وجود دارد.
- قطعه کد بالا شامل وضعیت و منطق پیاده‌سازی برای زمانی است که هر دکمه‌ای کلیک می‌شود. با این حال، همانطور که می‌بینید، هر دو تابع increment() و decrement() و وضعیت $count به زبان PHP نوشته شده‌اند، در حالی که رابط کاربری (UI) به وضوح با استفاده از HTML و JavaScript نوشته شده است. علاوه بر این، توجه داشته باشید که سرور و مشتری باید همیشه همگام باشند. در منطق سروری، متغیر $count برابر با 1 است، همانطور که توسط مشاهده‌گر نمایش داده شده است.
- حالا بیایید برخی اقدامات انجام دهیم.
- وقتی کاربر بر روی دکمه افزایش کلیک میکند، تعداد به طور خودکار افزایش نمی‌یابد. این به دلیل نداشتن یک تابع جاوااسکریپت برای افزایش تعداد و همچنین عدم وجود یک وضعیت یا متغیر شمارش است. برای حل این مسئله، Livewire یک درخواست شبکه به سرور ارسال میکند. این درخواست شامل یک بارگیری داده‌ها یا اسنپ‌شات است که جزئیات مکان کامپوننت را در سرور و چه اتفاقی باید در سرور رخ دهد، شامل می‌شود. در مثال ما، درخواست شامل یک بارگیری داده است که می‌گوید: “سرور عزیز، من کامپوننت شمارنده هستم و در این بخش از کد شما قرار دارم و می‌خواهم شما تابع افزایش را فراخوانی کنید.”
- سرور از اطلاعات این بارگیری برای پیدا کردن مکان کامپوننت Livewire استفاده میکند و سپس متد increment() را اجرا میکند. این متد مقدار $count را به 2 تغییر می‌دهد. سپس سرور یک صفحه HTML جدید ایجاد میکند که تعداد جدید $count را نمایش می‌دهد. اما هیچ چیزی به کاربر نمایش داده نمی‌شود؛ این کار توسط مرورگر انجام می‌شود. بنابراین، سرور با این HTML تازه تولید شده و وضعیت کنونی کامپوننت به پاسخ درخواست برمی‌گردد.
هنگامی که سرور پاسخی ارسال میکند، کلاینت آن را دریافت کرده و HTML فعلی در DOM (صفحه مرورگر) را با HTML سرور مقایسه میکند. اگر تفاوتی وجود داشته باشد، Livewire با استفاده از Alpine.js به‌طور هوشمند تداخل را ادغام میکند.
کاربر با کلیک بر روی دکمه کاهش همان فرآیند راه‌اندازی میکند. هر عملی به یک چرخه درخواست و پاسخ بین کلاینت و سرور متناظر است.
نتیجه
این موضوع این است: Livewire نسبت به این دید کلی که ارائه شد، پیچیده‌تر است. هنگامی که یک درخواست وارد می‌شود، در واقع زیادی از پشت صحنه اتفاق می‌افتد. از بررسی‌های امنیتی گرفته تا هیدراسیون، دی‌هیدراسیون، تولید رابط کاربری و حتی تغییر شکل صحبت می‌کنیم. اما نگران نباشید، این دید کلی یک نقطه شروع قوی برای درک فرآیند است. از خواندن شما متشکریم!
