Документация Laravel 10.x
Здесь ты найдешь сниппеты по Laravel и полезные советы по веб-разработке.
Laravel - это бэкенд-фреймворк, который предоставляет все необходимые функции для создания современных веб-приложений, таких как маршрутизация, валидация, кэширование, очереди, хранение файлов и многое другое. Однако мы считаем важным предложить разработчикам красивый опыт полного стека, включая мощные подходы к созданию фронтенда вашего приложения.
Есть два основных способа решения проблемы разработки фронтенда при построении приложения с использованием Laravel, и выбор подхода зависит от того, хотите ли вы строить свой фронтенд, используя PHP, или использовать фреймворки JavaScript, такие как Vue и React. Мы обсудим оба варианта ниже, чтобы вы могли принять обоснованное решение относительно наилучшего подхода к разработке фронтенда для вашего приложения.
В прошлом большинство PHP-приложений отображали HTML в браузере с использованием простых HTML-шаблонов, перемежающихся с операторами echo
PHP, которые отображают данные, полученные из базы данных во время запроса:
<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.
Laravel Livewire - это фреймворк для создания фронтендов на базе Laravel, которые ощущают себя динамичными, современными и живыми, так же, как фронтенды, построенные с использованием современных фреймворков JavaScript, таких как Vue и React.
При использовании Livewire вы создаете "компоненты" Livewire, которые отображают дискретную часть вашего пользовательского интерфейса и предоставляют методы и данные, которые можно вызывать и взаимодействовать с ними с фронтенда вашего приложения. Например, простой компонент "Счетчик" может выглядеть следующим образом:
<?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, вы можете воспользоваться нашими стартовыми комплектами Breeze или Jetstream starter kits, чтобы ускорить разработку вашего приложения. Оба этих стартовых комплекта создают структуру вашего приложения с авторизацией на бэкенде и фронтенде с использованием Blade и Tailwind, так что вы можете просто начать воплощать свою следующую крупную идею.
Хотя современные фронтенды можно создавать с использованием Laravel и Livewire, многие разработчики предпочитают использовать силу фреймворка JavaScript, такого как Vue или React. Это позволяет разработчикам использовать богатую экосистему пакетов и инструментов JavaScript, доступных через NPM.
Однако, без дополнительных инструментов, совмещение Laravel с Vue или React потребовало бы решения множества сложных проблем, таких как клиентская маршрутизация, гидратация данных и аутентификация. Часто клиентская маршрутизация упрощается с использованием определенных мнением Vue / React фреймворков, таких как Nuxt и Next, однако гидратация данных и аутентификация остаются сложными и неудобными проблемами при совмещении бэкенд-фреймворка, такого как Laravel, с этими фреймворками на стороне фронтенда.
Кроме того, разработчикам приходится поддерживать два отдельных репозитория кода, часто требуется координировать обслуживание, релизы и развертывание для обоих репозиториев. Хотя эти проблемы не являются непреодолимыми, мы считаем, что это не продуктивный и приятный способ разработки приложений.
К счастью, 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 при создании вашего фронтенда, предоставляя легковесный мост между вашим бэкендом, работающим на Laravel, и вашим фронтендом, работающим на JavaScript.
Если вы беспокоитесь о том, чтобы начать использовать Inertia, потому что ваше приложение требует серверного рендеринга, не волнуйтесь. Inertia предоставляет поддержку серверного рендеринга. Кроме того, при развертывании вашего приложения через Laravel Forge легко убедиться, что процесс серверного рендеринга Inertia всегда запущен.
Если вы хотите построить свой фронтенд, используя Inertia и Vue / React, вы можете воспользоваться нашими стартовыми комплектами Breeze или Jetstream starter kits, чтобы ускорить разработку вашего приложения. Оба этих стартовых комплекта создают структуру вашего приложения с авторизацией на бэкенде и фронтенде с использованием 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, пожалуйста, обратитесь к нашей специальной документации по упаковке и компиляции ваших ресурсов.