شروع کار با لاراول – توسعه سمت کاربر

این مقاله درباره رابط کاربری (Frontend) در فریم‌ورک Laravel می‌باشد و در آن، نحوه استفاده از ابزارها و قابلیت‌های مربوط به Frontend در Laravel توضیح داده شده است. به عبارت دیگر، این صفحه به توسعه‌دهندگان وب‌سایت کمک می‌کند تا رابط کاربری قدرتمند و حرفه‌ای برای وب‌سایت‌های خود با استفاده از Laravel طراحی کنند.

Frontend چیست؟
Frontend (توسعه رابط کاربری وب در بخش مشترک کاربر-سمت کاربر) به معنی بخشی از یک سیستم وب است که با آن کاربران می‌توانند با وب سایت یا برنامه‌ای که در مرورگر خود اجرا می‌شود، تعامل کنند. به عبارت دیگر، Frontend شامل تمامی عناصری است که کاربران با آنها در ارتباط هستند، به عنوان مثال: منوها، دکمه‌ها، فرم‌ها، جداول، گرافیک، تصاویر و محتوا. برای طراحی قابلیت‌های Frontend، ابزارهایی مانند HTML، CSS و JavaScript استفاده می‌شود. در Laravel نیز می‌توانید با استفاده از این ابزارها و کتابخانه‌های Frontend موجود در آن، رابط کاربری قدرتمند و حرفه‌ای برای وب‌سایت خود ایجاد کنید.

با ادامه ترجمه مستندات فارسی Laravel 10  بخش (شروع کار با لاراول -توسعه سمت کاربر)، در خدمت شما کاربران گرامی وب‌سایت آموزشی لاراول کارا هستیم. امیدواریم که این مطلب برای شما مفید واقع شده باشد. در صورت داشتن هرگونه سوال یا ابهام، لطفاً در قسمت نظرات با ما در ارتباط باشید.

# معرفی (Introduction)

Laravel یک چارچوب کاری (Framework) برای سمت سرور (Backend) است که تمامی امکانات لازم برای ساخت برنامه‌های وب مدرن را ارائه می‌دهد، از قبیل مسیریابی، اعتبارسنجی، کش، صف، ذخیره فایل و موارد دیگر. با این حال، ما فکر می‌کنیم که ارائه یک تجربه کامل و زیبا برای توسعه دهندگان، از جمله رویکردهای قدرتمند برای ساخت رابط کاربری برنامه شما، بسیار مهم است.

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

# استفاده از PHP توسعه سمت کاربر (Using PHP)

# PHP و Blade در لاراول (PHP & Blade)

در گذشته، بیشتر برنامه‌های PHP از طریق قالب‌های HTML ساده و دستورات echo PHP برای ارائه HTML به مرورگر استفاده می‌کردند که داده‌های بازیابی شده از پایگاه داده را نمایش می‌دادند.

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

در Laravel، همچنان می‌توان از روش قبلی برای رندر کردن HTML با استفاده از نمایش‌ها (views) و Blade استفاده کرد. Blade یک زبان قالب‌بندی بسیار سبک است که دارای نحوه نمایش داده‌ها، تکرار روی داده‌ها و امکانات مفیدی مانند این موارد است که به شکل ساده، مختصر و خوانا داده‌ها را نمایش می‌دهد.

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

در حین ساخت برنامه‌ها به این روش، هر بار که فرم‌ها ارسال می‌شوند یا عملیات دیگری انجام می‌شود، سمت سرور یک سند HTML جدید به مرورگر ارسال می‌شود و کل صفحه توسط مرورگر دوباره رندر می‌شود. با این حال، حتی امروزه برخی از برنامه‌ها ممکن است به صورت کامل با استفاده از قالب‌های Blade ساده، برای ساخت رابط کاربری مناسب باشند.

با افزایش سطح انتظارات

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

بعضی از توسعه‌دهندگان که تمایل دارند با زبان سمت سرور خود که با آن آشنایی دارند ادامه دهند، راه‌حل‌هایی را توسعه داده‌اند که به ساخت رابط کاربری برنامه‌های وب مدرن کمک می‌کنند و همچنان از زبان سمت سرور برای این کار اصلی استفاده می‌کنند. به عنوان مثال، در اکوسیستم Rails، این موضوع باعث ایجاد کتابخانه‌هایی مانند Turbo Hotwire و Stimulus شده است.

در اکوسیستم Laravel، نیاز به ایجاد رابط کاربری مدرن و دینامیک با استفاده اصلی از زبان PHP، منجر به ایجاد Laravel Livewire و Alpine.js شده است.

# Livewire

لاراولLaravel Livewire یک فریم‌ورک برای ساخت رابط کاربری بر پایه Laravel است که در آن رابط کاربری به نحوی دینامیک، مدرن و زنده شبیه رابط کاربری‌های ساخته شده با چارچوب‌های جاوا‌اسکریپتی مانند Vue و React است.

در استفاده از Livewire، شما اجزای “Livewire” را ایجاد خواهید کرد که یک بخش مجزای رابط کاربری شما را رندر می‌کند و متدها و داده‌هایی را ارائه می‌دهد که می‌توان در رابط کاربری برنامه شما از آن‌ها استفاده کرد و با آن‌ها تعامل داشت. به عنوان مثال، یک اجزای ساده “شمارنده” ممکن است به صورت زیر باشد:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

همچنین، قالب متناظر با شمارنده به صورت زیر نوشته می‌شود:

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

همانطور که مشاهده می‌کنید، Livewire به شما این امکان را می‌دهد که ویژگی‌های HTML جدیدی مانند wire:click را بنویسید که ارتباط بین رابط کاربری و کد سمت سرور برنامه‌ی Laravel شما را برقرار می‌کنند. به علاوه، شما می‌توانید با استفاده از عبارات ساده Blade، وضعیت فعلی اجزای خود را رندر کنید.

برای بسیاری از توسعه‌دهندگان، Livewire باعث انقلاب در توسعه رابط کاربری برای Laravel شده است و به آن‌ها این امکان را می‌دهد که در آسایش Laravel بمانند در حالی که برنامه‌های وب مدرن و دینامیکی را ایجاد می‌کنند. به طور معمول، توسعه‌دهندگانی که از Livewire استفاده می‌کنند، همچنین از Alpine.js برای “پاشاندن” جاوا‌اسکریپت فقط در جایی که لازم است، مانند رندر کردن یک پنجره دیالوگ، استفاده می‌کنند.

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

# کیت‌های شروع (Starter Kits)

اگر می‌خواهید رابط کاربری برنامه‌ی خود را با استفاده از PHP و Livewire بسازید، می‌توانید از ستارتر کیت‌های Breeze یا Jetstream بهره ببرید تا توسعه‌ی برنامه‌ی خود را شروع کنید. هر دوی این ستارتر کیت‌ها، جریان احراز هویت سمت سرور و رابط کاربری برنامه‌ی شما با استفاده از Blade و Tailwind را راه‌اندازی می‌کنند تا شما بتوانید به راحتی ایده‌ی بزرگ بعدی خود را پیاده کنید.

# Using Vue / React

اگر چه امکان ساخت رابط کاربری مدرن با استفاده از Laravel و Livewire وجود دارد، اما بسیاری از توسعه‌دهندگان هنوز ترجیح می‌دهند از قدرت چارچوب جاوااسکریپتی مانند Vue یا React بهره بگیرند. این به توسعه‌دهندگان این امکان را می‌دهد که از اکوسیستم غنی بسته‌ها و ابزارهای جاوا‌اسکریپتی موجود در NPM بهره ببرند.

بدون ابزارهای اضافی، ترکیب Laravel با Vue یا React نیازمند حل چندین مشکل پیچیده مانند مسیریابی سمت کلاینت، نمایش داده‌ها و احراز هویت است. مسیریابی سمت کلاینت با استفاده از چارچوب‌های opinionated Vue / React مانند Nuxt و Next ساده شده است؛ اما نمایش داده‌ها و احراز هویت هنوز مشکلات پیچیده و سنگینی را در هنگام ترکیب چارچوب سمت سرور مانند Laravel با این چارچوب‌های رابط کاربری ایجاد می‌کند.

علاوه بر این، توسعه‌دهندگان باید دو مخزن کد جداگانه را تعمیر و نگه داری کنند و بسیاری اوقات برای هماهنگی تعمیر، انتشار و استقرار بین این دو مخزن نیازمند هماهنگی هستند. اگر چه این مشکلات قابل حل هستند، اما ما به این باوریم که این روش توسعه برنامه‌ها کارآمد و لذت‌بخش نیست.

# Inertia

Laravel به شما این امکان را می‌دهد که از بهترین امکانات هر دو دنیا بهره بگیرید. Inertia این امکان را فراهم می‌کند که میان برنامه‌ی Laravel شما و رابط کاربری مدرن Vue یا React، پلی برقرار شود که به شما امکان می‌دهد که رابط کاربری مدرن و کامل با استفاده از Vue یا React بسازید، در حالی که از روت‌ها و کنترلرهای Laravel برای مسیریابی، نمایش داده‌ها و احراز هویت استفاده کنید – و همه این‌ها در یک مخزن کد واحد. با این روش، شما می‌توانید از قدرت کامل Laravel و Vue / React بهره ببرید.

بعد از نصب Inertia در برنامه‌ی Laravel شما، روت‌ها و کنترلرها را به صورت معمول ایجاد خواهید کرد. با این حال، به جای بازگرداندن یک قالب Blade از کنترلر شما، یک صفحه Inertia باز خواهید گشت:

<?php
 
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
 
class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('Users/Profile', [
            'user' => User::findOrFail($id)
        ]);
    }
}

یک صفحه Inertia متناظر با یک جزء Vue یا React است که به طور معمول در دایرکتوری resources/js/Pages برنامه‌ی شما ذخیره می‌شود. داده‌های ارسال شده به صفحه از طریق متد Inertia::render برای نمایش دادن “props” جزء صفحه به کار می‌روند:

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
 
const props = defineProps(['user']);
</script>
 
<template>
    <Head title="User Profile" />
 
    <Layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
        </template>
 
        <div class="py-12">
            Hello, {{ user.name }}
        </div>
    </Layout>
</template>

همانطور که می‌بینید، Inertia به شما این امکان را می‌دهد که هنگام ساخت رابط کاربری خود، از قدرت کامل Vue یا React بهره ببرید، در حالی که یک پل سبک میان سمت سروری Laravel و سمت کلاینتی JavaScript رابط کاربری خود را فراهم می‌کند.

رندرینگ سمت سرور
اگر برای استفاده از Inertia نگران رندرینگ سمت سرور هستید، نگران نباشید. Inertia از پشتیبانی رندرینگ سمت سرور پشتیبانی می‌کند. و هنگام استقرار برنامه‌ی خود از طریق Laravel Forge، بسیار ساده است که اطمینان حاصل کنید که فرآیند رندرینگ سمت سرور Inertia همیشه در حال اجرا است.

# کیت‌های شروع (Starter Kits)

اگر می‌خواهید رابط کاربری خود را با استفاده از Inertia و Vue / React ایجاد کنید، می‌توانید از بسته‌های شروع کننده Breeze یا Jetstream لاراول بهره ببرید تا توسعه برنامه‌ی خود را به سرعت شروع کنید. هر دوی این بسته‌های شروع کننده جریان احراز هویت سمت سرور و سمت کلاینت رابط کاربری شما را با استفاده از Inertia، Vue / React، Tailwind و Vite ایجاد می‌کنند، به طوری که شما می‌توانید به ساخت ایده بزرگ بعدی خود شروع کنید.

# بسته‌بندی منابع (Assets bundling)

بسته‌بندی شامل تبدیل CSS و جاوااسکریپت کدهای شما به فایل‌های آماده و مناسب برای استفاده در محیط تولید می‌شود. Laravel به طور پیش‌فرض از ابزار Vite برای بسته‌بندی دارایی‌های شما استفاده می‌کند که زمان ساخت فایل‌های جاوااسکریپت را به شدت کاهش می‌دهد و قابلیت جایگزینی فایل‌های ماژول (HMR) نزدیک به فوری را هنگام توسعه محلی فراهم می‌کند. همچنین در تمام برنامه‌های Laravel جدید، شامل بسته‌های شروع کننده، فایل vite.config.js وجود دارد که پلاگین Laravel Vite را بارگیری می‌کند و استفاده از Vite با برنامه‌های Laravel را بسیار ساده و لذت‌بخش می‌کند.سریع‌ترین راه برای شروع کار با Laravel و Vite، شروع توسعه برنامه‌ی خود با استفاده از بسته شروع کننده Laravel Breeze می‌باشد. این ساده‌ترین بسته شروع کننده لاراول است که با ارائه چارچوب احراز هویت سمت سرور و کلاینت، توسعه برنامه‌ی شما را سریعتر می‌کند.