Di no a la complejidad con AlpineJS

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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ó.

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.

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.

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.

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.