Livewire y Alpine JS, los mejores aliados 2
Me parece importante otra vez recalcarlo un poco y es el porque estamos viendo alpine js en esta sección; conocer lo que sería JetStream que son las dos capas que nos ofrecen para trabajar con JetStream Livewire e Inertia voy a partir un poquito aquí de Laravel inertia que en este caso me parece un poco más sencilla de entender.
Laravel Inertia
Laravel Inertia es básicamente Laravel Inertia con alguna capa algunos agregados que nos permiten emplear Vue de manera directa es decir renderizar Vue en vez de un archivo Blade es así de simple por lo demás tenemos por una parte en el servidor Laravel y por otra parte el cliente vio con todas sus bondades o las ventajas que puede tener en ciertos desarrollo.
Laravel Livewire
Si los comparamos con emplear Blade que es lo que tenemos en Livewire el Hardware es un poquito más complicada la cosa ya que tenemos nuevamente el Laravel ahí no cambia mucho la cosa aunque en inertia empleamos los que son controladores a empleamos componentes lo que yo llamo como componentes vitaminizado que es lo que hemos visto a lo largo de todo el curso hasta ahí todo bien la complicación por decirlo de alguna manera viene un poquito la parte del cliente en el cliente tenemos Blade no me refiero a Blade directamente 1ue obviamente sería php y eso sería en el servidor sino ya cuando lo renderiza es decir cuando ya tenemos el montón de v-for y demás toda la lógica ahí ya cuando lo está devolviendo directamente al cliente que ya tenemos todo renderizado ya tenemos un html pero por más que sea podemos comparar un poquito la parte de Blade con el cliente.
Entonces como precisamente Blade viene siendo algo más que todo el servidor es decir ligado al laravel entonces aquí para también aprovechar todas las bondades que nos permite Livewire como es el uso de la entre comillas reactividad que tenemos para las propiedades que definimos a componentes por dar un ejemplo entonces necesitamos algún framework que nos ayude en todo esto y obviamente no tiene sentido emplear Vue ya que aparte estamos empleando Blade entonces como que vi le quedaría un poco grande y a la final sería un poco redundante porque ya tenemos un framework en este caso inertia que permite emplear Vue React entre otros similares entonces es por eso que supongo yo que el equipo del Laravel decidió emplear un framework Tan sencillo como el pin lo cual me parece una decisión bastante acertada por lo mencionado al io de este curso ya que es un framework bastante sencillo y por lo tanto se siente poco invasivo simplemente lo acompañan y por precisamente la modularidad que View tiene una modularidad bastante buena ya que una de las características que tenemos en Vue yo estoy hablando de Vue estoy consciente en eso es que no es tan invasivo si lo comparas con otros framework como React o angular en la cual tienes que desarrollar toda la página entiéndase por ejemplo toda esta página en esas tecnologías en Vue simplemente tú puedes decir mira quiero que esta cajita que está por aquí tenga Vue el resto puede tener otra cosa en en al bien ocurre algo similar pero es un poco más flexible todavía ya que tú puedes tener tu página perfectamente en html con lo que tú quieras y tú puedes decidir qué bloque quieres emplear como te mostraba por acá y también te mostraba aquí en un fragmento del libro.
<html>
<body>
<div x-data="{ header:false }">
Abrir un modal
</div>
***
<div x-data="{ fieldText:" Pon tu nombre" }">
Manejar un formulario
</div>
***
<div x-data="{ open:false }">
Abrir un modal
</div>
</body>
</html>Tú puedes decidir, quiero que este bloque fíjate que esto es una página quiero que este bloque sea un componente de alpine y a su vez y aquí es donde gana flexibilidad si lo comparamos con Vue quiero que en ese mismo componente en esa misma página en ese mismo blat lo que sea por aquí vamos a tener otra cosita que voy a hacer con Alpine js entonces es todavía más flexible de lo que permitiría View entonces aparte de ser también un framework sencillo chiquito es un buen candidato y un buen compañero para trabajar junto con Livewire pero como quien dice en términos prácticos se siente un poquito más complicado porque ya tenemos varias cosas ya tenemos lo que son los componentes en el servidor la parte de la capa del servidor como te comentaba también tenemos Blade también tenemos Alpine y no conforme con eso también tenemos una capita ahí que es la el objeto Wire por ejemplo en la cual nos permite como quien dice poder todavía sacarle un poco más jugo a lo que es la comunicación entre lo que es el servidor con lo que es el cliente es así de simple ya que como vimos antes podemos compartir propiedades para poder sincronizarlos y un montón de cosas más que hemos visto a lo largo del curso y que como te dije no la veíamos porque bueno son un poquito abstractas ya de conocer pero tenemos esa comunicación ahí que es un puntazo o una diferencia o una ventaja que tenemos fundamentalmente si comparamos Livewire con inertia que es precisamente que aquí tenemos una mejor comunicación una mejor adaptación una mejor match ahí por por decirlo de alguna manera entre lo que sería el cliente con el servidor entiéndase de que podemos tener ahí una comunicación casi que bidireccional es decir los cambios que sucedan en el cliente los podemos tener en el servidor con todas las ventajas que esto nos puede traer y viceversa cosa que no tenemos cuando estamos empleando inercia ya que a la final la única ventaja se pudiera decir que tenemos al emplear la arabel inertia es que no estamos devolviendo directamente un componente una página en Blade si no estamos devolviendo un componente en Vue pero por lo demás no tenemos esa comunicación bidireccional es decir en ambas direcciones que tenemos entre la capa del servidor al cliente entonces aclarado eso un poco que ya lo he mencionado a lo largo del curso pero me pareció otra vez importante mencionarlo en este punto para como quien dice terminar de sanjar las ideas vamos a seguir con la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter