Alpine JS y Laravel Livewire importancia, explicación y uso en conjunto

Nosotros cuando creamos un proyecto en Livewire También tenemos una integración con alpine js que puede que no lo conozcas yo ya también cuento con un libro corto que tiene un Costa aparte sobre alpin en caso de que te interese aunque también en internet mucho material entonces de igual manera alpin viene siendo una especie de View Por decirlo de alguna manera viene siendo un framework del lado del cliente que nos permite también trabajar en base entonces nos ofrece una integración muy sencilla muy también un framework muy liviano con lo cual nosotros podemos realizar operaciones como eventos clit para cambiar estados y demás es un framework activo por lo tanto es lo interesante de esto de ampliar este tipo de tecnologías y al momento de que por ejemplo le damos aquí un click automáticamente se va a cambiar el estado sin necesidad de que nosotros hagamos ese paso de manera manual igual manera ahorita que Comencemos a trabajar con alpine vas a verle un poquito el sentido a todo esto pero básicamente aquí Creo que este ejemplo introduce bastante bien lo que es al pin con alpine nosotros podemos que es una diferencia fundamental que tenemos con Vue de manera opcional podemos definir en el html lo que sería también la lógica es decir en este caso como puedes ver aquí estamos definiendo lo que es la Data con la cual vamos a trabajar a nivel de este entre comillas componente este bloque de html Y en este scope entiéndese en este alcance definido por el SPAN podemos emplear esta variable aquí definida llamada como enable:

<span x-data="{ enabled: false }">
   <button @click.prevent="enabled = !enabled">Toggle</button>

   <template x-if="enabled">
       <span x-data="timer" x-text="counter"></span>
   </template>
</span>

En este caso es para mostrar u ocultar un contador que tenemos aquí también definido un html básicamente mediante Este condicional creo que bastante expresivo aquí por ejemplo estamos definiendo un evento click que lo que hace es hacer el token es decir invertir la selección que si esto se está mostrando entonces oculta y viceversa y realmente poco más que decir no hace falta que entiendas alpine de igual manera todo lo que nosotros vamos a implementar te lo voy a ir presentando poco a poco pero es importante que entiendas que tenemos aquí una integración con alpine si venimos aquí a la documentación oficial vas a ver que tienes un apartado para el pin en el cual obviamente nos permite emplear este framework que te introducía rápidamente hace unos momentos con Livewire y esto tiene todo el sentido del mundo ya que a la final Livewire Por más que sea es una tecnología del lado del servidor Pero qué pasa con el cliente cuando nosotros queremos precisamente poder ocultar algunos elementos html poder aplicar algunas animaciones unas suaves transiciones y es donde entra aquí alpine Entonces esto viene siendo el equivalente en Livewire que en inertia nosotros empleamos Vue.

Entonces en este caso como empleamos principalmente Livewire está faltando la parte del cliente la parte de precisamente eso poder manipular el dom html y para eso se emplea lo que es otra vez alpine de manera integrada por defecto y es un poco lo que bueno quería que entendieras ya nosotros vamos a ver que bueno aquí lamentablemente es un poquito extracta la documentación de que con tan solo definir datos de esta forma no es suficiente ya que…

A la final tuviéramos alpine por un lado y por otra parte lo que es Livewire 

Entonces vamos a querer integrar ambas cosas por decirlo de alguna manera y con cosas me refiero a lo que es las propiedades que nosotros exponemos Recuerda que por aquí en nuestro ejemplo nosotros estamos exponiendo lo que es el stet bueno lo tengo por acá en general que nuestro caso de interés que es el que nos va indicar Qué paso Vamos a mostrar en un determinado momento y es precisamente esa data la cual nosotros vamos a necesitar poder manipular O al menos leer desde alpine y es donde entra en todo esto el llamado objeto el cual es una forma en la cual nosotros podemos hacer múltiples operaciones entre cliente en tiendas al pin ya que esto viene en este caso formando parte también de alpine Aunque es un agregado que lo va a redundancia lo agrega Livewire Pero podemos por ejemplo acceder a propiedades a métodos Llamar métodos realizar operaciones en caso de que sea una operación asíncrona también lo podemos realizar de esta forma mediante de javascript emitir eventos y un montón de operaciones que en parte Aparecen por aquí en la documentación oficial de lwg con alpin Bueno ya esto lo vamos a ver un poco más adelante ya que creo que he sido muy abstracto Entonces vamos a ir comenzando haciendo un pequeño ejemplo y poco a poco vamos a ir presentando el resto de las características Obviamente el mejor candidato que tenemos aquí es por eso que empecé introduciéndose Alpine viene siendo este bloque de selector para los pasos que es donde precisamente vamos a querer manipular esa lógica para de una manera suave poder indicar que mira este ya no está activo sino sería este y es precisamente empleando al pin en todo esto aquí puedes ver que se cambió el diseño para bueno según lo que establecimos antes para el paso dos y eso es lo que nosotros vamos a querer hacer en alpin Entonces al menos de momento o en base a lo explicado lo que quiero que te quede claro es que Este es el bloque con el cual nosotros vamos a trabajar este definido por este di sería Entonces ya a partir de aquí Esto va a ser nuestro componente de alpine y qué es lo primero que nosotros definimos en un componente del pin usualmente es la Data la Data con la cual nosotros vamos a querer manipular esto que tenemos acá ya sea para mostrar ocultar en este caso para mover Cuál es la clase activa en base a alguna condición Entonces por aquí definimos el X datata punto importante también podíamos definir el bloque de JavaScript de manera aparte como hacemos con Vue pero esta viene siendo como quien dice una de las características principales que tenemos en alpine ya que alpin está concebido para que precisamente cuando queremos hacer diseños pequeñitos como este no sea tan intrusivo como pueden ser otros framework como Vue o inclusive React que es muchísimo más intrusivo que Vue.

Entonces al p está como quien dice explotando ese mercado de que queremos hacer pequeñitos componentes que hagan alguna funcionalidad sencilla entonces para eso empleamos a al pin ya de igual manera ahorita que hagamos la implementación la podemos comparar un poquito con lo que sería javascript nativo bueno por aquí definimos la Data en este caso sería bueno definido en un objeto como casi todo Sí en javascript cuando queremos definir alguna estructura ya que aquí podemos definir múltiples variables vamos a indicarle que se llama como active de que está activo de momento vamos a establecer aquí una inicialización local es decir que este uno que está aquí solamente se va a entender aquí en el cliente entiéndase cuando estemos renderizando aquí nuestro html por lo tanto esto de momento no tiene absolutamente nada que ver con Livewire y era lo que te comentaba antes más adelante veremos lo que es la integración con lightware para poder leer esa propiedad o ese valor que tengamos aquí el de State y por lo tanto ya a partir de aquí en base a este valor podemos indicar qué clase está activa entonces viene siendo más o menos lo mismo que hacemos con View que colocamos dos puntos porque se va a evaluar el siguiente atributo en este caso la atributo viene siendo el de clase y en el de clase Bueno más o menos lo mismo que hacemos en Vue voy a colocar las comillas perdón el Igual también y por aquí evaluamos una condición existen varias formas pero una de estas es simplemente preguntar aquí colocarías la clase que va a ganar en este caso se llama como active que es esta que tenemos acá ahorita la quitamos de acá:

<div class="flex" x-data="{ active: 1 }">

Pero es para tener la y de referencia Entonces esto se va a establecer si se cumple la siguiente condición a mí siempre me ha chocado esto un poquito porque lo veo como que al revés primero yo colocaría la condición y luego la clase como que el valor al menos así estamos acostumbrados primero se evalúa la el condicional Y luego el valor pero aquí está expresado se pudiera decir al revés al menos según mi juicio Entonces por aquí evaluamos la condición vamos a colocar sí voy a pararlo a un entero por si tenemos problemas ahí con el tipo pars in active que hace referencia a este Active si quieres de momento puedes colocarle aquí un dos y esto voy a colocarle un tres para que no no se mezclen tanto los nombres entonces aquí estamos preguntando es por esta variable que tenemos aquí arriba definida colocamos active otra vez por la variable si es igual igual a determinado valor en este caso como es el paso uno tenemos que preguntar si es el paso uno ya que esto mismo vamos a preguntarlo en cada uno de los pasos Entonces si hacemos esto Bueno aquí te recomiendo que tengas abierta tu consola de javascript ya que cualquier error lo vas a ver por acá:

<div class="flex mx-auto flex-col sm:flex-row">
    <div class="step" :class="{ 'active': parseInt(active) == 1 }">
        {{ __('STEP 1') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 2 }">
        {{ __('STEP 2') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 3 }">
        {{ __('STEP 3') }}
    </div>
</div>

No vemos nada bueno Claro porque le coloco un nombre raro o un nombre que no existe pero vamos a inspeccionar aquí Fíjate que aquí aparece bueno el active 3 que es el que tenía ahí y el active 2 que justamente lo que lo estoy colocando por acá fi un poco rápido voy a colocar aquí Cualquier cosa Entonces esto puedes ver que es completamente true es decir active tiene el valor de uno y es lo que estamos evaluando por acá Entonces por aquí puedes ver que se le asigna la clase como te digo esto mismo pero ya voy a colocarle la clase correcta que es active otra vez aquí colocas Cualquier cosa pero para que tenga sentido tiene que tener algún estilo aplicado que es lo que queremos y va a aparecer activo ya en este punto puedes ver que esto no lo tenemos que colocar ya sea que la clase exista o que no exista y vas a ver que el diseño funciona Entonces vas a copiar esto que hicimos acá y vas a replicarlo en todos los pasos aquí Fíjate que es importante que esto no es un atributo como quien dice legal de html Esto es algo de alpin por lo tanto alpine cuando evalúe Esto no es que está creando dos veces el atributo clase que esto daría un problema en en html es decir en html nosotros no podemos definir dos veces clases porque va a tomar alguno de ellos usualmente creo que es el último a no el primero en este caso puedes ver que el primero los vio no es esto esto viene siendo un atributo de alpine algo similar sucede en View y esos frameworks del cliente pero aquí preguntamos es por los pasos correspondientes ya Que de momento aparecerían todos activos cosa que no tiene sentido para nosotros nuestra lógica de nuestra aplicación tiene que ser de la siguiente forma en la cual preguntamos si este es uno si este es dos y si este es tres No sé si pueda y bueno en este caso vas a ver que solamente va a aparecer el que tengamos aquí activo si aquí coloco tres entonces va a aparecer el tercer paso activo y puedes verle un poquito el sentido a todo esto esto deberíamos de poder quitarlo porque independientemente del tipo Aquí sí funciona bien pero bueno era por si tenemos ahí algún problema ya que aunque esto sea un String como no estamos colocando la triple igualdad no está preguntando por el tipo:

<div class="flex mx-auto flex-col sm:flex-row">
    <div class="step" :class="{ 'active': parseInt(active) == 1 }">
        {{ __('STEP 1') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 2 }">
        {{ __('STEP 2') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 3 }">
        {{ __('STEP 3') }}
    </div>
</div>

Aunque de momento al menos voy a mantenerlo para hacer un ejemplo un poco más interesante cuando presentemos aquí el objeto wire, que es el que nos va a permitir leer como quien dice los valores que tengamos aquí definidos de algunas propiedades en nuestro caso nos interesa es la de stet Entonces es un poquito eso lo que te quería comentar por acá para hacerlo un poquito más interesante Aquí también en la documentación oficial tenemos un evento clck que pudiéramos implementar Algo similar Y ahorita lo vi hace unos momentos o por acá Aquí está precisamente esto como si fuera un contador entonces obviamente esto ya no iría como parte del desarrollo no lo vamos a hacer Pero creo que me parece interesante entonces dentro del ámbito que en este caso sería este di tenemos que colocar nuestro botón esto por darte rapidito una introducción a lo más básico de alpin a lo más básico de alpine y con elemento cit como puede suponer lo que hace es ejecutar algo cuando presionemos este botón en este caso nos interesa es aumentar nuestra variable Puedes hacer cualquier cosa inclusive llamar un método pero otra vez es algo sencillo usualmente lo que hacemos y voy a querer incrementar el de active bueno colocarle uno para que nos salga de Rango volvemos acá Bueno esto le puse un full para que se leyera pendiente que no tengamos errores Aquí tengo el botón Y fíjate que es lo que hace Cómo harías esto con javascript básicamente al darle click y aumentarse alguna variable que tengas ahí definida tienes que leer cuál paso tiene definido el de la clase aquí de active tuvieras que remover para luego leer Cuál es el paso dos de alguna manera ya sea que preguntes por un array de esto y mediante la array preguntes por la posición bueno dos entre comillas Pero sería la uno porque comienza en cero y le establezcas la clase como puedes ver Sería mucho más manual en este caso o la diferencia fundamental o la ventaja que tenemos aquí en vez de emplear lo que sería javascript puro y duro es que podemos emplear el componente reactivo que es precisamente eso que acabas de ver que automáticamente cuando cambia el valor de active automáticamente por aquí también se actualiza todas las referencias a dicho estilo aquí importante otra vez que esto se encuentre en el ámbito como te comentaba antes porque si lo colocas fuera Entonces ya no funcionaría porque estuviera en otro ámbito eh Por aquí está puedes ver que inclusive por aquí vas a tener un error que te indica que active no está definido y esto viene siendo ya un error de Bueno realmente es de alpine Aunque aquí lo está expando el lare ya que creo que está bastante Bueno aquí puedes ver que aquí aparece el pin expression error pero el javascript viene siendo del ya quisieron ahí alguna integración no sé si tomaron el framework de alpin y lo fusionaron con su desarrollo que lo hicieron pero ahí puedes ver un poquito de sentido de todo esto por más que sea las bases de alpin se aplican también aquí en el javascript raro de Livewire con alpine Entonces ya con eso creo que quedó bastante Claro en que pinta el pin en todo esto no quiero alargar dem más el video porque no lo quiero haer tan pesado Así que en el siguiente vamos a ver o vamos a darle aquí el sentido a este valor inicial de active que tiene que ser el que tengamos aquí definido en este eso lo vemos en la siguiente clase.

07-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Alpine JS y Laravel Livewire importancia, explicación y uso en conjunto