livewire best practices
2.1.1
Этот репозиторий представляет собой тщательно подобранный список общих рекомендаций по использованию платформы Laravel Livewire для решения проблем предприятия в отношении безопасности, производительности и обслуживания компонентов Livewire.
Меня зовут Майкл Рубель, и я начал использовать платформу Livewire в 2019 году, когда она была новой и едва стабильной. Когда-то я был впечатлен тем, насколько быстро можно создавать динамические пользовательские интерфейсы, даже не используя JavaScript. Но, как и у любого программного решения, у него были свои подводные камни, и мне пришлось с ними бороться. Основная цель этого репозитория — собрать наиболее важный опыт, который необходимо учитывать при работе с Livewire.
Начнем...
Для Livewire требуется корневой элемент (div) в каждом компоненте. Вы всегда должны писать код внутри <div>Your Code Here</div> . Отсутствие этой структуры приведет к множеству проблем с обновлением компонентов.
Пример
Don't pass large objects to Livewire components!По возможности избегайте передачи объектов в общедоступные свойства компонента. Используйте примитивные типы: строки, целые числа, массивы и т. д. Это связано с тем, что Livewire сериализует/десериализует полезную нагрузку вашего компонента при каждом запросе к серверу, чтобы разделить состояние между интерфейсом и сервером. Если вам нужно работать с объектами, вы можете создать их внутри метода или вычисляемого свойства, а затем вернуть результат обработки.
Что считать крупным объектом?
Примечание. Если вы используете полностраничные компоненты, рекомендуется извлекать объекты в самом полностраничном компоненте, а затем передавать их вниз во вложенные компоненты как примитивные типы.
Если у вас есть компонент Livewire (0), который включает в себя другой компонент Livewire (1), вам не следует вкладывать его глубже (2+). Слишком большая вложенность может вызвать головную боль при решении проблем, связанных с различием DOM.
Кроме того, при использовании вложенности предпочтительнее использовать компоненты Blade: они смогут взаимодействовать с родительским компонентом Livewire, но не будут иметь накладных расходов, которые добавляет Livewire.
Пример
Livewire v3 представил новый уровень абстракции под названием Form Objects . Всегда используйте их, потому что это делает ваши компоненты более удобными в обслуживании в долгосрочной перспективе.
Документы
Избегайте ситуаций, которые могут привести к передаче конфиденциальных данных компонентам Livewire, поскольку по умолчанию к ним можно легко получить доступ со стороны клиента. Вы можете скрыть свойства из внешнего интерфейса, используя атрибут #[Locked] начиная с Livewire версии 3.
Вместо постоянного опроса страницы для обновления данных вы можете использовать прослушиватели событий для выполнения обновления компонента только после того, как определенная задача была инициирована из другого компонента.
Пример
Вы можете использовать вычисляемые свойства, чтобы избежать ненужных запросов к базе данных. Вычисляемые свойства кэшируются в течение жизненного цикла компонента и не запускаются несколько раз в классе компонента или представлении блейда. Начиная с Livewire v3, результат вычисления свойств также можно кэшировать в общем кеше уровня приложения (например, Redis), см.
Пример
Передайте в метод mount только идентификатор или UUID, а затем сопоставьте атрибуты модели со свойствами компонента. Помните: не назначайте всю модель, а только ее атрибуты. Чтобы избежать сопоставления атрибутов модели вручную, вы можете использовать метод fill .
Пример
Избегайте использования модификатора live :model. Это значительно уменьшает количество ненужных запросов к серверу. В Livewire версии 3 все модели по умолчанию отложены (старая версия: модификатор defer ), и это хорошо.
Примеры
Livewire имеет встроенные команды Artisan для создания, перемещения, переименования компонентов и т. д. Например, вместо переименования файлов вручную, которое может привести к ошибкам, вы можете использовать следующую команду:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Вы можете использовать состояния загрузки, чтобы улучшить UX. Это укажет пользователю, что что-то происходит в фоновом режиме, если ваш процесс работает дольше, чем ожидалось. Чтобы избежать мерцания, можно использовать модификатор delay .
Пример
Вместо того, чтобы блокировать рендеринг страницы до тех пор, пока ваши данные не будут готовы, вы можете создать заполнитель, используя технику отложенной загрузки, чтобы сделать ваш пользовательский интерфейс более отзывчивым.
Пример
Синхронизируйте свои данные с серверной частью, используя директиву $wire.entangle. Таким образом, модель будет мгновенно обновляться на внешнем интерфейсе, а данные сохранятся на стороне сервера после того, как сетевой запрос достигнет сервера. Это значительно улучшает взаимодействие с пользователем на медленных устройствах. В других сообществах фронтенда этот подход называется «Оптимистический ответ» или «Оптимистический интерфейс».
Пример
Livewire не поддерживает внутренние запросы форм, но вместо жесткого кодирования массива правил проверки в компоненте вы можете получить его непосредственно из запроса формы. Таким образом, вы можете повторно использовать одни и те же правила проверки на разных уровнях приложения, например в конечных точках API.
Пример
Даже простые тесты могут сильно помочь, когда вы что-то меняете в компоненте. Livewire имеет простой, но мощный API для тестирования.
Вы работаете с Livewire ежедневно?
Предложите свои лучшие практики, если вы не видите их в списке.
Если вы не уверены, что это хорошая практика, вы можете начать обсуждение.
