Frontend

• معرفی
• با استفاده از PHP
  • PHP و Blade
  • لایو وایر
  • کیت های شروع
• استفاده از Vue / React
  • اینرسی
  • کیت های شروع
• بسته بندی دارایی ها

معرفی

لاراول یک فریم ورک Backend است که تمام ویژگی‌هایی را که برای ساخت برنامه‌های وب مدرن نیاز دارید، مانند مسیریابی ، اعتبارسنجی ، کش کردن ، صف‌ها ، ذخیره‌سازی فایل و موارد دیگر را ارائه می‌دهد. با این حال، ما معتقدیم که ارائه یک تجربه تمام پشته زیبا به توسعه دهندگان، از جمله رویکردهای قدرتمند برای ساخت ظاهر برنامه شما مهم است.

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

با استفاده از PHP

PHP و Blade

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

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

در لاراول، این رویکرد برای رندر HTML هنوز هم با استفاده از views و Blade قابل دستیابی است . Blade یک زبان قالب بسیار سبک وزن است که نحوی مناسب و کوتاه را برای نمایش داده ها، تکرار روی داده و موارد دیگر فراهم می کند:

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

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

رشد انتظارات

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

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

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

لایو وایر

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

هنگام استفاده از Livewire، "مؤلفه‌های" Livewire ایجاد می‌کنید که بخش مجزایی از رابط کاربری شما را ارائه می‌کند و روش‌ها و داده‌هایی را که می‌توان آنها را فراخوانی کرد و با آنها از فرانت‌اند برنامه‌تان تعامل کرد، در معرض دید قرار می‌دهد. به عنوان مثال، یک جزء ساده "Counter" ممکن است به شکل زیر باشد:

<?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 اتصال ظاهر و باطن برنامه لاراول شما. علاوه بر این، می توانید با استفاده از عبارات ساده Blade، وضعیت فعلی کامپوننت خود را رندر کنید.

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

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

کیت های شروع

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

استفاده از Vue / React

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

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

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

اینرسی

خوشبختانه، لاراول بهترین های هر دو جهان را ارائه می دهد. اینرسی شکاف بین برنامه Laravel شما و Vue یا React frontend مدرن شما را پر می کند، و به شما این امکان را می دهد که با استفاده از Vue یا React از مسیرهای لاراول و کنترلرها برای مسیریابی، هیدراتاسیون داده ها و احراز هویت استفاده کنید - همه در یک کد واحد. مخزن با استفاده از این رویکرد، می‌توانید از تمام قدرت Laravel و Vue/React لذت ببرید بدون اینکه توانایی‌های هر یک از ابزارها را فلج کنید.

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

<?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)
        ]);
    }
}

یک صفحه اینرسی مربوط به یک مؤلفه Vue یا React است که معمولاً در resources/js/Pages فهرست برنامه شما ذخیره می شود. داده‌هایی که از طریق Inertia::render روش به صفحه داده می‌شود برای هیدراته کردن «پاپ» مؤلفه صفحه استفاده می‌شود:

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/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 در هنگام ساخت فرانت اند خود استفاده کنید، در حالی که یک پل سبک وزن بین بک اند لاراول و فرانت اند مبتنی بر جاوا اسکریپت ایجاد می کند.

رندر سمت سرور

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

کیت های شروع

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

بسته بندی دارایی ها

صرف نظر از اینکه آیا می خواهید ظاهر خود را با استفاده از Blade و Livewire یا Vue / React و Inertia توسعه دهید، احتمالاً باید CSS برنامه خود را در دارایی های آماده تولید قرار دهید. البته، اگر بخواهید که ظاهر برنامه خود را با Vue یا React بسازید، همچنین باید اجزای خود را در دارایی های جاوا اسکریپت آماده مرورگر قرار دهید.

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

سریع‌ترین راه برای شروع کار با Laravel و Vite این است که توسعه برنامه خود را با استفاده از Laravel Breeze ، ساده‌ترین کیت شروع ما آغاز کنید که برنامه شما را با ارائه داربست‌های احراز هویت frontend و backend شروع می‌کند.

برای مستندات دقیق تر در مورد استفاده از Vite با لاراول، لطفاً به مستندات اختصاصی ما در مورد بسته بندی و کامپایل دارایی های خود مراجعه کنید .