Laravel Livewire چیست - همیشه در توسعه وب به دنبال ابزار‌ها، کتابخانه‌ها و فریمورک‌هایی برای توسعه سریعتر و راحت‌تر پروژه‌هایمان هستیم. همین مسئله برای توسعه‌دهندگان لاراول نیز صدق می‌کند. یکی از چالش‌های برنامه‌نویسی وب، نیاز به توسعه دو سمت Frontend و Backend به صورت همزمان است. همانطور که می‌دانید، توسعه همزمان توسط یک شخص نیاز به داشتن دانش زیاد در هر دو سمت توسعه UI و توسعه سمت سرور است.
Laravel برای توسعه سمت فرانت‌اند پیشنهاد می‌کند که از Vue.js استفاده کنید. همچنین کامپوننت‌ها و ابزار‌های زیادی را در اختیار شما قرار می‌دهد که توسعه همزمان پروژه Vue با لاراول راحت‌تر شود؛ اما مسئله از آنجایی شروع می‌شود که یادگیری Vue.js نیاز دانش زیادی است تا بتوان در آن حرفه‌ای شد. حجم مستندات Vue.js زیاد است و بنابراین برای یک برنامه‌نویس Backend احتمالا کار دشواری باشد تا بتواند به صورت عمیق و حرفه‌ای آن را یاد بگیرد.
در چنین شرایطی برای توسعه‌دهندگان لاراول یک ابزار ساده‌تر که بتواند پاسخ نیاز‌های ما را بدهد و با آن بتواند اپلیکیشن‌های واکنش‌گرایی را ساخت، ارائه شده است.
در این آموزش لایو وایر، به شما یاد خواهیم داد که این ابزار چطور می‌تواند به یک توسعه‌دهنده Laravel کمک کند تا بتواند به یک فول استک وب تبدیل شود و بتواند توسعه رابط کاربری (UI) را بدون نیاز به نوشتن کامل کد جاوا اسکریپت پیاده کند. همه چیز با همان ابزار‌هایی که از قبل با آن‌ها آشنایی دارید، انجام خواهد شد.
فهرست مطالب
لاراول لایو وایر Laravel livewire چیست؟
لایو وایر یک کتابخانه‌ای برای ساخت واکنش‌گرایی و رابط کاربری پویا به کمک Blade و کمی Javascript است.
به کمک Livewire می‌توانید کار‌های زیر را بدون اینکه صفحه را ریلود کنید، انجام دهید:
- صفحه‌بندی (Pagination)
- اعتبارسنجی فرم‌ها (Form Validation)
- اعلانات
- پیش‌نمایش آپلود فایل
البته قابلیت‌های لایو وایر فقط به موارد بالا ختم نمی‌شود. تنها چند مورد از کار‌هایی که می‌توان به کمک Livewire انجام داد را مثال زده‌ایم.
مقایسه Livewire و Vue.js
باید این واقعیت را گفت که Vue.js قطعا ابزار بهتری برای توسعه Frontend است. اگر اکنون اپلیکیشن شما از Vue.js استفاده می‌کند، دیگر نیازی به Livewire ندارید و یادگیری Livewire اختیاری است؛ اما اگر در توسعه رابط کاربری وب تجربه کافی را ندارید و به دنبال یک جایگزین برای Vue هستید، احتمالا Livewire بهترین گزینه شما خواهد بود.
وقتی شما به عنوان یک توسعه‌دهنده Laravel از لایو وایر استفاده می‌کنید، مسیر آموزش Livewire ساده است. زیرا از همان موتور‌های Blade که برای ساخت ویو‌ها استفاده می‌کنید، در لایو وایر نیز استفاده خواهید کرد.
Livewire چگونه کار می‌کند؟
لایو وایر از یک تکنیک قدیمی به نام Long-polling استفاده می‌کند که در آن یک درخواست ایجکس به کمک متدPOST به سرور ارسال می‌شود و سپس داده‌های بازگردانده شده بر روی سرور نمایش داده می‌شود. البته در پشت صحنه اتفاقات بیشتری می‌افتد و این کلیت رخداد‌ها است.
Livewire از یک ویژگی debouncing هوشمند استفاده می کند که تعداد درخواست‌های ارسالی همزمان به سرور را محدود می‌کند. این به کارآمدتر شدن عملکرد بیدرنگ کمک می‌کند.
یک مثال ساده از Livewire
در اینجا یک مثال از لایو وایر را قرار داده‌ایم که بتوانید نحوه کار و تعامل پروژه لاراولی را با ابزار Livewire ببینید. در این مثال یک فیلد برای جستجوی کاربران را ایجاد می‌کنیم و برای دیدن نتیجه واکنش‌گرا بدون نیاز به رفرش کردن صفحه، نتایج را ببینیم که به چه شکل می‌تواند از طریق یک درخواست Ajax اطلاعات به صفحه بازگردانده شده و نتایج صفحه به‌روز‌رسانی شود.
نصب وابستگی‌های بک‌اند
برای اینکه لایو وایر بر روی اپلیکیشن لاراولی شما نصب شود، کد زیر را در محیط Terminal اجرا کنید تا به کمک Composer به پروژه شما افزوده شود.
ساخت Component لایو وایر
برای ساخت کامپوننت لایو وایر در لاراول کد زیر را در محیط ترمینال اجرا کنید:
سپس، دو فایل در مسیر‌های و
تنظیمات فایل‌های ایجاد شده
در قدم بعدی در فایل
اکنون در فایل
<div>
<input wire:model="search" type="text" placeholder="Search users..."/>
<ul>
@foreach($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>
حال اگر این کامپوننت ایجاد شده را در هر جایی از ویو‌های پروژه خود قرار دهیم، ما یک نتیجه زنده و واکنش‌گرا خواهیم داشت. همچنین می‌توانید اسکریپت‌ها و استایل‌های CSS را نیز به صورت جداگانه برای کامپوننت به شکل زیر تعریف کنیم.
<head>
...
@livewireStyles
</head>
<body>
@livewire('search-users')
...
@livewireScripts
</body>
</html>
