livewire best practices
2.1.1
Este repositorio es una lista seleccionada de recomendaciones generales sobre cómo utilizar el marco Laravel Livewire para satisfacer las preocupaciones empresariales con respecto a la seguridad, el rendimiento y el mantenimiento de los componentes Livewire.
Mi nombre es Michael Rubél y comencé a usar el marco Livewire en 2019 cuando era nuevo y apenas estable. En el pasado, me impresionó la rapidez con la que se pueden enviar interfaces de usuario dinámicas sin siquiera usar JavaScript. Pero como cualquier solución de software, tenía sus inconvenientes y tuve que afrontarlos. El objetivo principal de este repositorio es recopilar las experiencias más importantes que debe considerar al trabajar con Livewire.
Empecemos...
Livewire requiere un elemento raíz (div) en cada componente. Siempre debes escribir código dentro de <div>Your Code Here</div> . Omitir esta estructura generará muchos problemas con la actualización de componentes.
Ejemplo
Don't pass large objects to Livewire components!Si es posible, evite pasar objetos a las propiedades públicas del componente. Utilice tipos primitivos: cadenas, enteros, matrices, etc. Esto se debe a que Livewire serializa/deserializa la carga útil de su componente con cada solicitud al servidor para compartir el estado entre el frontend y el backend. Si necesita trabajar con objetos, puede crearlos dentro de un método o propiedad calculada y luego devolver el resultado del procesamiento.
¿Qué considerar un objeto grande?
Nota: si utiliza componentes de página completa, se recomienda buscar objetos en el componente de página completa y luego pasarlos a los anidados como tipos primitivos.
Si tenía un componente Livewire (0) que incluye otro componente Livewire (1), entonces no debería anidarlo más profundamente (2+). Demasiado anidamiento puede provocar un dolor de cabeza cuando se trata de problemas de diferencias de DOM.
Además, prefiera el uso de componentes Blade cuando utilice el anidamiento, ya que podrán comunicarse con el componente Livewire principal pero no tendrán la sobrecarga que agrega Livewire.
Ejemplo
Livewire v3 introdujo una nueva capa de abstracción llamada Form Objects . Úselos siempre porque eso hace que sus componentes sean más fáciles de mantener a largo plazo.
Documentos
Evite situaciones que puedan llevar a pasar datos confidenciales a los componentes de Livewire, ya que se puede acceder fácilmente a ellos desde el lado del cliente de forma predeterminada. Puede ocultar las propiedades desde la interfaz usando el atributo #[Locked] a partir de Livewire versión 3.
En lugar de sondear constantemente la página para actualizar sus datos, puede utilizar detectores de eventos para realizar la actualización del componente solo después de que se haya iniciado una tarea específica desde otro componente.
Ejemplo
Puede utilizar propiedades calculadas para evitar consultas innecesarias a la base de datos. Las propiedades calculadas se almacenan en caché dentro del ciclo de vida del componente y no se ejecutan varias veces en la clase de componente o en la vista Blade. A partir de Livewire v3, el resultado de las propiedades calculadas también se puede almacenar en caché en la caché genérica a nivel de aplicación (por ejemplo, Redis), consulte.
Ejemplo
Pase solo un ID o UUID al método mount y luego asigne los atributos del modelo a las propiedades del componente. Recuerde: no asigne un modelo completo, sino solo sus atributos. Para evitar asignar manualmente los atributos del modelo, puede utilizar el método fill .
Ejemplo
Evite el uso de cable live : modificador de modelo. Esto reduce drásticamente las solicitudes innecesarias al servidor. En Livewire versión 3, todos los modelos están aplazados de forma predeterminada (antiguo: modificador defer ), lo cual es bueno.
Ejemplos
Livewire tiene comandos Artisan integrados para crear, mover, cambiar el nombre de componentes, etc. Por ejemplo, en lugar de cambiar el nombre de los archivos manualmente, lo que podría ser propenso a errores, puede usar el siguiente comando:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Puede utilizar estados de carga para mejorar la UX. Le indicará al usuario que algo está sucediendo en segundo plano si su proceso dura más de lo esperado. Para evitar el parpadeo, puede utilizar el modificador delay .
Ejemplo
En lugar de bloquear la representación de la página hasta que sus datos estén listos, puede crear un marcador de posición utilizando la técnica de carga diferida para que su interfaz de usuario responda mejor.
Ejemplo
Sincronice sus datos con el backend usando la directiva $wire.entangle. De esta manera, el modelo se actualizará instantáneamente en la interfaz y los datos persistirán en el lado del servidor después de que la solicitud de red llegue al servidor. Mejora drásticamente la experiencia del usuario en dispositivos lentos. Este enfoque se denomina "Respuesta optimista" o "IU optimista" en otras comunidades frontend.
Ejemplo
Livewire no admite solicitudes de formulario internamente, pero en lugar de codificar el conjunto de reglas de validación en el componente, puede obtenerlo directamente desde Solicitud de formulario. De esta manera, puede reutilizar las mismas reglas de validación en diferentes capas de aplicación, por ejemplo, en puntos finales de API.
Ejemplo
Incluso las pruebas simples pueden ser de gran ayuda cuando cambia algo en el componente. Livewire tiene una API de prueba sencilla pero potente.
¿Trabajas con Livewire a diario?
Sugiera sus mejores prácticas si no las ve en la lista.
Si no está seguro de si es una buena práctica, puede iniciar una discusión.
