Di no a la complejidad con AlpineJS

Rate this content
Bookmark

JavaScript moderno es poderoso, pero los grandes frameworks como Vue o React añaden una cantidad abrumadora de complejidad al flujo de trabajo de los desarrolladores. Por eso escribí AlpineJS. Tiene menos de 10kb, no requiere un proceso de compilación, se aprende en poco tiempo y te brinda la plantilla declarativa y la reactividad que no puedes vivir sin ellas. No puedo esperar para mostrártelo.

33 min
18 Jun, 2021

Video Summary and Transcription

Alpine.js es un framework ligero para crear comportamiento JavaScript directamente en el marcado. Tiene 13 directivas y 6 propiedades mágicas, lo que lo hace similar a Tailwind para JavaScript. La próxima versión de Alpine se centrará en el rendimiento y la optimización. Se sitúa entre jQuery y Vue, ofreciendo reactividad sin necesidad de compilación. Alpine.js es robusto y resistente para la manipulación del DOM, y funciona bien con Laravel para la localización y la internacionalización.

Available in English

1. Introducción a Caleb Porzio y Alpine.js

Short description:

Soy Caleb Porzio, un mantenedor y desarrollador de código abierto a tiempo completo. Mantengo LiveWire, un framework de pila completa para Laravel. También soy el anfitrión del podcast No Plans to Merge. Alpine.js es mi oda a la simplicidad, perfecto para proyectos que no requieren Vue.js o React. Comencemos desde cero e instalemos Alpine.js a través de un CDN simple. Nuestro primer componente será un contador. Veamos cómo se ve Alpine con un componente básico.

Soy Caleb Porzio. Soy un mantenedor y desarrollador de código abierto a tiempo completo. Mantengo algunos paquetes. Uno de ellos es LiveWire. Es un framework de pila completa para el framework Laravel para PHP. También soy el anfitrión de un podcast llamado No Plans to Merge con mi amigo Daniel. Todos los viernes nos reunimos y hablamos sobre código y simplemente pasamos el rato, así que escúchalo si te interesa. Y luego, el otro proyecto que mantengo es Alpine.js, del cual estoy aquí para hablarles hoy.

Alpine.js es mi oda a la simplicidad. Básicamente, es para muchos proyectos en los que trabajo, como proyectos de tipo framework de pila completa, como Rails, proyectos de Laravel e incluso sitios estáticos y cosas pequeñas. No siempre quiero algo tan grande como Vue.js o React, pero Vanilla.js no es suficiente. No me brinda la reactividad y las cosas que he llegado a amar de estos frameworks más grandes frameworks. Así que básicamente escribí Alpine, y eso es lo que les voy a mostrar. Lo vamos a codificar en vivo y les mostraré exactamente cómo funciona.

Entonces, lo primero, esas diapositivas que acabo de mostrarles, eso es solo un componente de Alpine. Esta es la totalidad, una página HTML simple. Así que en realidad voy a deshacerme de eso y vamos a comenzar desde una página totalmente en blanco. Esto es una página HTML simple cargada en un navegador con algunos estilos base, así que no hay magia sucediendo aquí en absoluto. Entonces, el primer paso será instalar Alpine.js. Para seguir con ese mantra de simplicidad, no hay nada de NPM. Puedes instalarlo con NPM si quieres, pero personalmente, me encantan los buenos tiempos de un simple CDN, solamente agregándolo a una página y luego poniéndome en marcha. Así que puedes ir al repositorio de Alpine en GitHub y simplemente copiar este CDN, y luego lo pegaremos, y ahora estamos listos para comenzar. Alpine está totalmente instalado. Son 7.5 kilobytes de JavaScript minificado, así que es extremadamente pequeño.

De acuerdo, vamos a ello. Entonces, nuestro primer componente, simplemente voy a escribir un componente contador. Este es como el hola mundo de los frameworks de JavaScript. Un contador, lo que significa que simplemente presionamos un botón, más y menos, y vemos cómo se actualiza un número, y luego rellenaremos algunos de los conocimientos, pero solo quiero que veas cómo se ve Alpine, un componente básico de Alpine. Así que vamos a crear un div, y crearemos un botón que sea más, un botón que sea menos, y una etiqueta span para el número actual.

2. Creación de un Componente Alpine

Short description:

Para convertir el botón en un componente Alpine, agregamos la propiedad xdata y un objeto literal de JavaScript para nuestro estado. La directiva x text se utiliza para vincular el valor de texto a la variable count. La directiva x on escucha el evento de clic y ejecuta código JavaScript. Podemos incrementar el estado usando count++ dentro del botón.

Entonces, aquí está nuestro botón, más y menos. Y para convertir esto en un componente Alpine, todo está en el marcado. Así que agregaremos esta propiedad xdata. xdata le dice al marcado, aquí va a estar el componente Alpine. Luego, dentro de él, colocas un objeto literal de JavaScript para el estado del componente. Para nosotros, será count es cero.

Piensa en esto como el objeto data dentro de un componente de vista. Y la primera directiva que veremos fuera de xdata es x text. Entonces, x text, si estás familiarizado con Vue.js, muchas de estas deberían ser muy familiares. Esto es V text en Vue. X text está diciendo, hey, lo que pongas aquí, lo pondremos count aquí. Lo que pongas dentro de esta expresión se vinculará al valor de texto, el valor de texto interno de este elemento. Entonces, si actualizamos la página, ahora deberíamos ver un cero. ¿De acuerdo? Y ahí lo tenemos. Actualizamos, tenemos un cero.

Ahora necesitamos conectar los botones más y menos para que cuando los presionemos, mutemos ese estado. Aquí está la siguiente directiva. X on. Es similar a Vue. V on. X on. Puedes especificar cualquier evento del navegador. En nuestro caso, queremos escuchar un clic y luego ejecutar este JavaScript cuando hagas clic. Y solo para ser muy claro, lo que va dentro de estas comillas, esto es solo una expresión JavaScript. Por lo tanto, puedes poner cualquier JavaScript válido, incluso cosas que necesiten el objeto window o document. Entonces podemos decir, alerta, hey, cuando hacemos clic en ese botón. Y, oh, déjame actualizar la página. Presionamos más y luego obtenemos hey. ¿De acuerdo? Entonces también tenemos acceso al estado dentro de este botón. Por lo tanto, podemos decir count plus plus para incrementar el estado.

3. Introducción a los Componentes de Alpine.js

Short description:

También agregaremos un X en clic, count menos menos, para decrementar ese estado. Si estás familiarizado con Vue.js y V on, puedes usar la sintaxis abreviada. Ese es el hola mundo de los componentes de Alpine. Expresas datos para el estado del componente, escuchas eventos y ejecutas JavaScript dentro de él. Alpine es un framework ligero que utiliza mutation observer y manipulaciones simples del DOM.

Y también agregaremos un X en clic, count menos menos, para decrementar ese estado. Y si estás familiarizado con Vue.js y V on, también puedes usar la sintaxis abreviada que Vue pone a tu disposición. Solo en clic, count plus plus y count menos menos. ¿De acuerdo? Actualizamos y ahora presionamos más y presionamos menos. Y eso es todo. Ese es el hola mundo de los componentes de Alpine. Es extremadamente simple. Expresas algunos data que el componente va a usar como su estado y luego puedes escuchar eventos y ejecutar JavaScript dentro de él. Y también puedes vincular partes de la plantilla a esos data y todo se react automáticamente. Debo mencionar que Alpine es un framework realmente ligero. Lo diseñé para que sea extremadamente robusto. Por lo tanto, en realidad no utiliza un virtual DOM ni nada por el estilo. Utiliza mutation observer y manipulaciones simples del DOM para que esto suceda.

4. Introducción a las Directivas de Alpine

Short description:

Acabamos de introducir tres directivas: X data, X on y X text. Alpine es una colección de atributos que te permiten componer comportamientos directamente en tu marcado. Tiene 13 directivas y 6 propiedades mágicas. Alpine es como Tailwind para JavaScript, donde colocas tu comportamiento directamente en tu marcado. Pasemos a la siguiente directiva, xmodel, que es similar a vmodel en Vue. Crearemos un clon simple de Twitter con un cuadro de Tweet y un contador de caracteres. Al usar xmodel, podemos vincular el valor de Tweet al elemento de entrada.

De acuerdo. Así que acabamos de presentarte tres directivas diferentes. La directiva X data, también te presenté X on para escuchar eventos. Y también te presenté X text. Entonces, Alpine es solo esto. Alpine es una colección de atributos que puedes agregar a tu HTML para componer comportamientos directamente en tu marcado.

Entonces, en realidad hay 13 directivas. Esa es la totalidad de Alpine. Si vas a la documentación, la totalidad de Alpine son 13 directivas y 6 propiedades mágicas a las que llegaremos en un momento. No vamos a cubrir la totalidad de Alpine hoy, pero cubriremos lo básico.

La idea con Alpine es que es un comportamiento mezclado en tu marcado, similar a cómo una biblioteca, una biblioteca CSS como Tailwind o estoy tratando de pensar en las otras bibliotecas de utilidades donde básicamente compones tu estilo directamente en tu marcado, donde antes extraías clases en archivos separados. Entonces, Alpine es un concepto similar. Es como Tailwind para JavaScript, donde colocas tu comportamiento directamente dentro de tu marcado.

De acuerdo, sigamos adelante. Veamos nuestra siguiente directiva, que será xmodel. Entonces, xmodel, si estás familiarizado con Vue, es muy similar a vmodel. Y vamos a crear un ejemplo diferente. Haremos un área de texto. Y esto va a ser como el clon más simple del mundo de Twitter. La idea es que vamos a tener un pequeño cuadro de Tweet. Y luego, a medida que escribimos en él, queremos un contador de caracteres, al igual que en Twitter.

De acuerdo, aquí está nuestro div. Hagamos de esto un componente de Alpine con x data. Y vamos a tener nuestra propiedad. Nuestra propiedad data va a ser tweet. Y comenzaremos con el valor de, digamos, algo. ¿De acuerdo? Ahora, si decimos x model Tweet, lo que le estamos diciendo a Alpine es que vincule el valor de Tweet con el valor de este elemento de entrada y viceversa.

5. Introducción a las Expresiones y XBind de Alpine.js

Short description:

Cuando el área de texto cambia, los datos cambiarán. Esto es una vinculación de datos bidireccional. Las expresiones en Alpine.js son JavaScript plano. Puedes poner cualquier JavaScript que desees dentro de estas expresiones. Puedes usar los datos del componente en las expresiones. Para limitar el Tweet a 20 caracteres, usamos XBind para agregar y quitar condicionalmente la clase roja basada en la longitud del Tweet.

Cuando el área de texto cambia, los data cambiarán. Así que esto es una vinculación de datos bidireccional con la que estás familiarizado desde el antiguo Angular y también Vue.js. Si actualizamos, ahí vamos. El área de texto ahora dice, di algo. Y podemos usar nuestro x text anterior para vincular el valor de Tweet a este div. Así que digamos x text Tweet. ¿De acuerdo? Actualizar. Y ahora tenemos di algo y di algo. Y si lo cambiamos, se actualizará en tiempo real porque es completamente reactivo.

Y también, para reiterar, dentro de estas expresiones, esto es JavaScript plano. Así que podemos decir Tweet.toUpperCase, actualizar, y ahora todo estará en mayúsculas. Creo que esto lleva un poco de tiempo para asimilarlo. Incluso en Vue.js u otro framework similar, estás acostumbrado a extraer cosas a métodos separados o propiedades calculadas y simplemente hacer referencia a ellas dentro de estas expresiones. Con Alpine, eres totalmente libre de poner cualquier JavaScript que desees dentro de estas expresiones, y se te anima a hacerlo. Muy bien. En lugar de Tweet.toUpperCase, vamos a decir Tweet.length para obtener la longitud de este Tweet. Así que comenzamos con di algo, a medida que cambiamos esto, la longitud se actualiza. Ahí está. Súper simple.

Ahora vayamos un poco más lejos y digamos que queremos que el Tweet esté limitado a 20 caracteres. Pero si escribes más de 20, el contador de caracteres del Tweet se vuelve rojo, ¿de acuerdo? Así que hagamos una clase para que ese contador de caracteres del Tweet se vuelva rojo. Solo vamos a agregar una etiqueta de estilo en la parte superior, y dentro de la etiqueta de estilo una clase llamada roja que cambia el color a rojo, ¿de acuerdo? Y ahora si aplicamos esta clase a este div, así: class = roja, y actualizamos la página, entonces tenemos nuestro contador de caracteres rojo. Pero lo que queremos hacer es agregar y quitar condicionalmente esta clase roja dependiendo de la longitud del Tweet. Entonces, para cambiar atributos, aquí está nuestra próxima propiedad o nuestro próximo atributo en Alpine, XBind. Puedes XBind cualquier atributo en HTML. Puede ser class, puede ser style, puede ser disabled, lo que quieras. Así que puedes XBind class, y luego aquí hay otra expresión JavaScript, así que podríamos concatenar re más d y actualizar, y se volverá rojo porque es una expresión JavaScript que se evalúa. Y, por supuesto, puedes usar los data del componente dentro de estas expresiones. Así que digamos Tweet.length. Si Tweet.length es mayor que 20, entonces queremos que esto sea la clase roja.

6. Introducción a las Directivas y XInit de Alpine.js

Short description:

Si no, queremos hacerlo una clase vacía. En Alpine, es x bind. Lo mismo aquí. Si quieres usar la sintaxis abreviada, simplemente puedes usar dos puntos, class. La siguiente directiva se llama Xinit. Es el único gancho de ciclo de vida en Alpine. Todo lo que está dentro de Xinit se ejecuta al inicializar Alpine. Es un gancho pequeño y agradable para ejecutar JavaScript cuando se inicializa Alpine. Alpine es como una navaja suiza para JavaScript. Un caso de uso común es usarlo para controlar e inicializar otras bibliotecas de terceros. Vamos a convertir un elemento de entrada en un selector de fecha.

Si no, queremos hacerlo una clase vacía, ¿de acuerdo? Así que tenemos 14 caracteres, y a medida que escribimos, llegamos a 20, y listo. Ahora es rojo y es totalmente reactivo. Y al igual que en Vue.js, como en Vue, hay V bind. En Alpine, es x bind. Y en Vue, puedes omitir el V bind y simplemente usar los dos puntos. Lo mismo aquí. Si quieres usar la sintaxis abreviada, simplemente puedes usar dos puntos, class.

Así que ahí vamos. Pasemos a otro ejemplo. La siguiente directiva que quiero mostrarte se llama Xinit. Básicamente, es el único gancho de ciclo de vida en Alpine. Entonces, cualquier componente de Alpine, digamos que agregamos X data. Y luego un objeto vacío. Y luego diremos Xinit. Ahora, cualquier cosa dentro de Xinit se ejecutará al inicializar Alpine. Así que podemos decir alert. Hey. De acuerdo. Y ahora actualizamos la página y lo adivinaste. Hey simplemente aparecerá. Así de simple. Es solo un gancho pequeño y agradable para ejecutar JavaScript cuando se inicializa Alpine.

Entonces, una de las áreas comunes en las que hago cosas como esta, como Xinit, nota que ni siquiera tengo un objeto de datos con estado. Alpine es como, es como una navaja suiza para JavaScript. Para mí, lo uso para todo tipo de cosas. Y uno de los casos de uso más comunes para mí es usarlo para controlar e inicializar otras bibliotecas de terceros. Así que digamos que quiero tomar un elemento de entrada y convertirlo en un selector de fecha. Así que por ahora, deshagámonos de eso. Hey, así no tenemos que verlo cada vez que actualizamos. Tenemos este elemento de entrada y digamos que queremos que sea un selector de fecha, pero queremos usar una biblioteca para que eso suceda.

7. Introducción a Picaday y al atributo xref

Short description:

Picaday es un fantástico selector de fechas en JavaScript que es muy ligero y no tiene dependencias. Para instalarlo, simplemente agrega el JavaScript y CSS de Picaday a tu proyecto. Para inicializarlo, usa la propiedad alpine-xinit y el atributo xref para acceder a los elementos sin usar selectores de consulta.

Así que no tenemos que construirlo nosotros mismos. Aquí está Picaday. Es un fantástico y refrescante selector de fechas en JavaScript. Muy ligero, sin dependencias. Me encanta.

Para instalarlo, ya tengo un fragmento de código para no tener que copiar y pegar. Así que Picaday solo tiene un poco de JavaScript y CSS. Y luego, para inicializarlo, normalmente, esto es lo que harías. Agregarías una etiqueta de script, o tal vez esto estaría en tu paquete de JavaScript. Y dirías new Picaday, pasando un objeto con un valor llamado field, y luego document.querySelector, ya sabes, ese elemento que quieres convertir en un selector de fechas fuera del DOM así.

De acuerdo. Y ahora, si actualizamos nuestra página, hacemos clic en el campo de entrada, y ahora tenemos un selector de fechas. Así que eso es muy agradable. Pero como queremos que esto se ejecute al inicializar, simplemente podemos colocarlo dentro de nuestra propiedad alpine-xinit. Uno de los beneficios de esto es que no tienes que, normalmente tendrías que hacer algo como document.addEventListener, DOMContentLoaded, o onReady o algo así. Y como se ejecuta cuando se inicializa Alpine, se ejecutará en el orden correcto de todos modos. De acuerdo. Así que new Picaday y eso funciona perfectamente, pero tenemos este document.querySelector aquí mismo.

Permíteme presentarte el siguiente atributo, xref. Así que estamos usando document.querySelector, lo cual está bien, pero el campo de entrada, ya sabes, obviamente en cualquier otra aplicación, hay múltiples campos de entrada. Esto no será determinista. Así que tal vez terminarías haciendo algo como selector de fechas, como usar un ID, pero luego tal vez quieras tener varios en la misma página y te encuentres con colisiones de ID, lo que sea. Me encantó el concepto de refs de Vue. Así que lo traje a Alpine. En Vue, podrías hacer algo como esto ref input. Y luego, desde cualquier expresión de JavaScript, podrías decir refs.input y acceder a ese elemento sin tener que hacer todo el proceso de selección de consulta. Así que en Alpine, es xref input y luego refs.input. Y ahora actualicemos y asegurémonos de que funcione. De acuerdo, ahí vamos. Así que uso esto todo el tiempo.

8. Cleaning Up an Alpine Component

Short description:

Para limpiar el componente, elimina el valor y usa xdata en lugar de la propiedad data. Elimina el div innecesario e inserta la expresión en línea. Deshazte de xref y usa la propiedad mágica $L. Alpine es genial para tareas pequeñas de JavaScript y bibliotecas de terceros.

A veces creo un componente de Alpine solo para usar refs y poder extraer cosas del DOM de manera más predecible, programática, como quieras llamarlo. Muy bien, limpiemos un poco este componente. Si no estás usando realmente la propiedad data, puedes deshacerte del valor y simplemente usar xdata para acortarlo un poco. Y diré que ni siquiera necesitamos este div. Podemos tomar toda esta expresión y ponerla en línea aquí mismo, ¿de acuerdo? Y eso lo limpia. Ahora es solo una línea. Y finalmente, también podemos deshacernos por completo de este xref porque hay otra propiedad mágica en Alpine llamada $L. Y $L te dará el elemento actual del componente de Alpine. Así que aquí vamos. Asegurémonos de que esto funcione. Actualizamos, hacemos clic y ahí tenemos nuestro bonito selector de fechas en una sola línea de código. Está directamente en línea. El comportamiento está completamente ubicado junto con el marcado con el que se relaciona. Y agregamos literalmente esta cantidad de JavaScript para inicializar un selector de fechas. Así que uso Alpine para todo tipo de pequeñas tareas de JavaScript como bibliotecas de terceros como este selector de fechas. Increíble.

9. Introducción a la directiva xshow

Short description:

La última directiva que quiero mostrarte es xshow, que es perfecta para los desplegables. Creé Alpine.js porque los desplegables y los modales son sorprendentemente difíciles con JavaScript puro. Alpine comenzó como un framework simple para crear desplegables y modales, pero evolucionó en algo mucho más.

Entonces, la última directiva que quiero mostrarte se llama xshow. Naturalmente, un buen ejemplo para xshow es un desplegable. Y honestamente, escribí Alpine porque los desplegables y los modales son sorprendentemente difíciles con JavaScript puro. Me acostumbré tanto a usar vue.js que había olvidado cómo es, y luego intentas crear algo simple y te das cuenta de que es más difícil de lo que quisieras. Y luego vuelves a algo como vue. Entonces, Alpine inicialmente comenzó con eso, quería un framework con el que pudiera hacer fácilmente desplegables, modales y alternadores, cosas así. Y luego se convirtió en esto, por supuesto.

10. Creando un desplegable con Alpine

Short description:

Creemos un desplegable con Alpine.js. Inicializa el componente con el contenido del desplegable oculto de forma predeterminada. Escucha un clic en el botón mostrar desplegable para abrirlo. Para ocultar el desplegable, agrega un modificador llamado away y establece open en false al hacer clic fuera del elemento.

Entonces, creemos nuestro pequeño desplegable. Este será nuestro botón mostrar desplegable, y esto será nuestro contenido del desplegable. Veamos eso en la página. Mostrar desplegable y contenido del desplegable.

Lo que queremos que suceda es que el contenido del desplegable esté oculto de forma predeterminada. Así que primero inicialicemos este componente. Entonces, xdata, y esto será open, es false. Y ahora, el contenido del desplegable, podemos enlazarlo a ese booleano con xshow. Diremos xshow, open. Y recuerda, esto es solo otra expresión JavaScript. Podrías poner, literalmente, true aquí. Podrías hacer lo que quieras. Llamar a un método, no importa. Así que xshow, open. Ahora, si actualizamos, esto debería desaparecer, y lo hace.

Ahora queremos escuchar un clic en mostrar desplegable, establecer open en true, y debería react. Así que hagámoslo. Escucharemos un clic y luego diremos open igual a true. Bien, actualicemos. Y ahora, si hago clic en mostrar desplegable, se abre. Perfecto. La siguiente pregunta es ¿cómo ocultamos el desplegable? Podríamos hacer que esto sea un interruptor, para que cuando hagamos clic nuevamente, se oculte. Pero en muchos casos como este, con desplegables y modales, quieres poder hacer clic fuera de lo que se muestra como una forma de ocultarlo. Y hacer eso es realmente molesto. Así que agregué un pequeño ayudante dentro de Alpine. Si escuchamos un clic en el contenido del desplegable mismo, podemos agregar un modificador llamado away. Así que podemos decir agregar clic punto away. Y ahora estamos diciendo que cuando hagamos clic fuera de este elemento, ejecutaremos este JavaScript y estableceremos open igual a false. Así que compruébalo. Actualiza, mostramos el desplegable.

11. Manejo de Eventos y Transiciones de Desplegables

Short description:

Ahora hacemos clic fuera y el desplegable ahora está oculto. Digamos que podemos escuchar un evento de pulsación de tecla. Me encanta escuchar eventos de pulsación de tecla en Alpine y Vue porque lo hacen muy fácil. Podemos escuchar la tecla de escape para ocultar el desplegable a nivel de todo el documento. Otro modificador útil es transition, que proporciona una transición agradable para mostrar y ocultar el desplegable.

Ahora hacemos clic fuera y el desplegable ahora está oculto. Perfecto. Así obtenemos este comportamiento complejo de delegación de eventos. Si alguna vez has intentado implementar esto tú mismo, es un poco complejo y aquí lo tienes listo para usar.

Así que ahí vamos. Hagamos otro. Digamos que podemos escuchar un evento de pulsación de tecla. Me encanta escuchar eventos de pulsación de tecla en Alpine y Vue porque lo hacen muy fácil. Puedes decir at key down dot escape. Y ahora estamos escuchando la tecla de escape para ocultar ese modal. O perdón, el desplegable. Podría ser un modal, lo que sea. Permíteme mostrarlo.

Ahora quiero presionar escape y ocultarlo. Así que si presiono escape, nota que no sucede nada y luego el botón mostrar desplegable obtiene un contorno de enfoque. Eso se debe a que estamos escuchando la tecla de escape en este elemento. Y lo que realmente queremos hacer es escuchar la tecla de escape a nivel de todo el documento para que cuando presionemos escape en cualquier parte de la página, se oculte. Podemos hacer eso con otro modificador muy útil llamado window. Puedes agregar dot window a cualquier escucha de eventos y luego escuchará a nivel de la ventana. Así que actualicemos. Mostramos el desplegable, presionamos escape y ahora lo ocultamos.

Así que sigamos con estos modificadores de conveniencia. Para X show, también agregué otro llamado transition. Así que podemos decir X show dot transition y ahora cuando mostramos el desplegable, obtenemos una bonita transición al mostrar y ocultar. Y estamos en zoom, así que es posible que ni siquiera lo hayas visto. Puedes configurarlo con más modificadores. Digamos que lo haremos durar 2,000 milisegundos. Así que será una transición completa de dos segundos para mostrar el desplegable. Y ahora hace una transición con opacidad y escala durante dos segundos y luego hará una transición para ocultarse. Y realmente me preocupé por los detalles de este sistema de transición.

12. Personalización de Alpine.js y Conclusiones Finales

Short description:

Alpine.js es un framework robusto que permite la personalización de transiciones y proporciona todo el poder de las transiciones V y las clases de utilidad de Tailwind. Puedes extraer la lógica en archivos separados de JavaScript o etiquetas de script exponiendo funciones y creando métodos. Alpine.js es una navaja suiza de JavaScript, con un peso de solo siete kilobytes y medio y tan simple como un enlace CDN. Para obtener más información, visita el repositorio de Alpine.js para ver ejemplos útiles.

Es bastante robusto y he utilizado todas las configuraciones predeterminadas de las especificaciones de movimiento de Material Design. Así que está muy bien pensado. También puedes personalizarlo. Puedes decir solo transición de entrada, solo transición de opacidad, y muchas otras cosas así. Y si estás familiarizado con Vue y estás acostumbrado a las transiciones V y a usar clases de utilidad de Tailwind, también hay X transition que funciona de la misma manera y te brinda todo el poder.

De acuerdo. Así es XShowDropDownContents. El último paso aquí es, digamos que estás repitiendo cosas alrededor de tus expresiones y tal vez quieras extraer parte de esta lógica en un archivo JavaScript separado. Tal vez la combinación de marcado y comportamiento sea un poco demasiado para ti. Aunque a mí me encanta una buena expresión en línea. Digamos que ese es el caso. Siempre puedes extraer este JavaScript en un archivo separado o en una etiqueta de script exponiendo una función. Así que expongamos una función llamada dropdown que devuelve un fragmento de data. Y ese fragmento de data es open, false. De acuerdo. Y aquí podemos ejecutar realmente esta función, dropdown, y eso le dará a ese componente la data. Además, puedes crear métodos. Así que podríamos decir show, y luego this.open = true. Y ahora open = true podría hacer referencia al método show. Y si actualizamos, pulsamos ShowDropDown, y ahí lo tenemos.

Así es Alpine. Solo hemos cubierto ocho de las directivas. Pero también hay XIF, hay X4. Hay muchas otras funcionalidades para ti. Es mi oda a la simplicidad y el minimalismo. Es mi navaja suiza de JavaScript. Son siete kilobytes y medio de JavaScript y tan simple como un enlace CDN. Así que si estás interesado, ve al repositorio de Alpine.js y explora toda la documentación que está ahí. Hay muchos ejemplos útiles. Y eso es todo.

13. Conclusion and Course Announcement

Short description:

Trabajo a tiempo completo en Liveware y Alpine. Si usas Alpine y te gusta mucho, visita mi página de patrocinio y apóyame. Significa mucho para mí. Voy a lanzar un curso sobre VS code. He comenzado una lista de correo en makevscodeawesome.com donde comparto consejos sobre el flujo de trabajo de VS code. Esto ha sido Alpine JS. Gracias por verlo. ¡Feliz codificación!

Espero que realmente te guste. Y debo decir que trabajo a tiempo completo en esto. Trabajo a tiempo completo en Liveware y Alpine. Y básicamente dependo completamente de los patrocinadores de GitHub para mi sustento. Entonces, si usas Alpine y te gusta mucho, visita mi página de patrocinio y apóyame. Significa mucho para mí. Es lo que me permite hacer estas cosas.

Y también como otra forma de generar ingresos para poder construir estas cosas todo el día voy a lanzar un curso sobre VS code. Hago mucho screencasting y mucha gente dice, sabes, me encanta tu configuración, tus atajos de teclado, todas estas cosas. ¿Cómo lo configuras? ¿Qué extensiones usas? Y resulta que tengo una opinión bastante fuerte sobre mi configuración de VS code. Así que comencé una lista de correo. Y si te interesa, ve a makevscodeawesome.com y puedes suscribirte a esta lista de correo. Básicamente comienzo diciendo, aquí está VS code tal como viene. Es un poco molesto, muy distraído. Y aquí está cómo llegar a algo más minimalista y limpio. Y profundizo en muchos consejos sobre el flujo de trabajo de VS code. Así que si me das tu correo, te enviaré cosas de inmediato. Recibirás un montón de consejos de inmediato. Y eventualmente lo convertiré en un curso. Así que si estás interesado en eso, échale un vistazo.

Nuevamente, esto ha sido Alpine JS. Gracias por verlo. Espero que lo uses. Y feliz codificación. Gracias. Excelente trabajo, Caleb. Increíble. No puedes verme, pero los espectadores sí. Tengo una cosa de microfibra en la cabeza. Sí, porque mi cerebro literalmente explotó.

14. Caleb Portheo's Perspective on Alpine Performance

Short description:

Caleb Portheo mencionó los tamaños de archivo más pequeños como el principal punto de venta de Alpine, pero él cree que lo más importante es la experiencia y productividad del desarrollador. Actualmente está trabajando en la próxima versión principal de Alpine, con el rendimiento como objetivo principal. La versión actual ya es rápida, ya que utiliza API nativas del navegador en lugar de compilar y parchear el virtual DOM.

Toda la bondad está ahí. Gracias. Afortunadamente, tenía tanto cerebro que aunque explotó, todavía puedo continuar.

Caleb, por favor, únete a mí en el escenario de interrogación donde te interrogaré sin piedad hasta que llores o supliques por misericordia. Perfecto.

Así que, espectadores, amigos, ese fue Caleb Portheo porque lo he rebautizado. Así es. Así que cada vez que lo llamen por su nuevo nombre Portheo, yo obtengo el 10%. Voy a ser millonario.

Caleb, muchas preguntas de la community para ti. Estoy tratando de asegurarme de no hacer todas las preguntas relacionadas con el performance para que no tengas que repetirte demasiado. Pero mencionaste los tamaños de archivo más pequeños como el principal punto de venta de Alpine. ¿Cómo se compara en términos de performance con React y Vue? No creo que sea su principal punto de venta. Lo diré. Creo que en general, lo del tamaño de archivo es una distracción y yo también caigo en eso totalmente, porque también idolatro eso. Pero en realidad, lo más importante para mí es la developer experience y la productivity. ¿Cómo es usar la herramienta? ¿Te hace más productivo? ¿Se siente bien? ¿Se siente simple? ¿Es estéticamente agradable? Esas son las cosas que me importan. La máxima prioridad. Ese es su punto de venta. El tamaño del archivo es un pequeño efecto secundario divertido que puedo mencionar, un solo archivo de un solo carácter, minificado y comprimido con gzip. Así que lo diré. Esa es la advertencia. ¿Cómo se compara en términos de performance? Comencé a investigar esto. Estoy trabajando en la próxima versión principal de Alpine y el performance será el objetivo principal en la próxima versión principal. El objetivo de esta versión era obtener la API donde quería. Y diré que es bastante rápido porque lo que está debajo de la capucha de Alpine, no hay compilación ni parcheo del virtual DOM ni nada de eso. Todo son API nativas del navegador. No sé cómo crear un framework de virtual DOM, así que comencé con lo más mínimo que pude. Pensé, bueno, una directiva x-text, que tomaría el elemento y establecería su propiedad intertext en ese valor. Así que comencé ahí y luego construí a partir de eso.

15. Caleb Portheo sobre el rendimiento de Alpine

Short description:

La versión de prototipo para v3 es más rápida que la vista 2. Alpine no es un front-end completo. No es una herramienta SPA. Estás agregando comportamiento. El rendimiento es una de esas cosas en las que me encanta profundizar. Puedes usar PHP o lo que sea para generar tu HTML y luego agregar tanto o tan poco jQuery como quieras para hacer el trabajo pesado de alternar cosas y manipular elementos DOM individuales.

Diré que la versión de prototipo para v3 es más rápida que la vista 2, lo cual imagino quién sabe qué vista 3. Y no quiero comparar, en este nivel de comparación de rendimiento, hice un x4, que es lo mismo que v4, de, no sé, cuantas miles de filas, como 30 o 40,000. Y luego comienzas a notar realmente la diferencia. Y sí, porque tengo la ventaja de no lidiar con un compilador de plantillas. Así que eso es bueno. Me permite actualizar solo las partes del DOM que necesitan actualizarse cuando una pieza de datos cambia. Por lo tanto, en la próxima versión de Alpine, estoy muy emocionado de profundizar y ver hasta dónde puedo llevar las mejoras de rendimiento. Y creo que es bastante lejos. Sí, esa sería mi respuesta. Bastante vaga, pero sí.

No, no, está bien. Entonces, dejando de lado el tamaño del archivo, no voy a darles a mis usuarios un impacto en elrendimiento si elijo usar Alpine por su mejor experiencia de desarrollo. Sí, no. Y la mayoría de las cosas que la gente hace es alternar cosas. Como hacer un desplegable, un modal y un pequeño slider. Y esto es genial para eso. Esa es un poco la esencia de Alpine, no es un front-end completo. No es una herramienta SPA. No vas a construir todo tu sistema de front-end con Alpine. Lo harás con, ya sabes, ya sea un generador de sitios estáticos o una aplicación Rails o una aplicación Laravel o Django o Express o algo que genere HTML desde el backend. Y en ese caso, estás agregando comportamiento. Es un rociado de JavaScript. Por lo tanto, el rendimiento es una de esas cosas en las que me encanta profundizar. Pero en realidad, podría salirme con la mía. Y la gente ni siquiera se daría cuenta a menos que estuvieran haciendo cosas que tal vez Alpine no sea bueno para, como reemplazar toda tu plantilla de front-end por Alpine. Entonces no sé si escuchaste en mi introducción, estaba elogiando las virtudes de jQuery, pero ¿sería justo decir que esto es algo así? Puedo usar PHP o lo que sea para generar mi HTML y luego agregar tanto o tan poco jQuery como quiera para hacer el trabajo pesado de alternar cosas y manipular elementos DOM individuales. Exactamente. Sí. Y de eso se trata, nació de mí siendo un desarrollador de Laravel, volviendo a esas formas. Entonces, si estás en un contexto de back-end, un framework tipo MVC, como Rails o Laravel o algo así, Alpine es justo eso.

16. Alpine.js Rendering and Mutation

Short description:

Alpine.js se sitúa entre jQuery y Vue, ofreciendo reactividad sin necesidad de compilación o webpack. Permite agregar comportamiento y funciona bien con Laravel. Cuando se mutan elementos del DOM, Alpine actualiza el DOM en función de los datos mutados. La próxima versión de Alpine realizará acciones durante la renderización inicial, optimizando la ejecución de JavaScript. Se utiliza un observador de mutaciones para manejar las adiciones y eliminaciones de elementos del DOM.

Y es mucho... Así que se sitúa entre jQuery y algo como Vue, donde te brinda parte de la sofisticada reactividad de Vue, pero te brinda la simplicidad de jQuery CDN. No es necesario compilar. No hay webpack. No hay nada de eso. No tienes que hacer esas cosas. Y ni siquiera se recomienda hacerlo porque estás agregando comportamiento aquí y allá.

Así que sí. Es interesante que hayas mencionado Laravel porque aquí en mi ciudad natal, Birmingham, en el Reino Unido hay una tienda web muy buena llamada Jump24. No estoy tratando de promocionarlos. Es solo que a veces tomo una cerveza con sus directores ejecutivos. Y cuando tuiteé sobre este artículo de Smashing Mag, él dijo: oh, nos encanta ese framework. Funciona muy bien con Laravel. Creo que sin darse cuenta de que estabas conectado al proyecto Laravel. Pero basta de hablar de mis asuntos personales. Pasemos a otra pregunta.

Mencionaste que no hay vDom, Virtual Dom. Entonces Vlad Stavisky pregunta, ¿cómo funciona para la renderización si se mutan algunos elementos del Dom al mismo tiempo? ¿Alpine los vuelve a renderizar todos al mismo tiempo o sucesivamente? Sí, hay un par de respuestas diferentes a esto. Supongo, ¿a qué te refieres con mutar dos elementos diferentes al mismo tiempo? Porque creo que en general, el paradigma de Alpine es que estás mutando los datos y luego el Dom se actualiza con los datos. ¿Tiene sentido? Entonces, como en nuestro ejemplo de contador, cambiarías el contador y luego el Dom se actualizaría. Ahora mismo, rastreo el Dom. Para esa renderización inicial, estoy rastreando el Dom. Y estoy configurando las cosas a medida que avanzo. La próxima versión de Alpine, estoy muy emocionado, porque en esa primera renderización inicial, mientras rastreo, realizo acciones. Entonces, cuando llego, digamos, a un div con xtextcount, lo que sea, cuando llego a eso, envuelvo esa expresión donde realmente ejecuto .innertext donde lo establezco en una función observable. Entonces, ahora, cada vez que los datos que se usaron para generar ese .innertext cambien, solo eso se ejecutará. Solo esas piezas de JavaScript se ejecutarán. No hay renderización de virtual Dom ni nada por el estilo. Luego uso un observador de mutaciones para reinicializar las cosas que se agregan después del hecho o eliminar las cosas que se eliminan. Es robusto.

17. Robustez y Localización en Alpine.js

Short description:

Construí Alpine.js para que sea robusto y resistente, permitiendo la manipulación del DOM sin problemas. Al discutirlo, es mejor decir que te desplazas rápidamente sobre el DOM en lugar de arrastrarte. En cuanto a la internacionalización y localización, Alpine.js se enfoca principalmente en componer el comportamiento dentro del HTML, mientras que el backend, como Laravel, se encarga de la localización real. Desafortunadamente, se nos acabó el tiempo para más preguntas. ¡Gracias por su participación!

Lo construí para que sea realmente robusto. Utiliza un observador de mutaciones. Muchas cosas se calculan en tiempo de ejecución, por lo que puedes usarlo con otra cosa. Puedes manipular cosas y no todo va a explotar en tu cara. Ese es un objetivo para mí. Quiero que sea algo un poco más resistente que algo completo impulsado por un virtual Dom que posee el Dom. Quiero que sea algo que manipule el Dom según sea necesario.

Entendido. Interesante que digas que cuando te desplazas rápidamente, realizas acciones, porque mis amigas me dicen que cuando estoy borracho, soy bastante igual, en realidad. ¿Es eso cierto? Sí. Un pequeño consejo de relaciones públicas. No digas que te arrastras sobre el Dom. Di que te desplazas rápidamente sobre el Dom. Da la idea de que no eres lento, como directamente desde el exterior. Sí, claro. Buena idea. Buen consejo de marketing. Sí. No te preocupes. De nuevo, un 10% por eso. Por supuesto.

Otra pregunta interesante, no sobre tecnología profunda o performance. Naomi Meyer dice, gran charla, Caleb, con un emoji que parece una zanahoria, pero sospecho que podría ser algún tipo de fiesta. Tengo una vista terrible. Y luego dice, ¿Alpine admite funcionalidad o componentes de internationalization y localización? Sí, supongo que diré que no. Diré que, por lo general, uso Alpine con Laravel, y Laravel tiene un soporte de localización muy bueno, así que eso está más o menos cubierto con Laravel. ¿Esa es la pregunta? ¿Responde eso a la pregunta? Sí, creo que sí. Entonces, lo que estás diciendo es que no, porque ese no es su objetivo, el objetivo real es la cosa que produce el HTML. ¿Es eso un patrón razonable? Sí, así que, como el backend es la cosa que produce el HTM... Alpine es la cosa que compone el comportamiento dentro de ese HTML, así que digamos que si estoy en Laravel y quiero localizar una cadena, lo haría en el backend y luego podría alternar esa cadena con Alpine en el frontend, pero la localización real habría ocurrido más arriba en la cadena. Y tenemos muchas más preguntas, pero la voz de Dios en mi cabeza me dice que se nos acabó el tiempo, Caleb. Muchas gracias por responder las preguntas, y por favor, si puedes ir a la sala de Zoom para los que tienen boletos pagados, tendrás la oportunidad de interrogar a Caleb. Espero no haberte hecho llorar con mis preguntas despiadadas, Caleb. Me estoy conteniendo. Muchas gracias. Buen hombre, buen hombre. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.