Say No To Complexity With AlpineJS

Hola, ahí. Soy Caleb Porzio. Soy un mantenedor de código abierto a tiempo completo, desarrollador. Mantengo algunos paquetes. Uno de ellos es LiveWire. Es un framework de pila completa para el framework Laravel para PHP. También presento 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 cada viernes, así que dale una escucha si te interesa. Y luego también 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 de los proyectos en los que trabajo, como tipo de framework de pila completa, como proyectos de Rails, Laravel, e incluso sitios estáticos y cosas pequeñas. No siempre quiero algo tan grande como Vue.js o React, pero Vanilla.js simplemente no es suficiente. No me da la reactividad y las cosas que he llegado a amar con estos frameworks más grandes. Así que básicamente escribí Alpine, y eso es lo que voy a mostrarles. Vamos a codificar en vivo, y les mostraré exactamente cómo funciona.

Así que lo primero, esas diapositivas que acabo de mostrarles, eso es solo un componente de Alpine. Esta es la totalidad, una simple página HTML. Así que en realidad voy a deshacerme de eso, y vamos a comenzar desde una hoja completamente en blanco. Esta es una simple página HTML cargada en un navegador con algunos estilos base, así que no hay magia sucediendo aquí en absoluto. Así que el primer paso será instalar Alpine.js. Para seguir con ese mantra de simplicidad, no hay nada de NPM. Puedes instalar con NPM si quieres, pero personalmente, me encantan los buenos viejos tiempos de un simple CDN, colocándolo en una página y luego poniéndolo en marcha. Así que puedes ir al repositorio de Alpine en GitHub y simplemente sacar 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.

Bien, vamos a ello. Así que nuestro primer componente, solo voy a escribir un componente de contador. Esto es como el hola mundo de los frameworks de JavaScript. Un contador, lo que significa que solo presionamos un botón, más y menos, y vemos un número actualizarse, y luego rellenaremos algunos de los conocimientos, pero solo quiero que vean 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 un más, un botón que sea un menos, y una etiqueta span para el número real.

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

Piensa en esto como el objeto de datos dentro de un componente de Vue. Y la primera directiva que vamos a ver fuera de xdata es x text. Así que 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, oye, lo que pongas aquí, vamos a poner count aquí. Lo que pongas dentro de esta expresión se vincula al valor del texto, el valor del texto interno de este elemento. Así que si refrescamos la página, ahora deberíamos ver un cero. ¿De acuerdo? Y ahí vamos. Refrescamos, tenemos un cero.

Así que ahora necesitamos conectar los botones de más y menos para que cuando los hagamos clic, mutemos ese estado. Así que aquí está la siguiente directiva. X on. Así que 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 súper claro, lo que va dentro de estas comillas, esto es solo una expresión de JavaScript. Así que puedes poner cualquier JavaScript válido, incluso cosas que necesitan el objeto window o document. Así que podemos decir, alert, oye, cuando hagamos clic en ese botón. Y, oh, déjame refrescar la página. Hacemos clic en más y luego obtenemos oye. ¿De acuerdo? Así que también tenemos acceso al estado dentro de este botón. Así que podemos decir count plus plus para incrementar el estado.

Y también añadiremos un X on click, count minus minus, 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. Simplemente at click, count plus plus y count minus minus. ¿De acuerdo? Refrescamos y ahora pulsamos más y pulsamos menos. Y eso es todo. Ese es el hello world de los componentes de Alpine. Es extremadamente simple. Expresas algunos datos 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 datos y todo reaccionará automáticamente. Debo señalar que Alpine es un framework realmente ligero. Quise que fuera extremadamente robusto. Así que en realidad no utiliza un virtual DOM ni nada. Utiliza mutation observer y manipulaciones simples del DOM para hacer que esto suceda.

Bien. 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. Así que Alpine es solo esto. Alpine es una colección de atributos que puedes añadir a tu HTML para básicamente componer comportamiento directamente en tu markup.

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

Y la idea con Alpine es que es comportamiento mezclado en tu markup, similar a cómo como 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 markup, donde antes estabas extrayendo clases a archivos separados. Así que Alpine es un concepto similar. Es como Tailwind para JavaScript donde estás poniendo tu comportamiento directamente dentro de tu markup.

Bien, así que sigamos. Veamos nuestra siguiente directiva que va a ser xmodel. Así que 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 de Twitter más simple del mundo. La idea es que vamos a tener como una pequeña caja de Tweet. Y luego, mientras escribimos, lo siento, aquí vamos. ¿Qué le está pasando a mi computadora? Bien, así que aquí está nuestra caja de Tweet. Y luego, mientras escribimos en ella, queremos un contador de caracteres, justo como en Twitter.

Bien, así que aquí está nuestro div. Hagamos de esto un componente de Alpine con x data. Y vamos a tener nuestra propiedad. Nuestra propiedad de datos 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 al valor de este elemento de entrada y viceversa.

Cuando el área de texto cambia, los datos cambiarán. Así que este es el enlace de datos bidireccional con el que estás familiarizado de Angular antiguo y también Vue.js. Así que si actualizamos, ahí vamos. El área de texto ahora dice, di algo. Y podemos usar nuestro x text de antes para enlazar 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 que dentro de estas expresiones, esto es JavaScript puro. Así que podemos decir Tweet.toUpperCase, actualizar, y ahora todo estará en mayúsculas. Creo que eso es algo que lleva un poco de tiempo asimilar. Que incluso en Vue.js u otro framework como ese, estás acostumbrado a extraer cosas a métodos separados o propiedades computadas y solo referenciar esas 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. Así que 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. Así que ahí está. Súper simple.

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

Si no, queremos que sea una clase vacía, ¿de acuerdo? Así que tenemos 14 caracteres, y a medida que escribimos, llegamos a 20, y bam. 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 deseas usar la sintaxis abreviada, puedes simplemente usar dos puntos, class.

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

Así que 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 realmente comunes para mí es usarlo para controlar e inicializar otras bibliotecas de terceros. Así que digamos que quería tomar un elemento de entrada y convertirlo en un selector de fecha. Así que ahora vamos a deshacernos de eso. Hey, para que no tengamos que verlo cada vez que actualizamos. Así que tenemos este elemento de entrada y digamos que queremos que sea un selector de fecha, pero queremos incorporar una biblioteca para que eso suceda.

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

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

De acuerdo. Y ahora si actualizamos nuestra página, hacemos clic en la entrada, y ahora tenemos un selector de fechas. Así que eso es realmente agradable. Pero porque queremos que esto se ejecute en la inicialización, podemos simplemente poner esto 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 porque se ejecuta cuando alpine se inicializa, simplemente se ejecutará en el orden correcto de todos modos. De acuerdo. Así que hacemos new pick a day y eso funciona totalmente, pero tenemos este document.querySelector justo aquí.

Así que déjame presentarte el siguiente atributo, xref. Así que estamos usando document.querySelector, lo cual está bien, pero input, ya sabes, obviamente en cualquier otra aplicación, hay múltiples entradas. Esto no va a ser determinista. Así que tal vez terminarías haciendo algo como date picker, como usar un ID, pero luego tal vez quieras tener múltiples en la misma página y te encuentras con colisiones de ID, lo que sea. Me encantó el concepto de refs de views. Así que lo traje a Alpine. En view, podrías hacer algo como este ref input. Y luego desde cualquier expresión de JavaScript, podrías decir refs.input y acceder a ese elemento sin hacer todo el asunto del selector de consulta. Así que en Alpine, es xref input y luego refs.input. Y ahora vamos a actualizar y asegurarnos de que funcionó. De acuerdo, ahí vamos. Así que uso esto todo el tiempo.

A veces hago un componente de Alpine solo para usar refs para poder extraer cosas del DOM de manera más predecible, programáticamente, como quieras llamarlo. Bien, limpiemos un poco este componente. Si en realidad no estás usando 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 colocarla en línea justo aquí, ¿de acuerdo? Y eso lo limpia. Ahora, es solo una línea. Y finalmente, también podemos deshacernos de este xref completamente 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. Actualiza, presiona, y ahí tenemos nuestro bonito selector de fechas en una línea de código. Está directamente en línea. El comportamiento está completamente co-localizado con el marcado con el que está relacionado. Y literalmente añadimos 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. Genial.

Así que la directiva final que quiero mostrarte se llama xshow. Así que, naturalmente, un buen ejemplo para xshow es un menú desplegable. Y honestamente, escribí Alpine porque los menús 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 vas a crear algo simple y te das cuenta de que es más difícil de lo que quieres que sea. Y luego vuelves a algo como Vue. Así que Alpine inicialmente comenzó así, quiero un marco con el que pueda hacer fácilmente menús desplegables y modales y alternar cosas así. Y luego se convirtió en esto, por supuesto.

Así que vamos a crear nuestro pequeño menú desplegable. Este va a ser nuestro botón de mostrar menú desplegable, y luego este va a ser nuestro contenido del menú desplegable. Vamos a echar un vistazo a esos en la página. Mostrar menú desplegable y contenido del menú desplegable.

Así que lo que queremos que suceda es que queremos que el contenido del menú desplegable esté oculto por defecto. Así que primero vamos a inicializar este componente. Así que xdata, y esto va a ser open, es false. Y ahora, el contenido del menú desplegable, podemos vincularlo a ese Booleano con xshow. Diremos xshow, open. Y recuerda, esto es solo otra expresión de JavaScript. Podrías poner, literalmente codificar true aquí. Podrías hacer lo que quieras. Llamar a un método, no importa. Así que xshow, open. Así que ahora, si actualizamos, esto debería desaparecer, y lo hace.

Así que ahora queremos escuchar un clic en mostrar menú desplegable, establecer open en true, y debería reaccionar. Así que hagámoslo. Así que escucharemos un clic y luego diremos open equals true. Bien, actualiza. Y ahora, si presiono mostrar menú desplegable, se abre. Perfecto. La siguiente pregunta es cómo ocultamos el menú desplegable. Así que podríamos hacer de esto un toggle, para que cuando hagamos clic de nuevo, se oculte. Pero en muchos casos como este, con menús desplegables y modales, quieres poder hacer clic fuera de la cosa que se muestra como una forma de ocultarla. Y hacer eso es en realidad un poco molesto. Así que añadí un pequeño ayudante dentro de Alpine. Si escuchamos un clic en el contenido del menú desplegable en sí, podemos añadir un modificador llamado away. Así que podemos decir añadir click dot away. Y ahora estamos diciendo que cuando hacemos clic fuera de este elemento, ejecuta este JavaScript y estableceremos open igual a false. Así que échale un vistazo. Actualiza, mostramos menú desplegable.

Ahora hacemos clic fuera y el menú desplegable ahora está oculto. Perfecto. Así que obtienes este comportamiento complejo de delegación de eventos. Si alguna vez has intentado implementar esto tú mismo, es un poco complejo y simplemente lo obtienes 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 escape para ocultar ese modal. O perdón, el menú desplegable. Podría ser modal, lo que sea. Déjame mostrarlo.

Ahora quiero presionar escape y ocultarlo. Así que si presiono escape, nota que mientras no pasa nada y luego mostrar menú desplegable obtiene una especie de contorno de enfoque. Así que eso es porque estamos escuchando la tecla escape en este elemento. Y lo que realmente queremos hacer es escuchar la tecla escape a nivel de todo el documento para que cuando presionemos escape en cualquier parte de la página, lo oculte. Así que podemos hacer eso con otro modificador realmente útil llamado window. Puedes añadir dot window a cualquier oyente de eventos y luego escuchará a nivel de ventana. Así que actualicemos. Mostramos el menú desplegable, presionamos escape y ahora lo ocultamos.

Así que sigamos con estos modificadores de conveniencia. Para X show, también añadí otro llamado transition. Así que podemos decir X show dot transition y ahora cuando mostramos el menú desplegable, obtenemos una agradable transición de entrada y salida. Y estamos en zoom, así que es posible que ni siquiera lo hayas visto. Puedes configurarlo con más modificadores. Así que digamos que haremos esto de 2,000 milisegundos de duración. Así que va a ser una transición completa de dos segundos para mostrar el menú desplegable. Y ahora transiciona con opacidad y escala durante dos segundos y luego hará la transición de salida. Y realmente me preocupé por los detalles de este sistema de transición.

Es bastante robusto y utilicé todos los valores predeterminados de las especificaciones de movimiento de Material Design. Así que está realmente bien pensado. También puedes personalizar. Puedes decir solo transición de entrada, solo transición de opacidad, todo tipo de cosas así. Y si vienes de Vue y estás acostumbrado a V transition y a usar clases utilitarias de Tailwind, también hay X transition que funciona exactamente de la misma manera y te da todo el poder.

Bien. Así que eso es XShowDropDownContents. El paso final aquí es, digamos que estás repitiendo cosas alrededor de tus expresiones y tal vez quieras extraer algo de esta lógica en un archivo JavaScript separado. Tal vez la marca mezclada con el comportamiento es un poco demasiado para ti. Aunque, 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 una etiqueta de script exponiendo una función. Así que expongamos una función llamada dropdown que devuelve un fragmento de datos. Y ese fragmento de datos es open, false. Bien. Y así aquí podemos realmente ejecutar esta función, dropdown, y eso va a dar a ese componente los datos. Y además, puedes crear métodos. Así que podríamos decir show, y luego this.open equals true. Y ahora open equals true podría simplemente referenciar el método show. Y si actualizamos, presionamos ShowDropDown, y ahí vamos.

Así que eso es Alpine. Solo hemos pasado por ocho de las directivas. Pero también hay XIF, hay X4. Hay mucho más poder para ti. Es mi oda a la simplicidad y el minimalismo. Es mi navaja suiza de JavaScript. Son siete y medio kilobytes 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á allí. Hay un montón de ejemplos útiles. Y eso es todo.

Espero que realmente te guste. Y debo decir que trabajo en estas cosas a tiempo completo. Trabajo en Liveware y Alpine a tiempo completo. Y básicamente dependo completamente de los patrocinadores de GitHub para mis ingresos. Así que si usas Alpine y realmente te gusta, dirígete a mi página de patrocinadores y dame un patrocinio. 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 es que voy a lanzar un curso sobre VS code. Así que hago mucho screencasting y mucha gente dice, ya sabes, me encanta tu configuración, tus atajos de teclado, todas estas cosas. ¿Cómo lo configuras? ¿Qué extensiones usas? Y resulta que soy bastante exigente con mi configuración de VS code. Así que comencé una lista de correo. Y si te interesa, ve a makevscodeawesome.com y puedes inscribirte en esta lista de correo. Básicamente empiezo como, aquí está VS code recién instalado. Es un poco desagradable, muy distraído. Y aquí está cómo llegamos a algo más minimalista y limpio. Y profundizo en muchos consejos de flujo de trabajo de VS code. Así que si me das tu correo electrónico, te enviaré cosas de inmediato. Recibirás un montón de consejos de inmediato. Y luego eventualmente lo pondré en un curso. Así que si estás interesado en eso, échale un vistazo.

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

Toda la bondad ahí. Gracias. Por suerte, tenía tanto cerebro que aunque explotó, aún puedo continuar.

Caleb, por favor únete a mí en el escenario de interrogación donde interrogaré sin piedad tus preguntas hasta que llores o pidas clemencia. Perfecto.

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

Caleb, muchas preguntas de la comunidad para ti. Estoy tratando de asegurarme de no hacer todas las relacionadas con el rendimiento para que no termines repitiéndote demasiado. Pero mencionaste tamaños de archivo más pequeños como el principal punto de venta de Alpine. ¿Cómo se compara con React y Vue en términos de rendimiento? No creo que sea su principal punto de venta. Diré eso. Creo que en general, todo el tema del tamaño del archivo es un poco una distracción y caigo presa de ello totalmente, porque también lo idolatro. Pero en realidad, lo más importante para mí es la experiencia del desarrollador y la productividad. ¿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. Prioridad máxima. Ese es su punto de venta. El tamaño del archivo es un pequeño efecto secundario divertido que puedo decir, tamaño de archivo de un solo carácter, minificado y comprimido. Así que diré eso. Esa es la advertencia. ¿Cómo se compara en términos de rendimiento? Comencé a investigar esto. Estoy trabajando en la próxima versión importante de Alpine y el rendimiento va a ser el objetivo principal en la próxima versión importante. El objetivo de esta versión era llevar la API a donde la quería. Y diré que es bastante rápido porque lo que está bajo el capó de Alpine, no hay compilación y parcheo de dom virtual ni nada de eso. Son todas APIs nativas del navegador. No sé cómo crear un marco de dom virtual, así que comencé con lo más mínimo que pude. Yo estaba como, bueno, así que una directiva xtext, eso tomaría el elemento y establecería su dot intertext a ese valor. Así que comencé allí y luego construí a partir de eso.

Diré que la versión prototipo para v3 es más rápida que view 2, lo cual imagino quién sabe qué view 3. Y no quiero comparar, a este nivel de comparación de rendimiento, hice un x4, que es lo mismo que v4, de como, no sé, sin importar cuántas miles de filas, como 30 o 40,000. Y luego realmente empiezas a notar la diferencia. Y sí, porque tengo la ventaja de no lidiar con un compilador de plantillas. Así que eso es agradable. Me permite actualizar solo las partes del dom que necesitan actualizarse cuando una pieza de datos cambia. Así que la próxima versión de Alpine, estoy súper emocionado de ponerme realmente nerd 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, eso es bueno. Así que dejando de lado el tamaño del archivo, no vas a, no voy a dar a mis usuarios un golpe de rendimiento si elijo usar Alpine por su mejor experiencia de desarrollador. Sí, no. Y la mayoría de las cosas que la gente está haciendo es alternar cosas. Como hacer un menú desplegable y un modal y un pequeño deslizador. Y esto es genial para eso. Esa es la esencia de Alpine, 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, lo que sea un generador de sitios estáticos o una aplicación Rails o aplicación Laravel o Django o Express o algo que produzca HTML desde el backend. Y en ese caso, estás agregando comportamiento. Es JavaScript sprinkle. Así que el rendimiento es una de esas cosas que me encanta explorar. Pero en realidad, podría salirme con la mía. Y la gente ni siquiera lo sabría a menos que estuvieran haciendo cosas para las que tal vez Alpine no es ni siquiera bueno, como reemplazar toda tu plantilla de front end por Alpine. Así que no sé si escuchaste en mi introducción, estaba alabando las virtudes de jQuery, pero ¿sería justo decir que esto es algo así? Puedo usar PHP o lo que sea para producir mi HTML y luego agregar tanto o tan poco jQuery como quiera para hacer el trabajo pesado de alternar cosas y jugar con elementos individuales del DOM. Exactamente. Sí. Y de ahí nació, de ser un desarrollador de Laravel, volviendo un poco a esos caminos. Así que si estás en un contexto de backend tipo MVC, como Rails o Laravel o algo así, Alpine es justo eso.

Y es mucho de... Así que se sitúa entre jQuery y algo como Vue, donde te da algo de la reactividad elegante de Vue, pero te da la simplicidad del CDN de jQuery. No hay necesidad de compilar. No hay webpack. No hay nada de eso. No tienes que hacer esas cosas. Y ni siquiera se recomienda que lo hagas porque estás añadiendo comportamiento aquí y allá.

Así que sí. Es interesante que hayas hablado de Laravel porque aquí en mi ciudad natal de Birmingham en el Reino Unido hay una tienda web muy agradable 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 tan bien con Laravel. Creo que sin darse cuenta de que estabas conectado al proyecto Laravel. Pero suficiente sobre mi opinión personal al respecto. Pasemos a otra pregunta.

Mencionaste que no hay vDom, Virtual Dom. Así que Vlad Stavisky pregunta, ¿cómo funciona para el renderizado si mutas algunos elementos del Dom al mismo tiempo? ¿Alpine los vuelve a renderizar todos al mismo tiempo o sucesivamente? Sí, así que hay un par de respuestas diferentes a esto. Supongo, ¿qué quieres decir 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? Así que como en nuestro ejemplo de contador, cambiarías el conteo y luego el Dom se actualizaría. Así que ahora mismo, recorro el Dom. Para ese renderizado inicial, estoy recorriendo el Dom. Y estoy configurando cosas a medida que lo recorro. La próxima versión de Alpine, estoy bastante emocionado, porque en ese primer renderizado inicial, a medida que recorro, realizo acciones. Así que cuando llego a, digamos, un div con xtextcount, lo que sea, cuando llego a eso, envuelvo esa expresión donde realmente ejecuto .innertext donde lo configuro en una función observable. Así que ahora cada vez que los datos que se usaron para generar ese .innertext cambian, solo eso se ejecutará. Así que solo esas piezas de JavaScript se ejecutarán. No hay renderizado de Dom virtual ni nada de eso. Luego uso un observador de mutaciones para reinicializar cosas que se añaden después del hecho o eliminar cosas que se eliminan. Es robusto.

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 un sistema impulsado por un Dom virtual completo que posee el Dom. Quiero que sea algo que manipule el Dom según sea necesario.

Entendido. Es interesante que digas que cuando te arrastras, haces acciones, porque mis amigas me dicen que cuando estoy borracho, soy muy parecido, de hecho. ¿Es eso cierto? Sí. Un pequeño consejo de relaciones públicas. No digas que te arrastras sobre el Dom. Di que te deslizas sobre el Dom. Da la idea de que no eres lento, como directamente desde el exterior. Sí, correcto. Buena llamada. Buen consejo de marketing. Sí. No hay problema. De nuevo, 10% por eso. Por supuesto.

Otra pregunta interesante, no sobre tecnología profunda o rendimiento. Naomi Meyer dice, gran charla, Caleb, con un emoji que parece una zanahoria, pero sospecho que podría ser algún tipo de cosa de fiesta. Tengo una vista terrible. Y luego dice, ¿Alpine soporta funcionalidad o componentes de internacionalización y localización? Sí, supongo que diré que no. Diré que, como, estoy usando Alpine con Laravel la mayor parte del tiempo, y Laravel tiene muy buen soporte de localización, así que eso está cubierto con Laravel. ¿Es esa la pregunta? ¿Eso responde a la pregunta? Sí. Sí, creo que sí. Entonces lo que estás diciendo es que no, no lo hace, porque ese no es su objetivo, el objetivo es producir el HTML. ¿Es un patrón razonable? Sí, así que como el backend es lo que produce el HTM... Alpine es lo 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. Y tenemos muchas más preguntas, pero la voz de Dios en mi cabeza me dice que se nos ha acabado el tiempo, Caleb. Muchas gracias por responder las preguntas, y por favor, si pudieras ir a la Sala de Zoom para los poseedores de boletos pagados, tienes la oportunidad de interrogar a Caleb. Espero no haberte hecho llorar con mis preguntas despiadadas allí, Caleb. Lo estoy aguantando. Muchas gracias. Buen hombre, buen hombre.