Frontend
Вступ
Laravel — це бекенд-фреймворк, який надає всі необхідні функції для створення сучасних веб-застосунків, такі як маршрутизація, валідація, кешування, черги, зберігання файлів та інше. Однак ми вважаємо важливим запропонувати розробникам прекрасний повноцінний досвід, включаючи потужні підходи для створення фронтенду вашого застосунку.
Існує два основних способи вирішення задач фронтенд-розробки при створенні застосунку з 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 все ще можна реалізувати за допомогою представлень та Blade. Blade — це надзвичайно легка мова шаблонів, яка надає зручний, короткий синтаксис для відображення даних, ітерації по даних та багато іншого:
<div>
@foreach ($users as $user)
Hello, {{ $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, щоб швидко розпочати розробку вашого застосунку.
Використання 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, щоб швидко розпочати розробку вашого застосунку. Обидва ці стартові набори створюють бекенд та фронтенд вашого застосунку з аутентифікацією, використовуючи Inertia, 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, будь ласка, перегляньте нашу спеціальну документацію з пакування та компіляції ваших ресурсів.
