Datos sobre las propiedades en Laravel Livewire, propiedades bloqueadas
Propiedades bloqueadas
A continuación se muestra un componente ShowPost que almacena el ID de un modelo de Post como una propiedad pública llamada $id. Para evitar que un usuario curioso o malintencionado modifique esta propiedad, puede agregar el atributo #[Locked] a la propiedad:
use Livewire\Attributes\Locked;
use Livewire\Component;
class ShowPost extends Component
{
#[Locked]
public $id;
public function mount($postId)
{
$this->id = $postId;
}
// ...
}Al agregar el atributo #[Locked], se asegura de que la propiedad $id nunca será alterada.
Otra forma, sería declarando la propiedad como privada:
private $id;Restablecimiento de propiedades
También podemos restablecer propiedades empleando el método de $this->reset():
class ManageTodos extends Component
{
public $todo = '';
public function addTodo()
{
$this->reset('todo');
}
}Tipos de propiedades admitidas
Livewire admite los siguientes tipos de propiedades primitivas: array, String, int, flotante, booleano y null:
class TodoList extends Component
{
public $todos = []; // Array
public $todo = ''; // String
public $maxTodos = 10; // Integer
public $showTodos = false; // Boolean
public $todoFilter; // Null
}Transcripción del vídeo
Ya para cerrar me gustaría nombrar otras características que considero interesante para la parte de las propiedades por aquí agarré fue las siguientes voy a dejar esta de última porque me parece la más interesante en caso de que lo necesites puedes restablecer una propiedad lo mismo sería que colocar aquí t todo igual a vacío o directamente haces una redirección como hicimos para el filtro pero esta sería la forma oficial ya ahí te lo dejo a consideración y también tenemos aquí tipos de propiedades admitidas en este caso aunque no lo aclaran acá esto es la documentación oficial sería para los wire models ya que por ejemplo nosotros aquí también estamos utilizando una de tipo check para definir el post y la toma perfectamente el componente, pero esto sería lo que podemos emplear array vacío enteros un nulo un valor bolean que serían tal cual indican acá propiedades que podemos castear fácilmente a JSON entonces bueno para que como quien dice que es un poco más aclarado el asunto y otra vez aquí tienes la documentación oficial si quieres ver otras cositas que ya te recomendaría algunos ejemplos más por aquí vamos a ver este que es el que me parece también interesante.
Que es la forma en la cual tenemos para bloquear propiedades ya que el problemilla que tenemos acá es que podemos acceder desde acá desde la vista podemos acceder a esas propiedades y puede que tal cual indique la documentación oficial, ya lo puedes leer ahí un usuario curioso o malintencionado puede modificar a nivel de los campos de tipo wire model que tenemos colocar alguna propiedad que nosotros no hayamos definido en este ejemplo del video sería el del ID.
Se ve que desde la consola de desarrolladores duplico el campo de title y le coloco id y modifico el valor del nuevo campo, veremos que Livewire automáticamente toma el campo establecido por el usuario atacante, lo cual es una gran falla de seguridad. Estamos inyectando valores entonces para esto lo que nos indica la gente del Livewire es que podemos bloquear este tipo de propiedades por lo tanto ya sería una medida de seguridad simplemente aquí colocamos locket:
Y si ahora intento hacer la prueba anterior, veremos un error de Livewire que dice que la propiedad esta bloqueada.
Entonces fíjate que realmente s la estábamos pasando porque si ya no salta esta bandera es porque hicimos esa especie de inyección aún así me parece un poco claro es difícil cutre que el usuario puede hacer ese tipo de cambios Pero bueno es lo que hay entonces otra vez en caso de que sea necesario para ti y tengas que manejar ahí alguna propiedad que sea delicada y que no quieras exponer este sería un buen candidato otra forma aunque esa no la recomiende la gente de Livewire.
Diferir actualización para los wire:model
Un aspecto crítico que tienes que tener en cuenta cuando trabajas con los wire:model, es que, por defecto al detectar cambios, Livewire envía mensajes al servidor cada pocos milisegundos para mantener la sincronización entre lo que existe en el cliente con el servidor y viceversa.
El problema con estas peticiones, es que, si se emplea la configuración por defecto, se envían demasiadas peticiones al servidor y si tenemos múltiples clientes conectados al mismo momento enviando este tipo de peticiones, puede dar problemas de rendimiento e inclusive errores del servidor ya que, cada solicitud hace que el servidor necesite más y más recursos que pueden que no estén disponibles debido a la elevada demanda de recursos.
Esto por suerte, ya no ocurre en las versiones modernas de Livewire a partir de la versión 3, por lo tanto, las opciones que tenemos aquí, NO aplican o no se pueden utilizar para las nuevas versiones de Laravel y se explican es de propósito netamente informativos.
Para evitar estos problemas, tenemos que definir características extras sobre nuestros wire:model que pueden ser de tres tipos; para estos ejemplos, puedes emplear cualquiera de los campos de formularios que existen actualmente para los de posts o categorías; por ejemplo:
resources/views/livewire/dashboard/post/save.blade.php
***
<div class="col-span-6 sm:col-span-4">
<x-label for="">Title</x-label>
<x-input-error for="title" />
<x-input class="block w-full" type="text" wire:model="title" />
</div>
***.debounce: Modifica el tiempo de actualización
Esta configuración modifica el tiempo tiempo de actualización del campo wire:model; por defecto es de 150 milisegundos; por ejemplo, para modificar este tiempo a 500ms:
<x-input class="block w-full" type="text" wire:model.debounce.500ms="title" />Esta característica puede emplearse si estás usando la opción de live que permite actualizar la propiedad asociada al wire:model cada vez que escribimos, quedando como:
<x-input type="text" wire:model.live.debounce.500ms='title' class="w-full" />.lazy: Envía actualizaciones al perder el foco
Esta configuración desactiva la sincronización del campo wire:model y únicamente actualiza el estado al perder el campo el foco.
<x-input class="block w-full" type="text" wire:model.lazy="title" />.defer: Deshabilitar las actualizaciones
Esta configuración desactiva completamente la sincronización del campo wire:model; por lo tanto, los cambios realizados en dicho campo, se enviarán al ocurrir un envío de mensajes al servidor provistos por cualquier otro proceso de actualización en la aplicación.
<x-input class="block w-full" type="text" wire:model.deboun="title" />Transcripción del vídeo
Por aquí quiero comentarte rápidamente algunas formas que tenemos antes de trabajar con las propiedades y esto no es algo que se utilice simplemente ahí tenemos una pequeña variante que ya te voy a explicar pero así me parece muy importante mencionarlo porque por más que sea cuando estés consultando documentación antigua puede que te aparezcan estas opciones de lazy debounce y no sepas exactamente qué son ya que ninguna de ellas se aplica en las versiones modernas de Livewire ya que a partir de la versión 3 esto cambió un poco y era lo que te comenté al inicio del curso el cambio principal que existe entre la versión 2 y la 3 que es la última la fecha viene siendo que la versión dos cada vez que nosotros actualizamos un campo automáticamente se actualizaba también en el servidor es decir se enviaba una petición al servidor para actualizar ese estado cosa que no tenía absolutamente sentido y realmente nunca supe Por qué funcionaba así ya que hubieron la versión Beta la uno y la dos en las cuales livewire funcionaban de la forma mencionada eso. son haciendo un pequeño paréntesis aparte esas son de las cosas que a veces hace la comunidad del Laravel o la gente del Laravel y realmente no sé por qué hacen esos tipo de desarrollos tan desastrosos porque no tiene sentido que eso saliera así entonces bueno como te digo todo esto siempre hay que manejarlo con cuidado por suerte ya la gente de Laravel recapacito y ya no funciona así funciona como debería de funcionar que nosotros aquí podemos personalizar esto a gusto como nosotros queramos y cuando ocurra un evento fuerte que eso lo determinamos nosotros actualizamos en el servidor en este caso mediante un submit pero imagínate que tuviéramos este formulario y cada vez que nosotros escribamos suponte no sé que a la final tenemos 500 interacciones con este formulario se realizan 500 peticiones al servidor eso no tiene sentido porque no lo estamos aprovechando no lo necesitamos por lo tanto no debería de ocurrir en vez de simplemente una iteración o una interacción mejor dicho con el servidor que justamente cuando enviamos aquí el mismo mediante el evento Eso sí tiene sentido la actualización nunca tuvo mucho sentido de un carácter práctico porque esto solamente la parte de la como que dice la sincronización la aprovechamos es cuando nosotros queremos administrar el recurso que es cuando como quien dice volcamos los datos que tenemos aquí los volcamos para acá para que se sincronice y aquí aprovechamos lo que es Livewire y con esto todo lo que está por encima que sería las validaciones y por supuesto aquí lo fácil que podemos referenciar cada uno de estos Campos mediante estas propiedades que tenemos aquí definidas Y en este caso o crear o actualizar algo pero por por lo demás no tenía sentido que hiciera esa actualización esto te lo explico un poco porque como te comentaba me parece importante que entiendas que esto existía antes y que ya no existe y por lo tanto entiendas el por qué ya no existe porque otra vez ya no funciona de la manera mencionada con las actualizaciones prácticamente automáticas aún así te voy a mencionar un poquito esto para que veas cómo funciona voy a dejar de último el de B.
Lazy y defer
Voy a comenzar aquí por la de Lazy qué es lo que hacía la de Lazy que otra vez fíjate que ya no existe si buscamos aquí la documentación moderna que sería esta Fíjate que si Buscamos por la esto es otra cosa que no tiene nada que ver con lo que estamos hablando es para hacer el Lazy sobre un componente mientras que la documentación antigua se aparece previamente su explicación aquí por qué está al igual que la defer y la de debounce la de defer lo que hace es diferir la actualización para cuando se actualiza otro campo básicamente también se actualiza este fíjate que ahora está funcionando como quien dice de al revés porque ahora antes como te digo cada vez que escribíamos esto era lo que ocurría voy a venir a algún campo voy a colocar aquí el punto Live que Recuerda que lo empleamos en el filtro de share vengo acá Esto es lo que ocurría antes cada vez que escribíamos se enviaba una actualización cosa que no tiene sentido por lo comentado antes y esto eran características que teníamos para precisamente evitar es comportamiento cosa que otra vez no entendí nunca voy a entender qué es lo que estaba pensando la gente de Laravel el hacer este tipo de desarrollos de esta forma pero ya esto no existe por suerte entonces la de difer lo que hacía era que no lo puedo probar por lo mencionado que nosotros por ejemplo podíamos escribir aquí todo lo que queramos si aquí colocamos difer nosotros escribíamos todo lo que nosotros quisiéramos y a raíz de la actualización de otro campo se aprovechaba y también se actualizaba este eso era lo que hacía mientras que el Lazy simplemente des activaba la sincronización del campo y se actualizaba el estado del mismo cuando se perdía el foco que eso tenía un poquito más sentido Pero otra vez usualmente no era necesario el de debounce sí es un poco más interesante inclusive utilizarlo actualmente ya que fíjate que lo que hace es hacer un retardo en determinado tiempo en este caso especificado 1 segundos Me parece que también lo puedes colocar en segundos pero ya Eso depende de ti ahorita lo podemos probar indica por aquí que mira tú quieres que se realice la actualización no de manera automática.
Suponte que era esto cada vez que estamos escribiendo sino pasado 500 milímetros segundos en este ejemplo cosa que tuviera más sentido Ya queda el usuario como quien dice un tiempo para que termine de completar la frase para luego hacer la petición y no se est encando ahí tantas actualizaciones y a la final todo se vaya al demonio Entonces esto digo que se tiene un poco más de sentido precisamente por el Live ya que aquí fíjate algo interesante y es que si escribes bastante rápido Fíjate que solamente da chance de que se haga una actualización aquí escribí como seis caracteres y solamente se actualizó una vez por lo tanto ya implícitamente está implementado algo de eso no sé cuánto es el tiempo por defecto pero también lo podemos modificar y es aquí donde vamos a la documentación moderna y Fíjate que no es la misma sintaxis tal cual puedes ver porque otra vez ahora todo funciona de una forma distinta antes era directamente sobre el model y ahora es solamente cuando vas a emplear ya que cuando estás empleando el Live es que vuelves entre comillas al enfoque antiguo y por lo tanto aquí puedes colocar el tiempo de retardo bueno aparentemente si es solamente milisegundos según estoy leyendo acá entonces por aquí podemos para probar un poco puedes colocar aquí el Live punto b e indicas el tiempo de retardo Entonces colocas otro punto vo a colocarle 500 milisegundos por ejemplo hacemos esto regresamos acá Y entonces ahora tengo medio segundo para escribir y luego que se actualiza Aunque parecerá que está ocupando un poco más de tiempo Pero puedes ver que hay un retardo ahí:
<x-input type="text" wire:model.live.debounce.500ms='title' class="w-full" />Y es así de simple esto otra vez si tiene sentido por si quieres emplear el Live puedas al menos personalizar el tiempo de retardo para que de chance de escribir y se actualice por lo demás ninguno del resto tiene un propósito y eso era un poco lo que te quería mencionar Entonces ya básicamente concluimos esta clase lo siguiente que te quería comentar Es que este tema es un poquito más abstracto entonces básicamente va a ser así de teórica te voy a ir explicando un poquito cómo funciona cuál es el propósito de la misma pero realmente muchos de ellos no tienen cabida para hacer un ejemplo un ejercicio ya que se necesitaría un proyecto un poquito más complejo con más como quien dice te la que acordar que este proyecto que es bastante sencillo entonces ya poco a poco te lo ir explicando más que todo de manera manera teórica así que sin más que decir vamos a la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter