00:00:00¿Eres un fanático incondicional de Python? Me refiero a si eres de los que solo quiere escribir código Python
00:00:05y nada más. Bueno, si ese es tu caso, tengo justo lo que necesitas. Es un framework llamado
00:00:11Reflex, y su objetivo es eliminar la fricción y la complejidad de convertir código Python full-stack
00:00:17en aplicaciones web listas para producción. En este video, veremos qué
00:00:22es Reflex, cómo funciona y si realmente merece la pena todo el revuelo.
00:00:30El problema principal que Reflex intenta resolver es la necesidad de que los desarrolladores de Python aprendan
00:00:36un stack completamente diferente, incluyendo JavaScript, React, enrutamiento y empaquetadores, solo para
00:00:43crear una interfaz web funcional para su código. Reflex permite a los desarrolladores crear apps full-stack
00:00:50en Python 100% puro, para que puedas centrarte en un solo lenguaje para todo el stack sin
00:00:56cambiar de contexto. También afirman que desde su lanzamiento, los desarrolladores han creado más de 1 millón de apps
00:01:03con este framework y que el 30% de las empresas Fortune 500 lo usan para sus
00:01:10herramientas internas. Además, recientemente han apostado fuerte por la IA y lanzaron una
00:01:15herramienta llamada Reflex Build, que básicamente te permite crear tu app mediante “vibe coding” con un solo prompt.
00:01:21Además, admiten integraciones con otros SDK y herramientas que te permiten conectar fácilmente tu app
00:01:26a otros servicios populares como Databricks, Okta, Stripe, AWS, etc. Todo eso suena impresionante,
00:01:34pero quiero ensuciarme las manos y probar este código por mi cuenta para ver cómo funciona realmente.
00:01:40Empecemos creando un nuevo directorio, ReflexTest, y luego entremos en él. Desde aquí,
00:01:44la documentación dice que podemos ejecutar estos tres comandos para iniciar nuestro proyecto Reflex. Así que empecemos
00:01:48ejecutando pip install reflex y luego reflex init. Aquí se nos ofrece comenzar con una de
00:01:53sus plantillas. Pero para esta demo, vamos a mantenerlo simple y elegir la opción de app
00:01:57Reflex en blanco. Una vez hecho esto, podemos abrir el proyecto en nuestro editor de código. Si abrimos la
00:02:02carpeta reflex_test, aquí es donde vive toda nuestra aplicación en el archivo reflex_test.py. Podemos ver que
00:02:09tiene una sección de componentes RX y una clase de estado. Ejecutemos Reflex Build en nuestra terminal para lanzar
00:02:15nuestra app. Se inicia nuestra aplicación en el puerto 3000 y podemos ver el resultado aquí en el navegador.
00:02:20Veamos ahora cómo gestiona Reflex el estado. Podemos empezar añadiendo una simple variable de conteo.
00:02:25Y para cambiar este valor, también necesitamos definir una función que se encargue de ello. Justo debajo de la
00:02:29variable de conteo, podemos definir una función de incremento que simplemente aumente el contador en uno. Se
00:02:34recomienda añadir el decorador RX event encima, lo que permite una comprobación de tipos estática adecuada y
00:02:39asegura que los controladores de eventos reciban el número y tipo correcto de argumentos. Luego podemos añadir un
00:02:44botón simple en la sentencia de retorno del componente RX. Nos mostrará el conteo en el campo
00:02:48de texto y activará la función de incremento al hacer clic. Reflex admite recarga en caliente (hot reloading). Así que,
00:02:53si guardamos el archivo y abrimos el navegador, ahora vemos nuestro botón de conteo que incrementa el valor
00:02:58cada vez que lo pulsamos. Ahora intentemos algo más interesante. Vamos a crear un array de elementos
00:03:02en nuestro estado. En teoría, deberíamos poder renderizar estos elementos como una lista haciendo este
00:03:08bucle for en línea. Pero esto no funcionará porque este valor no se conoce en el momento de la compilación.
00:03:13Verás, la forma en que funciona Reflex es que, cuando ejecutas tu app, el front-end se compila a código
00:03:18JavaScript que se ejecuta en el navegador; esto es el “compile time” en términos de Reflex. El back-end se queda
00:03:23en Python y se ejecuta en el servidor durante la vida de la aplicación. Esto se llama “runtime”
00:03:27en términos de Reflex. Por lo tanto, no podemos hacer un bucle for de Python puro en el renderizado del componente,
00:03:32pero sí podemos hacer operaciones de Python puro fuera del bloque de renderizado del componente. Pero, ¿cómo recorremos los elementos
00:03:37en el bloque del componente? Bueno, para este caso, necesitamos definir una función simple render_item que
00:03:42renderizará nuestro elemento así. Y luego necesitamos usar la función RxForEach en el bloque de renderizado
00:03:47del componente para hacer nuestro bucle for. Y ahora vemos nuestros elementos renderizados correctamente en la app. Lo mismo se aplica al
00:03:53renderizado condicional. No podemos usar sentencias if-else normales en el bloque de retorno. En su lugar,
00:03:58necesitamos usar la función RxConditional así. Y si ahora hacemos clic en el botón más de cinco
00:04:02veces, veremos aparecer nuestro texto en la aplicación. Lo último que veremos es cómo podemos obtener y
00:04:08renderizar datos. Para esta demo, vamos a obtener un dato curioso e inútil de la API Random Useless Facts
00:04:12y mostrarlo en un cuadro de texto. Primero, añadamos una variable booleana que indicará si nuestros
00:04:17datos se están cargando y una simple cadena vacía que contendrá el dato. Luego podemos definir una
00:04:22función asíncrona de obtención de datos que pondrá la carga en verdadero. Y luego usará la
00:04:27librería HTTPX para obtener nuestro dato curioso aleatorio y almacenarlo en nuestra variable de estado. También
00:04:33añadiré un ligero retraso de un segundo con asyncio para que podamos ver la carga de datos en tiempo
00:04:38real. Una vez terminada la operación, volvemos a poner el booleano de carga en falso. Fíjate cómo
00:04:43añadimos la operación yield aquí. Cada vez que queramos actualizar la interfaz varias veces en un controlador de
00:04:48eventos, podemos usar yield para enviar una actualización al renderizador. En este caso, en cuanto
00:04:52cambie el estado de la carga, queremos que nuestra interfaz refleje ese cambio. Y no olvidemos
00:04:57añadir las importaciones de HTTPX y asyncio arriba. Por último, en nuestra función de renderizado, podemos hacer una simple
00:05:03función RxConditional para mostrar un indicador de carga o el dato según el estado actual. Y si
00:05:08queremos que esta función se active cada vez que carguemos la página, necesitamos añadir un decorador a nuestro
00:05:12componente RX que activará nuestra función de obtención de datos al cargar la página. Ahora, si recargamos la página,
00:05:18vemos cómo se obtiene el dato curioso aleatorio y se renderiza en la página. Lo último que quiero hacer
00:05:22aquí es mirar la carpeta .web. Como podemos ver aquí, todo lo que acabamos de escribir se compila y
00:05:27se renderiza en una aplicación React internamente, que utiliza Vite y Tailwind. E incluso
00:05:33tiene un React Router para la gestión de rutas. Para ser honesto, en cuanto vi esto, me sentí súper
00:05:38decepcionado. Pensé que habían construido un compilador de JavaScript personalizado o algo original.
00:05:42Pero esto solo significa que Reflex es solo otra capa de abstracción sobre React. Así que tengo
00:05:47sentimientos encontrados sobre Reflex. Por un lado, la idea de tener un único framework full-stack
00:05:53de Python que te permita escribir todo en Python puro es genial. Pero me decepcionó mucho
00:05:59descubrir que, por dentro, solo envuelve una app de React y no usa Python nativo. Esto solo lo hace
00:06:05más enrevesado, porque ahora te ves obligado a aprender una nueva arquitectura y entender cómo
00:06:11maneja Reflex el estado, por no mencionar todos los casos extremos que pueden ocurrir. Para eso, es mejor
00:06:16quedarse con React, porque es un framework sólido y probado en batalla. Si tuviera que crear
00:06:22un proyecto con un back-end de Python, seguiría usando un framework de JavaScript para mi front-end.
00:06:28Reflex no me convenció para pasarme al full-stack solo con Python. Pero esa es solo mi opinión. ¿Qué
00:06:34piensas tú de Reflex? ¿Te gusta esta idea de un framework full-stack de Python como este?
00:06:39Tengo mucha curiosidad por saber qué opinas. Y amigos, si os ha gustado este video, no olvidéis
00:06:44decírnoslo dándole al botón de like debajo del video. Y no olvidéis suscribiros a nuestro canal.
00:06:50Soy Andris, de Better Stack, y os veré en los próximos videos.