Обзор LiveWire 3 и Volt
Приветствую всех поклонников Laravel!
Эта статья-обзор новой, уже третьей версии Livewire. Решил сделать эту статью после выпуска на youtube-канале видео обзора Livewire, который понравился аудитории. Для тех, кто больше любит видео, то оно тут:
Ну и заодно также взглянем на новинку — Volt. Думаю, многие из вас ждали этот обзор и особенно обзор Volt.
Документация
Первое отличие — документация 3 версии Livewire переехала на поддомен laravel.com. Это https://livewire.laravel.com/ и заодно обновили дизайн.
Установка
Перейдем в документацию https://livewire.laravel.com/docs/quickstart в раздел установки.
Установка сильно упростилась и теперь зависимости устанавливаются с помощью композера:
composer require livewire/livewire
Следующий шаг — это публикация config:
php artisan livewire:publish --config
На этом всё, друзья. Теперь в основной шаблон не нужно добавлять @livewireStyles и @livewireScripts. Livewire будет делать инъекцию этих скриптов и стилей автоматически.
Но если вдруг Вам такой подход не нравится, то в config можете переключить false и добавлять ассеты самостоятельно, по старинке:
'inject_assets' => false,
Прежде чем мы пойдем далее, сразу скажу о понравившемся мне моменте — теперь wire:model по умолчанию с параметром defer. И это круто, так как до этого каждый раз, объявляя wire:model, приходилось добавлять .defer. Так как апдейт на каждое изменение практически никогда не был нужен (или только в редких случаях). Но теперь для этих редких случаев уже нам потребуется определенные параметры как live, либо blur.
Wire: Navigate
Чтобы подготовить для вас этот обзор как можно более качественнее, я заодно начал реализацию проекта из экосистемы CutCode с готовыми Livewire компонентами, но уже на Livewire 3 и Volt. Как раз на примере этого проекта мы будем с вами играться.
Итак, следующее на что стоит обратить внимание в Livewire 3 — это новая фича wire:navigate, мы можем ставить этот параметр на ссылке и у нас будет переход по страницам без перезагрузки:
На самом деле ничего сверхъестественного нет, попытка эмуляции single page application. Как видим у меня на логотипе стоит wire:navigate:
Если мы с вами по нему нажмем, то у нас перезагрузки не будет, но при этом придет HTML и основная страница заменится. Есть еще определенный интересный модификатор — называется он wire:navigate.hover:
В этом случае у нас с вами HTML-содержимое страницы придет без клика, а просто при наведении.
Forms
Далее важное изменение — это Forms (формы). Классы с формами и все что касается форм теперь вынесено в отдельный слой.
У некоторых возникли вопросы из-за того что старый подход с Model binding теперь не подходит. Давайте взглянем на Upgrade Guide и перейдем в секцию Eloquent model binding и ранее в Livewire компоненте нам было достаточно указать свойства и сделать type hint модели и далее черезwire:model, через точку, обращаться к полям этой модели.
Теперь так работать не будет. Так как эту логику необходимо выносить Form Objects, о которых мы сейчас с вами поговорим. Но, если вы хотите работать по старинке, то в конфиге вы можете переключить флаг
'legacy_model_binding' => true,
и старый подход будет работать. Но я не рекомендую вам его использовать и предлагаю переходить на новую концепцию. Рано или поздно этот legacy подход отключат.
Вернемся к формам.
Попробуем создать форму, используя artisan команду из документации.
php artisan livewire:form UserForm
И давайте также создадим компонент, где будем с вами эту форму юзать:
Давайте откроем созданный компонент. Пока что пустой:
Чтобы нам не тратить время на Blade, скопируем код формы из документации:
Вставляем в наш user.blade.php:
Новая особенность Livewire 3 — у формы не нужно по умолчанию указывать prevent, это будет по дефолту (так же как с wire:model — теперь не нужно по умолчанию указывать defer).
Как видим, в данном случае ничего у нас не изменилось. Только появилась определенная форма, с которой мы сейчас будем играться. Давайте оживим немного форму и в коде который мы скопировали из документации изменим form.title на form.name и form.content на form.email:
Далее, друзья, давайте смотреть на изменения. Во-первых livewire компоненты и форма теперь у нас располагаются в директории app, а не в http.
Формы в директории Forms, а компоненты соответственно в директории Livewire. Вот наш компонент User:
Как мы бы действовали с вами ранее, когда еще никаких форм не было? Верно, мы бы прямо здесь (в User.php) с вами создавали свойства. Если бы использовали Legacy подход, то сделали бы type hint c моделью и все было бы хорошо.
Но давайте сделаем как положено, на отдельных свойствах — $name и $email:
В старой версии Livewire мы в User.php сделали бы метод Save, затем добавили валидацию и указали бы правила. После этого — создаем пользователя (User::create), передав ему name и email:
Но, друзья, с приходом форм мы просто переносим эту логику и ответственность на сами формы давайте это сделаем и перенесем часть кода в наш UserForm.php:
соответственно validate из User.php так же уберем:
В самой форме мы можем использовать как и по старинке наши правила — rules:
В целом, форма готова. Далее мы просто объявляем публичное свойство public UserForm $form, а в методе save() указываем $this->form->validate :
Но мы можем сделать еще лучше и вынесем логику в форму:
А в самом компоненте у нас будет $this->form->storе():
Давайте выведем компонент в app.blade.php, чтобы было на что посмотреть:
Вернемся на главную страницу, видим, что у нас образовалась форма
Нажмем Save и видим, что у нас срабатывает валидация!
Мы вынесли логику в форму и у нас все работает как положено.Чтобы форма выглядела по приятнее навел немного красоты:
Следующий вопрос — это как биндить модель в эту форму? Раньше мы просто биндели в компонент, делали type hint определенного свойства и далее через точку делали wire:model уже внутри компонента.
C формой дела обстоят немного иначе — это частый вопрос при переходе на третью версию. Давайте его с Вами рассмотрим. Откроем User.php и добавим по старинке метод mount(). Укажем, что у нас обязательный параметр модель User (\App\Models\User $user).
Давайте в форме сделаем метод setUser(User $user) и внутри наполним данными name и email для наглядности:
А далее нам нужно ее установить (засетить) форму, то есть сделать $this->form->setUser ($user)
Далее открываем app.blade.php (там, где мы рендерим компонент) и добавляем livewire:user:
Давайте посмотрим, что у нас из этого получилось. Видим что у нас бинд срабатывает и данные подставляются:
Теперь если очистим нажмем save, видим, что и валидация у нас работает:
PHP attributes
Дальше вопрос валидации. Здесь есть некоторые изменения — старый подход через методы rules(), messages() работает, но также для нашего удобства добавили PHP атрибуты. Да Livewire просто пестрит PHP атрибутами, они практически везде и сейчас постепенно мы их с вами будем осваивать.
Давайте уберем пока что метод rules() из UserForm.php и далее с помощью атрибута Rule из Livewire будем добавлять необходимые нам правила — required, string и min со значением 3. То же самое продублируем и на e-mail:
Вернемся в браузер, обновляемся, попробуем очистить поля, нажмем save и видим что у нас все так же работает только теперь через PHP атрибуты.
Добавлять атрибуты можно другим способом, Вы можете перейти в раздел валидация и более углубленно взглянуть на те возможности, которые дают нам PHP атрибуты. Есть дополнительные свойства, прямо в атрибуте можно указать и сообщения валидации, а также переводить сообщения или нет, можно указывать в виде массива, добавлять туда классы. Подход через PHP attributes присутствует, и если он вам больше нравится, то обязательно используйте. Если нет, то можете пользоваться старым подходом через rules(): array:
Кстати, большинство новичков ищут в документации что-либо о Form Requests. У нас есть форма и хочется в ней применять стандартные Form Requests, но если вы пройдетесь по документации Livewire, то вы не увидите ни одного слова о Form Requests. Но если вдруг вы хотите их использовать, то можете их интегрировать прямо в метод rules().
Давайте создадим какой-либо Form Requests, так как в проекте который используется для примера их нет.
И если бы я хотел интегрировать сюда в Form Requests, я бы сделал следующее и в целом это рабочий подход для решения.
Друзья, раз уж мы с вами затронули тему PHP атрибутов в Livewire, то давайте ее продолжим и посмотрим еще на несколько таких атрибутов. Для этого переместимся в компонент для главной страницы (Home.php), здесь full page компоненты и поэтому я прямо в компоненте могу с помощью PHP атрибутов задавать title страницы, менять layout. Как это делается? Например, у метода render() я могу добавить атрибут title и указать что-либо (Hello):
Давайте вернемся назад, обновимся и видим, что заголовок поменялся на тот который я указал:
Тоже самое можно было бы сделать не у метода render(), а у класса Home и все так же будет работать:
И в таком же стиле я могу менять layout, используя атрибут Layout где указываем его расположение и это будет работать.
Давайте сделаем ошибку, чтобы убедиться что действительно работает — укажем components.layouts.app2 — такого layout уже нет и получаем соответствующее уведомление об ошибке:
Следующий интересный атрибут — Locked, давайте посмотрим как он выглядит и как он работает. На определенное свойство мы можем его с вами повесить и далее в клиентской части уже не сможем его изменять.Давайте попробуем и повесим его на поле для ввод имени пользователя, попытаемся изменить (что-либо ввести в поле) нажимаю Save и у меня появляется исключение — что Locked Property мы менять с вами не можем.
События
Друзья, следующее что мы с вами рассмотрим — это события (events) и как по мне с атрибутами это супер интересный подход. Давайте взглянем как это работает? К примеру во время сохранения (User.php) мы с вами будем вызывать событие, пусть это будет form-store. Закомментируем 22 строку и добавим метод onFormStore() в котором для наглядности и простоты сделаем Dump and Die (dd). Теперь укажем через атрибут On на какое событие будет вызываться этот метод, соответственно form-store. То есть в методе save() события дергаем, а в onFormStore() указываем какое (событие) будет при этом вызываться.
И таких listener может быть несколько.
Проверим в браузере, нажимаем на save и видим что dump & die срабатывает:
Мы даже с вами можем взять метод onFormStore() из User.php и вынести его в какой-то другой компонент, например разместим на главной странице Home.php. Проверим в браузере — событие снова вызовется.
Также интересный атрибут, когда мы дергаем какой-либо метод из Blade компонента, то у нас происходит ReRender. Приходят данные и компонент рендерится по-новому. Если на определенные методы такое поведение нам необходимо исключить, то мы можем добавить атрибут Renderless и в таком случае, когда мы будем дергать этот метод, компонент перерисовываться не будет:
Вычисляемые свойства
Следующий интересный раздел в Livewire 3 — это computed properties, вычисляемые свойства. Необходимы они нам для контроля над производительностью. Если мы вешаем атрибут Computed над каким-то методом, то он нам уже будет доступен через $this-> внутри этого компонента и внутри Blade-компонента. Но при этом в процессе реквеста вызываться он будет только единожды:
Независимо от того, что у нас здесь запрос к базе, livewire закэширует содержимое и мы при неоднократном обращении к одному и тому же методу будем всегда возвращать одно и то же значение. Давайте взглянем как это работает? Будем использовать компонент User.php, создадим свойство u() и добавим ему компонент [Computed], а в содержании укажем о возвращении рандомного юзера. И давайте пару раз задампим его. Во-первых в методе render() указанном в User.php, здесь обратите внимание свойства не создавалось, но обращение как к свойству u.
Во-вторых, то же самое в blade-компоненте user.blade.php. Также обращаю ваше внимание на то, что в blade-компоненте мы также вызываем через $this->:
Как видите в компоненте мы вызываем id пользователя и тоже самое внутри Blade шаблона. Но при этом, отправляем всего один request цикл, один запрос:
Также мы можем дополнительно кэшировать, указав в computed cache:true :
Проверим. При каждом обновлении будет приходить id первого пользователя:
Вложенные компоненты
Передвигаемся в более интересную тему это вложенные компоненты (nesting components). По сути полностью переписанный подход в Livewire 3 и теперь он работает намного круче и есть реактивность. Давайте взглянем на практике — создадим еще один с вами компонент, который будет у нас внутри компонента User. Давайте назовем его UserInner:
Сразу его откроем и вызовем его в нашем компоненте user.blade.php, как раз он станет у нас вложенным и сразу давайте передадим в него форму:
Откроем UserInner.php и создадим метод mount():
Давайте откроем view user-inner.blade.php и в ней соответственно выведем что-то из формы, например name и заодно сразу добавим Input, чтобы добавить wire:model:
Посмотрим в браузере что у нас при этом получается. Обновляемся, и видим, что у нас есть родительская форма и есть дочерняя:
И давайте заодно добавим кое-что в родительское поле. Укажем, что у нас wire:model.live — чтобы при вводе сразу менялась свойство формы:
Возвращаемся в браузер и меняем содержимое поля. Видим что у нас в родительском компоненте значение изменяется, но при этом в дочернем ничего не меняется:
Так работал Livewire раньше, никакой реактивности не было. У нас рендерился только родительский компонент. Давайте заодно взглянем на запросы, которые у нас отправляются. Если мы с вами будем менять содержимое родительского поля,
Видим что уходит апдейт и у нас только один компонент изменяется и приходит только его HTML:
Чтобы менять и дочерние, добавить реактивности которую мы ожидаем, нам нужно с вами перейти в UserInner.php и на форму повесить атрибут [Reactive]. Возвращаемся в браузер, обновляемся и теперь при вводе значений в поля формы у нас меняется и содержимое дочернего поля и его wire:model и значение:
Посмотрим в инструментах разработчика на вкладу Network, что там происходит. При вводе в родительское поле видим, что в update у нас массив с двумя компонентами — и родитель и все его дочерние:
И напоследок еще немного магии по вложенным компонентам. Нам также доступна переменная $parent с помощью которой мы можем обратиться к объекту родительского компонента. Давайте попробуем: $parent->form->name
Смотрим в браузере — вводим значения в поле родительской формы и это же значение появляется и в дочерней. Работает!
Polling
Друзья, также хочу вам показать раздел polling и wire:poll который был и до этого. Многие думают, что у нас происходит живое обновление по типу веб-сокетов. Даже в документации написано технология как web-сокеты, но ничего общего с веб-сокетами это не имеет. Конечно штука интересная, но в ней нет ничего необычного. На самом деле это просто запросы по тайм-ауту, поэтому рекомендую относиться к этой директиве крайне аккуратно. Давайте добавим на компонент user-inner.blade.php wire:poll:
Посмотрим в браузере, на вкладку Network инструментов разработчика:
Как видите по тайм-ауту происходит запрос, простой запрос, никакие не веб-сокеты и в ответе мы получаем данные по компоненту. Если что-то там на сервере изменилось, то само собой придут данные. Но обратите внимание как мы сейчас спамим запросами к серверу, поэтому крайне аккуратно относитесь к этой директиве. Если у вас их будет множество, все они будут спамить, решение будет не из лучших, а под капотом нет никакой магии, простой тайм-аут:
Lazy Components
Следующее что я хочу вам показать это крайне интересная фича, а именно Lazy компоненты — ленивые компоненты, которые сразу у нас не грузятся, а когда у нас уже пришел ответ, уже после этого отправляется запрос, не мешая нашему первому рендеру. Для этого достаточно добавить lazy:
Представим, у нас есть какие-то компоненты, какие-то сложные метрики с множеством запросов. Не хочется чтобы наша страница грузилась несколько секунд перед тем как отдать ее пользователю. Мы добавляем lazy, а далее переходим в компонент и вешаем на него placeholder. Это то, что у нас появится прежде чем мы запустим рендер компонента. И давайте чтобы посмотреть как это работает сделаем sleep продолжительностью 3 секунды:
Вернемся на в браузер и обновимся:
Видим, что второго компонента пока что нет, есть надпись «loading», идёт загрузка и только по прошествию указанного времени (мы указали 3 сек.), появился наш дочерний элемент:
Отличная штука обязательно берем на вооружение.
LiveWire Volt
Настало время для обзора Volt. На самом деле это тот же самый Livewire, он располагается в документации Livewire и создан на его основе. Единственное его отличие, что все находится в одном blade файле. Никакого Livewire класса, Livewire класс-компонента больше нет. И сверху в теге PHP мы организуем всю backend логику, а дальше у нас идет frontend. Разработчики вдохновлялись Vue Framework.
Устанавливается Volt просто, сперва устанавливаем Livewire, затем Volt. Делается это командой volt:Install, которая добавляет сервис провайдер — VoltServiceProvider.
Внутри мы указываем где у нас располагаются Livewire компоненты, где будут располагаться страница для Folio.
Далее, чтобы создать компонент используем команду make:volt и далее название, как make:livewire, только ключевое слово volt. Во всем остальном обязательно изначально вам нужно знать livewire, а уже после использовать Volt. Все то же самое перекочевало сюда в виде функций-хелперов. Единственное с чем может быть замешательство — это то, что входные параметры передаются при помощи функции state. Если нам необходим какой-то экшен, то вызываем его анонимной функцией.
Также нам говорят что в целом можем использовать и классы, но также сверху blade-файла, внутри. Как по мне — это выглядит крайне убого! Если на то что мы пишем логику прямо в Blade в целом в рамках Volt можно закрыть глаза на каких-то небольших компонентах, но добавлять анонимные классы, считаю что выглядит ужасно.
Окей, со state мы разобрались. Если нам необходим метод Mount, то пользуемся функцией mount() :
Хотим изменить layout — пользуемся функцией layout() :
Пользуемся функцией title для заголовка:
Как я говорил ранее все то же самое есть и здесь. Продолжим листать документацию и видим пример использования locked() через state(). Мы использовали его ранее:
То же самое с reactive, то же самое с computed. Это тот же самый Livewire, просто изменился подход. Все теперь организовывается в Blade-компоненте. Можем продолжать листать документацию до бесконечности и ничего нового мы с вами здесь не увидим «сахар», «сахар», «сахар» в виде дополнительных функций, которые делают в точности все то же самое, что мы делали в стандартном Livewire классе.
Давайте все же немного поиграемся и создадим с volt-компонент counter:
Отлично, видим что Blade компонент создан и больше ничего. Вот он так выглядит по дефолту:
Дальше нам предлагается со всем этим взаимодействовать. Давайте создадим определенный state, пусть будет count и по дефолту сделаем 0. Давайте попробуем вывести. Насколько я помню необходимо использовать $this.
Вернемся в браузер, обновимся и видим нолик, это state и то значение, которое мы здесь задаем:
Давайте также добавим Action. Пусть будет кнопка которая у нас будет инкрементировать этот счетчик count. Используем wire:click. Добавим инкремент, чтобы создать экшен, достаточно создать переменную которая у нас будет анонимная функция. На самом деле уже понимаю, что не очень удобно работать так как PHPStorm мне не подсказывает что в рамках $this-> контекста у нас есть count и приходится все писать самому:
Посмотрим в браузер, попробуем нажать в область отображения счетчика и видим что счетчик у нас меняется:
Давайте еще немного поиграем с Volt, заодно в очередной раз разберем тему computed properties — вычисляемых свойств, так как она мне очень нравится. Давайте создадим переменную $test со значением computed(function()), далее callback и внутри мы вернем count. И давайте выведем наш test, только он у нас computed:
Вернемся в браузер, нажимаем на »+», пытаемся инкрементировать. И первая переменная и вторая ведут себя абсолютно идентично:
Но давайте добавим computed метод persist, который у нас будет кэшировать (запоминать):
Вернемся в браузер. При первом заходе у нас отображается значение 00, а дальше мы с вами инкрементируем, но computed теперь никак не меняется, так как это значение у нас закэшировано и повторно ничего не происходит:
Давайте для наглядности изменим persist, добавив seconds и укажем чтобы он у нас хранился всего 2 секунды.
Вернемся в браузер, обновимся, инкрементируем и видим, что не каждое изменение, но раз в 2 секунды у нас приходят измененные значения:
Друзья, как видите ковырять Volt мы можем с вами сколько угодно долго, но никаких отличий от Livewire, кроме подхода «все в одном blade-файле», больше нет. В целом лично мне Livewire 3 дал так называемое второе дыхание, хочется что-то на нем написать, использовать, делать ролики на мой Youtube канал, но опять-таки только в том случае если и вам интересно. Поэтому обязательно напишите в комментариях стоит ли продолжать делать уроки по Livewire?
Спасибо за уделенное внимание. Данил Щуцкий, автор проекта CutCode.
