#Введение
Laravel — это backend-фреймворк, который предоставляет все необходимые функции для создания современных веб-приложений, такие как маршрутизация, валидация, кэширование, очереди, файловое хранилище и многое другое. Тем не менее, мы считаем важным предложить разработчикам полноценный full-stack опыт, включая мощные подходы к созданию фронтенда вашего приложения.
Существует два основных способа разработки фронтенда при создании приложения на Laravel, и выбор подхода зависит от того, хотите ли вы строить фронтенд с помощью PHP или использовать JavaScript-фреймворки, такие как Vue и React. Ниже мы рассмотрим оба варианта, чтобы вы могли принять обоснованное решение о лучшем подходе к разработке фронтенда для вашего приложения.
#Использование PHP
#PHP и Blade
Ранее большинство PHP-приложений рендерили HTML в браузер с помощью простых HTML-шаблонов, перемежающихся с PHP echo выражениями, которые выводили данные, полученные из базы данных во время запроса:
<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-шаблонов.
#Растущие ожидания
Однако по мере роста ожиданий пользователей от веб-приложений многие разработчики почувствовали необходимость создавать более динамичные фронтенды с более плавными взаимодействиями. В связи с этим некоторые разработчики выбирают создание фронтенда с использованием JavaScript-фреймворков, таких как Vue и React.
Другие, предпочитая оставаться с привычным backend-языком, разработали решения, позволяющие создавать современные UI веб-приложений, при этом в основном используя выбранный backend-язык. Например, в экосистеме Rails появились библиотеки, такие как Turbo, Hotwire и Stimulus.
В экосистеме Laravel потребность в создании современных динамичных фронтендов преимущественно с использованием PHP привела к появлению Laravel Livewire и Alpine.js.
#Livewire
Laravel Livewire — это фреймворк для создания фронтендов на Laravel, которые ощущаются динамичными, современными и живыми, как фронтенды, построенные с помощью современных JavaScript-фреймворков, таких как Vue и React.
При использовании Livewire вы создаёте Livewire «компоненты», которые рендерят отдельную часть UI и предоставляют методы и данные, с которыми можно взаимодействовать из фронтенда вашего приложения. Например, простой компонент «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, которые связывают фронтенд и backend вашего Laravel-приложения. Кроме того, вы можете отображать текущее состояние компонента с помощью простых Blade-выражений.
Для многих Livewire стал революцией в разработке фронтенда с Laravel, позволяя оставаться в привычной среде Laravel при создании современных динамичных веб-приложений. Обычно разработчики, использующие Livewire, также применяют Alpine.js для добавления JavaScript на фронтенд только там, где это необходимо, например, для отображения диалогового окна.
Если вы новичок в Laravel, мы рекомендуем сначала ознакомиться с базовым использованием views и Blade. Затем обратитесь к официальной документации Laravel Livewire, чтобы узнать, как вывести ваше приложение на новый уровень с помощью интерактивных Livewire-компонентов.
#Стартовые наборы
Если вы хотите строить фронтенд с использованием PHP и Livewire, вы можете воспользоваться нашими стартовыми наборами Breeze или Jetstream starter kits, чтобы быстро начать разработку приложения. Оба набора создают каркас backend и frontend аутентификации с использованием Blade и Tailwind, чтобы вы могли сразу приступить к реализации своей идеи.
#Использование Vue / React
Хотя можно создавать современные фронтенды с помощью Laravel и Livewire, многие разработчики предпочитают использовать мощь JavaScript-фреймворков, таких как Vue или React. Это позволяет использовать богатую экосистему JavaScript-пакетов и инструментов, доступных через NPM.
Однако без дополнительного инструментария сочетание Laravel с Vue или React требует решения множества сложных задач, таких как маршрутизация на стороне клиента, гидратация данных и аутентификация. Маршрутизация на стороне клиента часто упрощается с помощью специализированных Vue / React-фреймворков, таких как Nuxt и Next; однако гидратация данных и аутентификация остаются сложными и громоздкими задачами при сочетании backend-фреймворка 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
{
/**
* Показать профиль для заданного пользователя.
*/
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/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 при создании фронтенда, обеспечивая при этом лёгкий мост между backend на Laravel и frontend на JavaScript.
#Рендеринг на стороне сервера
Если вас беспокоит использование Inertia из-за необходимости рендеринга на стороне сервера, не волнуйтесь. Inertia поддерживает рендеринг на стороне сервера. А при деплое приложения через Laravel Forge легко обеспечить постоянную работу процесса серверного рендеринга Inertia.
#Стартовые наборы
Если вы хотите строить фронтенд с использованием Inertia и Vue / React, вы можете воспользоваться нашими стартовыми наборами Breeze или Jetstream starter kits, чтобы быстро начать разработку приложения. Оба набора создают каркас backend и frontend аутентификации с использованием Inertia, Vue / React, Tailwind и Vite, чтобы вы могли сразу приступить к реализации своей идеи.
#Сборка ассетов
Независимо от того, выберете ли вы разработку фронтенда с помощью Blade и Livewire или Vue / React и Inertia, вам, скорее всего, потребуется собрать CSS вашего приложения в готовые к продакшену ассеты. Конечно, если вы строите фронтенд с Vue или React, вам также нужно будет собрать компоненты в браузерные JavaScript-ассеты.
По умолчанию Laravel использует Vite для сборки ассетов. Vite обеспечивает молниеносное время сборки и почти мгновенную замену модулей (HMR) во время локальной разработки. Во всех новых приложениях Laravel, включая те, что используют наши starter kits, вы найдёте файл vite.config.js, который загружает наш лёгкий плагин Laravel Vite, делающий работу с Vite в Laravel приятной.
Самый быстрый способ начать работу с Laravel и Vite — начать разработку приложения с помощью Laravel Breeze, нашего простейшего стартового набора, который предоставляет каркас аутентификации для фронтенда и бэкенда.
Для более подробной документации по использованию Vite с Laravel смотрите нашу специализированную документацию по сборке и компиляции ассетов.