Frontend

Введение

Laravel – это бэкенд-фреймворк, предоставляющий все необходимые функции, такие как маршрутизация, валидация, кэширование, очереди, хранение файлов и другие, для создания современных веб-приложений. Однако мы считаем, что важно предложить разработчикам прекрасный опыт работы с полным стеком, включая мощные подходы для создания фронтенда вашего приложения.

Существует два основных способа разработки фронтенда при создании приложения на Laravel, и выбор подхода зависит от того, хотите ли вы создать фронтенд на основе PHP или с помощью JavaScript-фреймворков, таких как Vue и React. Ниже мы рассмотрим оба этих варианта, чтобы вы могли принять взвешенное решение относительно наилучшего подхода к разработке фронтенда для вашего приложения.

Использование PHP

PHP и Blade

В прошлом большинство PHP-приложений отображали HTML в браузере, используя простые HTML-шаблоны с вкрапленными PHP операторами echo, которые выводили данные, полученные из базы данных во время запроса:

<div>
    <?php foreach ($users as $user): ?>
        Привет, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

В Laravel такой подход к отображению HTML все еще можно реализовать с использованием шаблонов (views) и Blade. Blade – это крайне легкий язык шаблонов, который предоставляет удобный и краткий синтаксис для отображения данных, итерации по данным и многого другого:

<div>
    @foreach ($users as $user)
        Привет, {{ $user->name }} <br />
    @endforeach
</div>

При построении приложений в таком стиле, отправка форм и другие взаимодействия со страницей обычно влекут получение полностью нового HTML-документа от сервера, и страница полностью перерисовывается браузером. Даже сегодня многие приложения могут идеально подходить для построения своего фронтенда с использованием простых шаблонов Blade.

Растущие ожидания

Однако с увеличением требований пользователей к веб-приложениям многие разработчики сталкиваются с необходимостью создания более динамичных интерфейсов с более отточенным взаимодействием. В связи с этим некоторые разработчики предпочитают создавать пользовательский интерфейс своего приложения с использованием JavaScript-фреймворков, таких как Vue и React.

Другие, предпочитая оставаться верными языку бэкенда, с которым они знакомы, разработали решения, которые позволяют создавать современные пользовательские интерфейсы веб-приложений, в основном используя свой предпочитаемый язык бэкенда. Например, в экосистеме Rails это подстегнуло создание таких библиотек, как Turbo Hotwire, и Stimulus.

В экосистеме Laravel необходимость создания современных и динамичных интерфейсов с использованием преимущественно PHP привела к появлению Laravel Livewire и Alpine.js.

Livewire

Laravel Livewire это платформа для создания фронтенда на базе Laravel, который выглядит динамичными, современными и живыми, как фронтенд, созданные с использованием современных фреймворков JavaScript, таких как 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, которые соединяют фронтенд и бэкенд вашего приложения Laravel. Кроме того, вы можете отображать текущее состояние компонента с использованием простых выражений Blade.

Для многих Livewire стал революцией в разработке фронтенда с использованием Laravel, позволяя оставаться в зоне комфорта Laravel при создании современных динамичных веб-приложений. Обычно разработчики, использующие Livewire, также используют Alpine.js для добавления JavaScript только там, где это необходимо, например, для отображения окна диалога.

Если вы новичок в Laravel, мы рекомендуем ознакомиться с основами использования шаблонов и Blade. Затем обратитесь к официальной документации Laravel Livewire, чтобы узнать, как поднять свое приложение на новый уровень с помощью интерактивных компонентов Livewire.

Стартовые наборы

Если вы хотите создать свой фронтенд с помощью PHP и Livewire, вы можете использовать наш [стартовый набор Livewire] (/docs/12.x/starter-kits), чтобы начать разработку вашего приложения.

Использование React или Vue

Хотя можно создавать современный фронтенд с использованием Laravel и Livewire, многие разработчики предпочитают использовать возможности JavaScript-фреймворка, такого как React или Vue. Это позволяет разработчикам воспользоваться богатой экосистемой пакетов и инструментов JavaScript, доступных через NPM.

Однако, без дополнительных инструментов, совмещение Laravel с React или Vue потребовало бы решения различных сложных проблем, таких как маршрутизация на стороне клиента, гидратация данных и аутентификация. Маршрутизация на стороне клиента часто упрощается с использованием специализированных фреймворков React / Vue, таких как Next и Nuxt; однако гидратация данных и аутентификация остаются сложными и неудобными задачами при сочетании бэкенд-фреймворка, такого как Laravel, с этими фронтенд-фреймворками.

Кроме того, разработчикам приходится поддерживать два отдельных репозитория кода, часто требуется координировать обслуживание, релизы и развертывание в обоих репозиториях. Хотя эти проблемы не являются непреодолимыми, мы считаем, что это не продуктивный и приятный способ разработки приложений.

Inertia

К счастью, Laravel предлагает лучшее из обоих миров. Inertia устраняет разрыв между вашим приложением Laravel и современным фронтендом на React или Vue. Это позволяет создавать полноценные, современные интерфейсы, используя React или Vue, при этом воспользовавшись маршрутами и контроллерами Laravel для решения задач по маршрутизации, гидратации данных и аутентификации — всё это в рамках единого репозитория кода. Таким образом, вы можете наслаждаться всей мощью Laravel и React / Vue, не сталкиваясь с ограничениями ни одного из этих инструментов.

После установки Inertia в вашем приложении Laravel, вы будете создавать маршруты и контроллеры так же, как обычно. Однако, вместо возвращения шаблона Blade из вашего контроллера, вы вернете страницу Inertia:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * Показать профиль для указанного пользователя
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Страница Inertia соответствует компоненту React или Vue, обычно сохраненному в каталоге resources/js/pages вашего приложения. Данные, переданные странице с помощью метода Inertia::render, будут использоваться для гидратации “props” компонента страницы:

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

Как видите, Inertia позволяет использовать полную мощь React или Vue при создании фронтенда, обеспечивая легкий мост между вашим бэкендом, построенным на Laravel, и вашим фронтендом, работающим на JavaScript.

Рендеринг на стороне сервера

Если вы беспокоитесь о том, чтобы приступать к использованию Inertia из-за необходимости рендеринга на стороне сервера в вашем приложении, не волнуйтесь. Inertia предоставляет поддержку рендеринга на стороне сервера. И при развертывании вашего приложения через Laravel Cloud или Laravel Forge, легко обеспечить постоянную работу процесса серверного рендеринга Inertia.

Стартовые наборы

Если вы хотите создать свой фронтенд, используя Inertia и Vue/React, вы можете воспользоваться нашими стартовыми наборы приложений React или Vue чтобы ускорить разработку вашего приложения. Оба этих стартовых комплекта генерируют структуру вашего бэкенда и фронтенда для аутентификации с использованием Vue / React, Tailwind, и Vite, чтобы вы могли просто приступить к реализации своей следующей большой идеи.

Сборка ресурсов (Bundling Assets)

Независимо от того, выберете ли вы разработку фронтенда с использованием Blade и Livewire или Vue/React и Inertia, вероятно, вам потребуется собрать CSS вашего приложения в готовые к использованию в продакшене ресурсы. Конечно же, если вы выберете построение фронтенда вашего приложения с использованием Vue или React, вам также потребуется собрать компоненты в готовые к использованию в браузере JavaScript-ресурсы.

По умолчанию Laravel использует Vite для сборки ваших ресурсов. Vite обеспечивает моментальную сборку и практически мгновенную замену модулей (HMR) во время локальной разработки. Во всех новых приложениях Laravel, включая те, которые используют наши стартовые наборы, вы найдете файл vite.config.js, который загружает наш легкий плагин Laravel Vite, делая использование Vite приятным взаимодействием с приложениями Laravel.

Самый быстрый способ начать работу с Laravel и Vite – это начать разработку вашего приложения, используя наши стартовые наборы приложений, который ускоряет начало работы с вашим приложением, предоставляя основу для аутентификации на фронтенде и бэкенде.

Более подробную документацию по использованию Vite с Laravel можно найти в нашей специализированной документации по сборке и компиляции ваших ресурсов..