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;
 
class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     *
     * @param  int  $id
     * @return \Inertia\Response
     */
    public function show($id)
    {
        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/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>

As you can see, Inertia allows you to leverage the full power of Vue or React when building your frontend, while providing a light-weight bridge between your Laravel powered backend and your JavaScript powered frontend.

Server-Side Rendering

If you're concerned about diving into Inertia because your application requires server-side rendering, don't worry. Inertia offers server-side rendering support. And, when deploying your application via Laravel Forge, it's a breeze to ensure that Inertia's server-side rendering process is always running.

Starter Kits

If you would like to build your frontend using Inertia and Vue / React, you can leverage our Breeze or Jetstream starter kits to jump-start your application's development. Both of these starter kits scaffold your application's backend and frontend authentication flow using Inertia, Vue / React, Tailwind, and Vite so that you can start building your next big idea.

Bundling Assets

Regardless of whether you choose to develop your frontend using Blade and Livewire or Vue / React and Inertia, you will likely need to bundle your application's CSS into production ready assets. Of course, if you choose to build your application's frontend with Vue or React, you will also need to bundle your components into browser ready JavaScript assets.

By default, Laravel utilizes Vite to bundle your assets. Vite provides lightning-fast build times and near instantaneous Hot Module Replacement (HMR) during local development. In all new Laravel applications, including those using our starter kits, you will find a vite.config.js file that loads our light-weight Laravel Vite plugin that makes Vite a joy to use with Laravel applications.

The fastest way to get started with Laravel and Vite is by beginning your application's development using Laravel Breeze, our simplest starter kit that jump-starts your application by providing frontend and backend authentication scaffolding.

For more detailed documentation on utilizing Vite with Laravel, please see our dedicated documentation on bundling and compiling your assets.