스크립트
00:00:00Este es Asterix, la versión propia de Meta de ShadCN, construida sobre nuestra solución de estilos, StyleX.
00:00:05Es totalmente tematizable, tiene licencia MIT y Meta dice que lo han estado perfeccionando internamente
00:00:09durante 8 años en 13 000 aplicaciones. Si eres alguien a quien no le gusta Tailwind o ShadCN,
00:00:15esto debería interesarte, e incluso si te gusta ShadCN,
00:00:18veamos si hay motivos para cambiarse.
00:00:24Sinceramente, me impresiona mucho la cantidad de componentes y funciones con las que se lanzó,
00:00:29demuestra que lo han estado usando internamente durante años.
00:00:32Hay más de 150 componentes accesibles creados sobre React, pero en lugar de repasar esta lista,
00:00:37la mejor forma de mostrártelo es probablemente con nuestras plantillas, ya que muestra todos en conjunto.
00:00:41Tenemos una tabla grupal aquí con secciones de estado y menús desplegables.
00:00:44Tenemos un formulario de pago donde puedes ver todos los elementos individuales que vas a necesitar,
00:00:48junto con el estado del formulario para cosas como mensajes de error.
00:00:50Puedes crear un tablero Kanban de arrastrar y soltar con él, o montar un IDE con pestañas y barras laterales.
00:00:56Sitios de comercio electrónico, también los tiene cubiertos.
00:00:58E incluso un sitio de chat con IA, puede hacerlo, incluyendo un componente de marcado para renderizar la respuesta que recibas.
00:01:03También tiene un botón de suscripción.
00:01:05No, espera, eso es YouTube, pero adelante y haz clic en suscribirte si te gusta lo que hacemos aquí, realmente ayuda.
00:01:10Como puedes ver, Asterix realmente debería cubrir prácticamente todas tus necesidades de componentes,
00:01:14y todos estos componentes provienen de esa biblioteca central.
00:01:16Así que usar esto es igual que usar cualquier componente, y puedes consultar la documentación para ver todas las opciones que tiene.
00:01:23Por ejemplo, un botón puede tener un icono, contenido final, tamaños, variantes, de nuevo, prácticamente todo lo que necesites.
00:01:30Pero ahora entremos en por qué realmente deberías usar esto.
00:01:32El argumento de Meta es que los sistemas de diseño siempre te han obligado a elegir entre dos malas opciones.
00:01:36La primera opción es adoptar un sistema de una gran empresa como Material UI, y ahora todas tus aplicaciones parecen un producto de Google con personalización limitada.
00:01:44La segunda opción es elegir algo como ShadCN, copiar y pegar los componentes en tu proyecto, pero ahora eres dueño del código,
00:01:50por lo que cada proyecto tiene su propia bifurcación de cada componente, y las correcciones ascendentes se vuelven difíciles de seguir porque ahora es tu trabajo actualizar todo esto.
00:01:57Algunas personas no quieren ser responsables de todo ese código de componentes, por lo que Asterix afirma acabar con esa compensación.
00:02:03Con Asterix, el sistema controla el comportamiento, la accesibilidad y la calidad, y los temas controlan cómo se ve,
00:02:08personalizándose a nivel de tokens para cosas como color, tipo, radio, movimiento, todo lo que podrías necesitar sin tener que reescribir un componente nunca.
00:02:14Así que aquí tengo una aplicación que hice usando algunas de esas plantillas del sitio web de Asterix,
00:02:18y este es en realidad el aspecto predeterminado de todos los componentes si no les proporcionas un tema, así que viene con un tema base.
00:02:24Para crear nuestro propio tema, podemos usar la función define theme,
00:02:27y esto viene con un par de características geniales.
00:02:29La primera es la opción de color.
00:02:31A veces sabes cuál debería ser tu color principal de marca, en mi caso es un verde brillante,
00:02:35pero no quieres generar el color de fondo, el color de acento, no quieres pensar en todos esos individuales.
00:02:40Así que con Asterix, si simplemente guardo esto, puedes ver que los genera por mí,
00:02:44así que obtengo un muy buen punto de partida basado solo en un color hexadecimal.
00:02:48Después del color, también tenemos las opciones de tipografía.
00:02:50Esto es bastante autoexplicativo, estamos usando Inter aquí, pero también tenemos una escala.
00:02:54Así que el tamaño base para mi texto va a ser 14,
00:02:57pero luego va a tener una proporción de 1,2.
00:02:59Lo que esto significa es que cada paso que subimos en el tamaño del texto, así que si eligiera el tamaño de texto grande,
00:03:03va a tomar la base y multiplicarla por 1,2, y ese será nuestro tamaño de texto individual,
00:03:08así que está generando todos esos tokens para nosotros.
00:03:10Después de esto, podemos controlar el radio.
00:03:12Esto es bastante autoexplicativo.
00:03:14Si quisiera que nuestros botones fueran redondeados, podría establecer esto en un número alto,
00:03:17y si quisiera que todo tuviera una esquina afilada, podría establecer esto en cero.
00:03:21Después de esto, tenemos la opción auxiliar final, que es el movimiento,
00:03:23y esto esencialmente solo controla la velocidad de animación para cosas como pasar el ratón y presionar.
00:03:27Así que puedes llegar muy lejos con el tema personalizado simplemente definiendo algunas variables aquí,
00:03:31y eso genera todos los tokens para ti.
00:03:34Pero, ¿qué pasa si no te gustan algunos de los tokens que ha seleccionado?
00:03:36Por ejemplo, si quisiera cambiar el color que ha elegido para mi botón secundario aquí,
00:03:40podemos ir a la sección de tokens aquí,
00:03:42y algo muy bueno de este tema y también de esta sección de tokens es que todo es seguro respecto a tipos,
00:03:47así que conoce los tokens que podemos definir realmente,
00:03:49y es por eso que es mejor hacerlo en un archivo de JavaScript o TypeScript en lugar de CSS,
00:03:53ya que podemos obtener esa seguridad de tipos.
00:03:55El color de fondo de ese botón secundario está definido por el token color neutral,
00:03:58así que todo lo que necesito hacer es establecer esto en una matriz donde uno de ellos sea el modo claro y el otro el modo oscuro.
00:04:03Para mí, eso va a ser el mismo color.
00:04:05Si guardo ahora, puedes ver que ha cambiado el color de mi botón secundario,
00:04:08pero tenemos un problema: este texto no se ve bien,
00:04:11ya que he cambiado el color.
00:04:12Así que lo que quiero hacer es cambiar ese color de texto a negro,
00:04:15pero el problema es que eso está definido por la variable color text primary,
00:04:18así que si sigo adelante y guardo esto,
00:04:19puedes ver que cambia mucho del texto en mi pantalla a negro,
00:04:22en lugar de solo el del botón como quería.
00:04:24Así que en lugar de cambiar ese token globalmente,
00:04:26lo que puedo hacer es cambiarlo solo para el componente.
00:04:28Aquí es donde podemos usar la sección de componentes.
00:04:30Digamos que queremos cambiar nuestro botón aquí.
00:04:32Proporciono cuál es la variante, en mi caso secundario,
00:04:35luego puedo poner cualquier variable CSS que quiera aquí.
00:04:37Así que solo quiero que el color sea negro.
00:04:39Así que ahora, si guardo esto,
00:04:40podemos ver que nuestro botón secundario tiene ese color de texto negro,
00:04:42pero nada más ha cambiado ahora.
00:04:44Se limita solo a este componente.
00:04:46La otra cosa genial de esta sección de componentes
00:04:47es que también puedes definir tus propias variantes personalizadas.
00:04:50Así que digamos que quería una variante de botón llamada mi botón.
00:04:52Puedo configurar esto aquí con un color negro y un color de fondo rojo,
00:04:56y luego cuando voy a usar mi botón,
00:04:57todo es seguro respecto a tipos,
00:04:58y sabe que mi botón es una variante válida.
00:05:00Puedes ver aquí,
00:05:01ahora tenemos un botón de suscripción.
00:05:02Así que realmente puedes hacer mucho solo desde esa configuración de tema,
00:05:05ajustando completamente cada parte de cada componente,
00:05:07o solo el estilo general de tu aplicación.
00:05:09E incluso hay algunos temas preconstruidos
00:05:10si quieres empezar desde una buena base.
00:05:12Puedes ver que hay muchas personalizaciones en estos archivos,
00:05:15e incluso puedes extender los temas
00:05:16para que puedas construir sobre uno existente
00:05:18en lugar de hacer uno completamente nuevo cada vez.
00:05:20Todos estos temas también se pueden construir para producción.
00:05:23Así que funciona en aplicaciones renderizadas del lado del servidor como Next.js.
00:05:26Generará estáticamente todo el CSS y JavaScript necesarios.
00:05:28Uno de los grandes beneficios de tener un lugar único como este para tus temas
00:05:31es que ayuda a reforzar la consistencia de tu marca.
00:05:34Este es de hecho un argumento que he visto contra Tailwind,
00:05:36donde como un desarrollador puede escribir cualquier clase,
00:05:38o una IA puede escribir cualquiera,
00:05:40a veces terminas con componentes que tienen una cierta deriva de estilo
00:05:42ya que alguien ha decidido usar su propia clase de Tailwind.
00:05:45Cuando tienes un tema establecido como este,
00:05:46es simplemente más fácil de seguir, ya que todo sucede en un solo lugar.
00:05:49Puedes ver fácilmente las diferencias si quieres ver qué ha cambiado en tu tema,
00:05:53y la IA no necesita pensar en las clases de Tailwind que puede usar,
00:05:56simplemente usa los tokens y los componentes proporcionados.
00:05:58Aunque diré que puedes lograr algo bastante similar
00:06:00con Tailwind y ShadCN,
00:06:01donde defines todo como un token,
00:06:03aunque no es seguro respecto a tipos,
00:06:05así que será mucho más difícil de reforzar.
00:06:06Ahora, además de los temas,
00:06:07también puedes simplemente estilizar un componente directamente
00:06:09si quieres hacer un cambio,
00:06:10y en realidad hay varias formas de hacer esto.
00:06:12La forma recomendada es probablemente usar X-Style,
00:06:14porque eso usa StyleX,
00:06:16que es sobre lo que esto se ha construido,
00:06:17y que Meta obviamente creó.
00:06:19También puedes usar otras bibliotecas como Tailwind,
00:06:21Panda y varias cosas así,
00:06:22o simplemente CSS normal con el nombre de clase.
00:06:24Así que puedes ver aquí,
00:06:25tengo anulaciones definidas en StyleX.
00:06:27Tengo algunos estilos llamados Botón primario,
00:06:29donde quiero que el color sea blanco,
00:06:30y el color de fondo sea rojo.
00:06:32Si ahora solo quiero cambiar un solo botón en esta página,
00:06:34todo lo que necesito hacer es darle la prop X-Style,
00:06:36y pasarle mis estilos de StyleX,
00:06:38y si guardo esto,
00:06:39puedes ver que mi botón Primario ahora se ajusta a esos estilos.
00:06:42Así es como estilizas algo,
00:06:43si solo quieres que sea algo puntual,
00:06:45y no quieres hacer este cambio
00:06:46para todos los botones Primarios.
00:06:47Puedes ver en la documentación
00:06:48todas las diferentes formas que tienes para estilizar un componente.
00:06:51Es súper flexible,
00:06:52pero la que es realmente genial y quiero señalar
00:06:53es este soporte para Tailwind.
00:06:55En realidad lo han hecho
00:06:56con lo que llaman un puente de Tailwind.
00:06:58Así que esto te permite seguir usando Tailwind,
00:07:00pero mapea todos los tokens de diseño
00:07:01de tu tema que configuraste en Asterix
00:07:03a esas clases de utilidad de Tailwind.
00:07:06Así que cosas como tus colores,
00:07:07radio,
00:07:07tamaño de fuente,
00:07:08están todos definidos por el tema de Asterix,
00:07:10pero entonces Tailwind puede usarlos
00:07:11con los nombres de clase de Tailwind.
00:07:13Aunque para mí,
00:07:13probablemente seguiría usando StyleX
00:07:15ya que es sobre lo que se ha construido Asterix,
00:07:17y simplemente creo que mezclar esas bibliotecas
00:07:18va a ser más confusión de lo que vale la pena.
00:07:20Pasando del estilo,
00:07:21otra gran característica de Asterix
00:07:22es lo bien que funciona con la IA.
00:07:24En realidad existe una CLI de Asterix,
00:07:26pero en gran medida no está pensada para uso humano,
00:07:28y está destinada a la IA.
00:07:29Contiene cosas como comandos
00:07:30para buscar toda la documentación
00:07:31sobre cada componente,
00:07:33cargarla en contexto
00:07:34solo para ayudar a tus agentes a trabajar con ese componente,
00:07:36e incluso puede rellenar tu agents.md
00:07:38solo para dar algo más de orientación.
00:07:40De hecho, cuando estuve usando esto
00:07:41en todas mis demostraciones,
00:07:42encontré que hizo un trabajo extremadamente bueno,
00:07:43y encontré modelos como Fable,
00:07:45GPT,
00:07:45todos ellos podían trabajar con Asterix,
00:07:47aunque es una biblioteca relativamente nueva.
00:07:49En general,
00:07:49puedes ver que Asterix es simplemente un sistema de diseño
00:07:51repleto de funciones,
00:07:52y solo repasé los conceptos básicos.
00:07:54Recomiendo encarecidamente revisar la documentación
00:07:55ya que está muy bien escrita,
00:07:57y la mayoría de estos componentes
00:07:58incluso tienen secciones de mejores prácticas,
00:08:00lo cual va a ser muy útil para un LLM,
00:08:02y también hay un patio de juegos
00:08:03si solo quieres probar esto
00:08:04sin tener realmente un proyecto.
00:08:06¿Usarías algo como esto?
00:08:07Hazmelo saber en los comentarios de abajo,
00:08:08espera, suscríbete,
00:08:09y como siempre,
00:08:10nos vemos en el próximo.