Transcript
00:00:00Primero tuvimos JSX, luego tuvimos TSX, pero llevamos años estancados con esto.
00:00:04¿No se pueden mejorar? Bueno, tal vez con TSRX.
00:00:08Es algo parecido, pero a la vez es diferente.
00:00:10No tenemos una función, tenemos un componente, usamos strings para el texto,
00:00:14hay una sentencia "if" normal aquí dentro, y tampoco hay una sentencia "return".
00:00:17Entonces, ¿qué es esto, por qué existe y deberías usarlo? Vamos a averiguarlo.
00:00:21[Música]
00:00:26Es probable que algunos de ustedes ya hayan visto un código como este antes,
00:00:29y eso es porque en realidad viene de la mano del creador de Ripple.
00:00:31Este es un nuevo framework de front-end que Rich analizó en este canal hace seis meses,
00:00:35así que suscríbete para mantenerte al día con estas novedades.
00:00:38Lo que han hecho es extraer la sintaxis utilizada en Ripple
00:00:41y hacer que funcione con React, Preact, Solid, Vue y, por supuesto, Ripple,
00:00:45y mucha gente estaba bastante entusiasmada con esto.
00:00:47Ahora bien, TSRX se describe a sí mismo como una forma de escribir componentes de UI legibles y unificados,
00:00:52de modo que la estructura, el estilo y el flujo de control convivan en un mismo lugar,
00:00:55y el resultado siga siendo totalmente compatible con TypeScript.
00:00:58Pero a menos que hayas usado Ripple antes, probablemente sigas con dudas sobre lo que eso significa,
00:01:01así que analicemos sus características.
00:01:03Para empezar, esto se usa con archivos .tsrx, lo que significa que necesitamos un paso de compilación,
00:01:07pero es súper fácil de configurar con un plugin de Vite,
00:01:10y también hay otras opciones para otros frameworks y entornos de ejecución.
00:01:13En cuanto a los componentes en sí, en lugar de escribir "function" aquí, escribimos "component",
00:01:17y esto es principalmente una palabra clave para el propio compilador,
00:01:20pero también deja claro que va a contener cierta lógica de renderizado.
00:01:24Yo lo consideraría tal vez como una pequeña mejora en la calidad de vida del desarrollo.
00:01:27Algo a tener en cuenta es que aquí no tenemos ninguna sentencia "return",
00:01:30y eso se debe a que TSRX utiliza un JSX basado en sentencias,
00:01:33así que no necesitas retornar un árbol de componentes,
00:01:35simplemente escribes tu marcado donde quieras que se renderice.
00:01:37Esto significa que podemos soltar otra etiqueta de párrafo encima de esta tarjeta en la parte superior del componente,
00:01:42y se renderizará justo donde se escribió.
00:01:44Aún puedes usar un "return" en un componente, pero tiene que ser uno simple,
00:01:47y solo se utiliza para un retorno anticipado, por lo que la UI y la lógica posteriores se omiten.
00:01:51Me ha ayudado pensar en los componentes de TSRX como algo muy lineal,
00:01:54donde el orden en que escribimos el código fuente es el orden de renderizado,
00:01:57leyéndose simplemente de arriba a abajo,
00:01:59aunque también veo que esto podría dificultar ver rápidamente qué está renderizando un componente,
00:02:03mientras que en algo como React, iríamos directamente a buscar el "return".
00:02:06Otra ventaja del JSX basado en sentencias es que podemos usar un JavaScript mucho más normal.
00:02:10Por ejemplo, el renderizado condicional es súper sencillo.
00:02:13Es simplemente una sentencia "if", con "else-if" y "else" si los necesitas.
00:02:17En las condiciones, solo tenemos que colocar nuestro JSX como una sentencia.
00:02:20Esta misma estructura en React a menudo se convierte en ternarios anidados,
00:02:23porque en JSX, cada rama tiene que ser una expresión,
00:02:26así que me parece que la versión de TSRX a veces se lee más fácil,
00:02:29especialmente cuando tenemos una sentencia más compleja,
00:02:31pero del mismo modo, también veo que esto puede añadir más verbosidad,
00:02:35sobre todo cuando solo necesitas una condición sencilla.
00:02:37Pasa exactamente lo mismo con las sentencias "switch".
00:02:39Puedes usar un "switch" normal de JavaScript con tus casos
00:02:41y el JSX que quieras renderizar para cada uno.
00:02:44Esto es un poco más sencillo que cómo lo manejarías en React,
00:02:47donde necesitas una función para utilizar el mismo patrón,
00:02:49así que TSRX es un poco más limpio aquí,
00:02:51pero un aspecto que personalmente me gusta menos de TSRX es el renderizado de listas.
00:02:55Aquí dejamos de lado el ".map" y en su lugar usamos un bucle "for-of",
00:02:58y TSRX de hecho ha extendido este bucle para que podamos obtener el índice
00:03:01así como una identidad estable con la clave ("key").
00:03:03Luego, cuando quieras omitir un elemento, puedes simplemente usar "continue",
00:03:06así que, de nuevo, se acerca un poco más al flujo de JavaScript puro,
00:03:08pero como dije, en mi caso, me he acostumbrado mucho a usar ".map", ".filter", etc.,
00:03:12así que probablemente me quede con eso,
00:03:14y también vale la pena señalar que no puedes usar otros tipos de bucles
00:03:17como "for", "for-in", "while" y "do-while".
00:03:19Esto funciona únicamente para el bucle "for-of".
00:03:21Siguiendo con la tendencia de usar JavaScript normal,
00:03:23la forma de hacer límites de error ("error boundaries") en TSRX es con un simple bloque "try-catch".
00:03:27Nada del otro mundo y bastante autoexplicativo.
00:03:30También podemos usar el mismo bloque "try-catch" si necesitamos límites asíncronos,
00:03:33donde simplemente necesitamos añadir un bloque "pending"
00:03:35y luego escribir tu componente de carga ahí dentro.
00:03:38El compilador se encarga de tomar este código
00:03:40and resolverlo para cualquier framework que estés usando,
00:03:42así que en React, Preact y Solid, esto utiliza "lazy",
00:03:45y en Ripple, utiliza el equivalente de Ripple.
00:03:47Hablando específicamente de React,
00:03:48las características que hemos visto hasta ahora
00:03:50parecen permitirnos romper una de las reglas clave de React,
00:03:53la regla de los hooks.
00:03:54Ahora podemos colocarlos después de condiciones y retornos anticipados,
00:03:57e incluso dentro de bucles.
00:03:58Todos funcionarán con normalidad.
00:04:00Esto nos permite organizar mejor nuestro código cerca de donde realmente se necesita,
00:04:03y el resultado final ni siquiera rompe las reglas.
00:04:06El compilador simplemente eleva ("hoist") discretamente cada hook a la parte superior de la función generada,
00:04:09así que React los sigue viendo en un orden estable,
00:04:11pero tú puedes escribirlos donde realmente pertenecen.
00:04:14Para mí, como alguien que ha usado React durante años,
00:04:16esta es una de las cosas que más me cuesta asimilar,
00:04:18y también es una característica donde estamos haciendo que el compilador
00:04:20haga mucha más magia detrás de escena,
00:04:22específicamente en torno a un framework,
00:04:24y creo que si estuviera depurando esto,
00:04:26podría llegar a perderme un poco sobre qué código está en qué lugar.
00:04:28A continuación, sin embargo, tenemos el alcance léxico ("lexical scoping"),
00:04:30por lo que cada elemento anidado crea su propio ámbito,
00:04:32así que podemos declarar una constante "label" en tres bloques "div" diferentes aquí,
00:04:36y no entran en conflicto.
00:04:37Incluso hay una en la parte superior de la función que nada está leyendo,
00:04:40y, de nuevo, no genera ningún conflicto.
00:04:41Lo mismo ocurre con cada sentencia "if", "for", "switch" o "try".
00:04:44Cada una tiene sus propios ámbitos,
00:04:46de modo que las variables que declaramos, las funciones que ejecutamos
00:04:48y los valores que derivamos, no se filtran a los otros ámbitos.
00:04:51Esta es otra de esas características enfocadas en mantener el código unificado,
00:04:54y de nuevo, hace que nuestros componentes se lean de forma lineal, de arriba a abajo.
00:04:57Cambiando ahora de tema, hablemos de los estilos.
00:05:00En TSRX, de hecho tenemos estilos con ámbito local ("scoped styles"),
00:05:02así que puedes colocar un bloque "style" en tu componente,
00:05:04y el CSS que escribas ahí se limita únicamente a ese componente,
00:05:08añadiendo un hash único al nombre de la clase al compilarse.
00:05:11Así que este componente de tarjeta tiene una clase "card",
00:05:13y fíjate aquí, también se intenta usar esa clase "card",
00:05:16pero no recibe nada del estilo de "card",
00:05:17porque no tiene un bloque de estilo propio.
00:05:19No hereda el estilo de su padre,
00:05:21porque no tiene ese hash único.
00:05:22Sin embargo, si quieres compartir estilos entre componentes,
00:05:24TSRX tiene una palabra clave "style",
00:05:26así que el padre pasa el nombre del estilo con esta palabra clave
00:05:29a un componente que acepte "className" como una propiedad ("prop"),
00:05:31y se asegurará de que ese hash único generado vaya junto con él.
00:05:35Así que ahora notarás que tiene el mismo estilo que el padre.
00:05:37También puedes usar técnicamente un selector global alrededor de tus estilos
00:05:40para escapar del ámbito local y aplicar esos estilos globalmente,
00:05:42pero creo que eso se va a volver un poco caótico,
00:05:44y perderás el rastro de dónde provienen tus estilos.
00:05:46Personalmente, soy fan de Tailwind a muerte,
00:05:48así que probablemente no use mucho esta función
00:05:50y me quede con Tailwind,
00:05:51pero no deja de ser bastante genial.
00:05:53A continuación, una característica para aquellos que han estado prestando atención.
00:05:56En los bloques de código que he mostrado,
00:05:57ha habido una pequeña diferencia en la forma en que se maneja el texto en estas sentencias.
00:06:01El texto simple dentro de un elemento tiene que ir entre comillas dobles.
00:06:04No podemos simplemente escribirlo directamente como lo hacemos en JSX.
00:06:07Aún puedes usar valores dinámicos,
00:06:08como en una línea como esta,
00:06:10que está entre dos strings con comillas dobles,
00:06:12y TSRX simplemente concatenará esto en una sola cadena al compilar.
00:06:16Otra opción que tienes es simplemente limitarte a usar un "template literal".
00:06:19Se obtiene el mismo resultado.
00:06:20Para mí, este ha sido uno de los pequeños inconvenientes de usar TSRX
00:06:23porque tengo demasiada memoria muscular de no usar comillas para el texto.
00:06:26Sin embargo, otra característica basada en texto
00:06:27es que TSRX puede manejar cadenas que contienen marcado HTML real,
00:06:31y tienes dos formas de renderizar esto.
00:06:33La primera es simplemente usando la palabra clave "text",
00:06:35que va a renderizar el texto escapado,
00:06:38para que puedas ver la cadena HTML literal,
00:06:40y además está a salvo de ataques de cross-site scripting.
00:06:42Esto es útil cuando quieres garantizar que algo va a ser una cadena,
00:06:45y el origen de esa cadena es un poco ambiguo,
00:06:48por lo que no necesariamente conoces su tipo al escribir este código.
00:06:51La segunda opción es por si quieres renderizar la cadena como HTML,
00:06:54donde simplemente podemos usar la palabra clave "html",
00:06:56y esto lo procesa como HTML real,
00:06:58pero esta característica solo funciona en Ripple, con Vue admitiendo un subconjunto más limitado de ella.
00:07:02Otra característica que no está relacionada con React,
00:07:03pero que podría ser interesante para aquellos que usan Ripple,
00:07:06Vue o Solid, es la desestructuración perezosa ("lazy destructuring").
00:07:08Si desestructuras tus propiedades normalmente en estos frameworks,
00:07:10capturas una instantánea de cada valor en el momento de la llamada,
00:07:12y eso rompe la reactividad por cada acceso.
00:07:14Así que en TSRX puedes simplemente añadir un ampersand ("&") antes de las propiedades,
00:07:18y aunque parece una desestructuración,
00:07:20cada asignación se compila de nuevo a una búsqueda de propiedad donde se utiliza.
00:07:23De este modo, el entorno de ejecución ve cada acceso de forma individual,
00:07:25por lo que las actualizaciones de señales siguen activando los re-renderizados,
00:07:28lo que significa que puedes mantener la comodidad de la desestructuración,
00:07:30y el framework mantiene su reactividad.
00:07:32La última característica que mostraré es una muy simple de comodidad.
00:07:35¿Alguna vez has tenido una propiedad donde el valor que le pasas tiene el mismo nombre que la propiedad,
00:07:40lo más común en algo como una función "on-change"?
00:07:42Bueno, con TSRX puedes escribir esto de forma abreviada,
00:07:45similar a como podemos hacerlo con los objetos de JavaScript.
00:07:47Es limpio y sencillo.
00:07:49Así que, en general, se siente que TSRX intenta mezclar el flujo normal de JavaScript en JSX
00:07:53y también añadir algunas mejoras de calidad de vida,
00:07:55y me gustan bastantes de sus elementos.
00:07:57Sinceramente, creo que su principal problema es que es demasiado de nicho y llega demasiado tarde,
00:08:01especialmente ahora que la IA escribe la mayor parte de nuestro código,
00:08:03y el código que la IA suele escribir mejor resulta ser JSX y React.
00:08:07Dicho esto, le pasé algunas demostraciones a Claude usando TSRX,
00:08:10y logró escribirlo bien basándose únicamente en el archivo "llms.txt" del sitio,
00:08:14pero aun así creo que yo mismo me quedaré con el React normal.
00:08:17El otro inconveniente es que parece, especialmente para React,
00:08:19que esto añade aún más magia de compilación por encima,
00:08:21y también rompe flujos de trabajo que he tardado años en aprender,
00:08:24así que en lo personal no es para mí, pero eso no significa que sea malo.
00:08:27Creo que a la gente que viene de Svelte podría gustarle mucho esto,
00:08:30y si ya has usado Ripple, probablemente ya te encante.
00:08:33Así que déjamelo saber abajo en los comentarios si es así,
00:08:35y ya que estás ahí suscríbete, y como siempre, nos vemos en el próximo.
00:08:40[Música]
Community Posts
No posts yet. Be the first to write about this video!
Write about this video