Laravel livewire چیست - آشنایی با کتابخانه فرانت‌اند لایو وایر

  • حسین کرمی
  • 18 فروردین 1401
Getting started with laravel livewire

Laravel Livewire چیست - همیشه در توسعه وب به دنبال ابزار‌ها، کتابخانه‌ها و فریمورک‌هایی برای توسعه سریع‌تر و راحت‌تر پروژه‌هایمان هستیم. همین مسئله برای توسعه‌دهندگان لاراول نیز صدق می‌کند. یکی از چالش‌های برنامه‌نویسی وب، نیاز به توسعه دو سمت Frontend و Backend به صورت همزمان است. همانطور که می‌دانید، توسعه همزمان توسط یک شخص نیاز به داشتن دانش زیاد در هر دو سمت توسعه UI و توسعه سمت سرور است.

Laravel برای توسعه سمت فرانت‌اند پیشنهاد می‌کند که از Vue.js استفاده کنید. همچنین کامپوننت‌ها و ابزار‌های زیادی را در اختیار شما قرار می‌دهد که توسعه همزمان پروژه Vue با لاراول راحت‌تر شود؛ اما مسئله از آنجایی شروع می‌شود که یادگیری Vue.js نیاز دانش زیادی است تا بتوان در آن حرفه‌ای شد. حجم مستندات Vue.js زیاد است و بنابراین برای یک برنامه‌نویس Backend احتمالا کار دشواری باشد تا بتواند به صورت عمیق و حرفه‌ای آن را یاد بگیرد.

در چنین شرایطی برای توسعه‌دهندگان لاراول یک ابزار ساده‌تر که بتواند پاسخ نیاز‌های ما را بدهد و با آن بتواند اپلیکیشن‌های واکنش‌گرایی را ساخت، ارائه شده است.

در این آموزش لایو وایر، به شما یاد خواهیم داد که این ابزار چطور می‌تواند به یک توسعه‌دهنده Laravel کمک کند تا بتواند به یک فول استک وب تبدیل شود و بتواند توسعه رابط کاربری (UI) را بدون نیاز به نوشتن کامل کد جاوا اسکریپت پیاده کند. همه چیز با همان ابزار‌هایی که از قبل با آن‌ها آشنایی دارید، انجام خواهد شد.

آشنایی با Laravel 9؛ تغییرات لاراول 9

لاراول لایو وایر Laravel livewire چیست؟

لایو وایر یک کتابخانه‌ای برای ساخت واکنش‌گرایی و رابط کاربری پویا به کمک Blade و کمی Javascript است.

به کمک Livewire می‌توانید کار‌های زیر را بدون اینکه صفحه را ریلود کنید، انجام دهید:

  • صفحه‌بندی (Pagination)
  • اعتبارسنجی فرم‌ها (Form Validation)
  • اعلانات
  • پیش‌نمایش آپلود فایل

البته قابلیت‌های لایو وایر فقط به موارد بالا ختم نمی‌شود. تنها چند مورد از کار‌هایی که می‌توان به کمک Livewire انجام داد را مثال زده‌ایم.

ری‌اکت بهتر است یا Vue.js? مقایسه دو ابزار


لاراول لایو وایر

 

مقایسه Livewire و Vue.js

باید این واقعیت را گفت که Vue.js قطعا ابزار بهتری برای توسعه Frontend است. اگر اکنون اپلیکیشن شما از Vue.js استفاده می‌کند، دیگر نیازی به Livewire ندارید و یادگیری Livewire اختیاری است؛ اما اگر در توسعه رابط کاربری وب تجربه کافی را ندارید و به دنبال یک جایگزین برای Vue هستید، احتمالا Livewire بهترین گزینه شما خواهد بود.

وقتی شما به عنوان یک توسعه‌دهنده Laravel از لایو وایر استفاده می‌کنید، مسیر آموزش Livewire ساده است. زیرا از همان موتور‌های Blade که برای ساخت ویو‌ها استفاده می‌کنید، در لایو وایر نیز استفاده خواهید کرد.

 

Livewire چگونه کار می‌کند؟

لایو وایر از یک تکنیک قدیمی به نام Long-polling استفاده می‌کند که در آن یک درخواست ایجکس به کمک متدPOST به سرور ارسال می‌شود و سپس داده‌های بازگردانده شده بر روی سرور نمایش داده می‌شود. البته در پشت صحنه اتفاقات بیشتری می‌افتد و این کلیت رخداد‌ها است.

Livewire از یک ویژگی debouncing هوشمند استفاده می کند که تعداد درخواست‌های ارسالی همزمان به سرور را محدود می‌کند. این به کارآمدتر شدن عملکرد بیدرنگ کمک می‌کند.

آشنایی با بهترین فریمورک‌های Javascript

 

یک مثال ساده از Livewire

در اینجا یک مثال از لایو وایر را قرار داده‌ایم که بتوانید نحوه کار و تعامل پروژه لاراولی را با ابزار Livewire ببینید. در این مثال یک فیلد برای جستجوی کاربران را ایجاد می‌کنیم و برای دیدن نتیجه واکنش‌گرا بدون نیاز به رفرش کردن صفحه، نتایج را ببینیم که به چه شکل می‌تواند از طریق یک درخواست Ajax اطلاعات به صفحه بازگردانده شده و نتایج صفحه به‌روز‌رسانی شود.

 

نصب وابستگی‌های بک‌اند

برای اینکه لایو وایر بر روی اپلیکیشن لاراولی شما نصب شود، کد زیر را در محیط Terminal اجرا کنید تا به کمک Composer به پروژه شما افزوده شود.

 

composer require livewire/livewire:2.3

 

ساخت Component لایو وایر

برای ساخت کامپوننت لایو وایر در لاراول کد زیر را در محیط ترمینال اجرا کنید:

php artisan make:livewire search-users

سپس، دو فایل در مسیر‌های و App/Http/Livewire/SearchUsers.php resources/views/livewire/search-users.blade.php ایجاد خواهد شد.

 

تنظیمات فایل‌های ایجاد شده

در قدم بعدی در فایل SearchUsers.php می‌توانیم کدی شبیه به زیر را در پروژه خود قرار دهیم:

use Livewire\Component; class SearchUsers extends Component { public $search = ''; public function render() { return view('livewire.search-users', [ 'users' => User::where('email', $this->search)->get(), ]); } }

 

اکنون در فایل search-users.blade.php می‌توانیم کد زیر را قرار دهیم:

<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>

 

Laravel Livewire کتابخانه‌ای است که ساخت رابط های مدرن، واکنش‌پذیر و پویا را با استفاده از Laravel Blade به عنوان زبان قالب ساده می‌کند. اگر می‌خواهید برنامه‌ای بسازید که پویا و واکنش‌گرا باشد، اما استفاده از یک چارچوب کامل جاوا اسکریپت مانند Vue.js نکنید، لایو وایر انتخابی مناسب است.

Laravel Livewire یک بسته فریمورک frontend برای فریمورک لاراول است.

Livewire خروجی کامپوننت اولیه را با صفحه نمایش می‌دهد (مانند Blade include). به این ترتیب، دوستدار سئو است.

لاراول لایو وایر سرعت بیشتری نسبت به Vue.js دارد.
1 نظر
در بحث پیرامون این مقاله شرکت کنید...
ارسال نظر :
پاسخ به