livewire best practices
2.1.1
Este repositório é uma lista com curadoria de recomendações gerais sobre como usar a estrutura Laravel Livewire para atender às preocupações corporativas em relação à segurança, desempenho e manutenção dos componentes Livewire.
Meu nome é Michael Rubél e comecei a usar o framework Livewire em 2019, quando ele era novo e pouco estável. Antigamente, fiquei impressionado com a rapidez com que UIs dinâmicas podem ser enviadas, mesmo sem usar JavaScript. Mas, como qualquer solução de software, ela tinha suas armadilhas e eu tive que lidar com elas. O principal objetivo deste repositório é coletar as experiências mais importantes que você precisa considerar ao trabalhar com Livewire.
Vamos começar...
Livewire requer um elemento raiz (div) em cada componente. Você deve sempre escrever código dentro de <div>Your Code Here</div> . A omissão desta estrutura causará muitos problemas com a atualização de componentes.
Exemplo
Don't pass large objects to Livewire components!Evite passar objetos para as propriedades públicas do componente, se possível. Use tipos primitivos: strings, inteiros, arrays, etc. Isso ocorre porque o Livewire serializa/desserializa a carga útil do seu componente com cada solicitação ao servidor para compartilhar o estado entre o frontend e o backend. Se precisar trabalhar em objetos, você pode criá-los dentro de um método ou propriedade computada e depois retornar o resultado do processamento.
O que considerar um objeto grande?
Nota: se você usar componentes de página inteira, é recomendado buscar objetos no próprio componente de página inteira e depois passá-los para os aninhados como tipos primitivos.
Se você tiver um componente Livewire (0) que inclua outro componente Livewire (1), não deverá aninhá-lo mais profundamente (2+). Muito aninhamento pode causar dor de cabeça ao lidar com problemas de diferenciação de DOM.
Além disso, prefira o uso de componentes Blade ao usar o aninhamento, eles serão capazes de se comunicar com o componente Livewire do pai, mas não terão a sobrecarga que o Livewire adiciona.
Exemplo
Livewire v3 introduziu uma nova camada de abstração chamada Form Objects . Sempre use-os porque isso torna seus componentes mais fáceis de manter no longo prazo.
Documentos
Evite situações que possam levar à passagem de dados confidenciais para os componentes Livewire, pois eles podem ser facilmente acessados do lado do cliente por padrão. Você pode ocultar as propriedades do frontend usando o atributo #[Locked] a partir do Livewire versão 3.
Em vez de pesquisar constantemente a página para atualizar seus dados, você pode usar ouvintes de eventos para executar a atualização do componente somente depois que uma tarefa específica for iniciada a partir de outro componente.
Exemplo
Você pode usar propriedades computadas para evitar consultas desnecessárias ao banco de dados. As propriedades computadas são armazenadas em cache dentro do ciclo de vida do componente e não são executadas diversas vezes na classe do componente ou na visualização blade. A partir do Livewire v3, o resultado das propriedades computadas também pode ser armazenado em cache no cache genérico de nível de aplicativo (por exemplo, Redis), consulte.
Exemplo
Passe apenas um ID ou UUID para o método mount e, em seguida, mapeie os atributos do modelo para as propriedades do componente. Lembre-se: não atribua um modelo inteiro, mas apenas seus atributos. Para evitar o mapeamento manual de atributos do modelo, você pode usar o método fill .
Exemplo
Evite usar fio live :modificador de modelo. Isso reduz drasticamente as solicitações desnecessárias ao servidor. Na versão 3 do Livewire, todos os modelos são adiados por padrão (antigo: modificador defer ), o que é bom.
Exemplos
Livewire possui comandos Artisan integrados para criar, mover, renomear componentes, etc. Por exemplo, em vez de renomear arquivos manualmente, que podem estar sujeitos a erros, você pode usar o seguinte comando:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Você pode usar estados de carregamento para melhorar a experiência do usuário. Ele indicará ao usuário que algo está acontecendo em segundo plano se o seu processo estiver demorando mais do que o esperado. Para evitar oscilações, você pode usar o modificador delay .
Exemplo
Em vez de bloquear a renderização da página até que seus dados estejam prontos, você pode criar um espaço reservado usando a técnica de carregamento lento para tornar sua IU mais responsiva.
Exemplo
Sincronize seus dados com o backend usando a diretiva $wire.entangle. Dessa forma, o modelo será atualizado instantaneamente no frontend e os dados persistirão no lado do servidor após a solicitação de rede chegar ao servidor. Melhora drasticamente a experiência do usuário em dispositivos lentos. Essa abordagem é chamada de "Resposta Otimista" ou "UI Otimista" em outras comunidades front-end.
Exemplo
Livewire não oferece suporte a Form Requests internamente, mas em vez de codificar a matriz de regras de validação no componente, você pode obtê-lo diretamente do Form Request. Dessa forma, você pode reutilizar as mesmas regras de validação em diferentes camadas de aplicação, por exemplo, em endpoints de API.
Exemplo
Mesmo testes simples podem ajudar muito quando você altera algo no componente. Livewire tem uma API de teste simples, mas poderosa.
Você trabalha com Livewire diariamente?
Sugira suas práticas recomendadas caso não as encontre na lista.
Se não tiver certeza se é uma boa prática, você pode iniciar uma discussão.
