Un código para gobernarlos a todos

¿Qué tal, React Summit, y bienvenidos a mi charla, Un Code para gobernarlos a todos. En esta charla, voy a mostrarte cómo puedes utilizar React Native y no solo construir aplicaciones móviles, sino también tener una excelente salida web.

Así que comencemos con una breve introducción. Soy Simon. Es posible que me hayas visto en algún lugar de Internet antes. Dirijo una plataforma llamada galaxies.dev. Vivo aquí en la hermosa Münster, Alemania, con mi esposa y mi hija, y cuando no estoy programando, definitivamente estoy corriendo o haciendo ejercicio en el jardín.

Pero en esta presentación, quiero llevarte en un viaje. Así que soñemos. ¿Qué tal si pudiéramos construir para todas las plataformas? Eso significa para iOS, Android, para la web y hacerlo desde el mismo código base. También hay una pequeña estrella aquí porque hay algo que debemos saber, y es que si queremos construir para todas las plataformas, también queremos respetar las plataformas. No queremos comprometer lo que hace que estas plataformas sean geniales desde el principio.

Esto siempre ha sido el sueño de las aplicaciones multiplataforma, de las aplicaciones universales. Y, por supuesto, hay algunas soluciones disponibles desde hace años. La más popular es probablemente Flutter. Hay opiniones mixtas sobre Flutter, pero el problema básico es que Flutter generalmente renderiza tu aplicación y la dibuja píxel por píxel, y no está utilizando realmente lo que hace que estas plataformas sean geniales. No está utilizando las características nativas reales de esas plataformas. Luego tenemos otras soluciones. He sido un gran fanático de Ionic en el pasado con Capacitor. Si no conoces esto, básicamente envuelve tu aplicación web en una vista web y la coloca en una aplicación. Esto suena peor de lo que realmente es. Esta es una solución legítima en muchos casos, pero estás ejecutándote en una vista web, por lo que no estás mostrando realmente nada que sea nativo. Luego tenemos otras soluciones como Kotlin multiplataforma. En el mundo .NET hay Maui, viene Tori con Rust. Hay muchas soluciones diferentes, pero todas tienen algunas limitaciones. Y luego, por supuesto, tenemos React Native, pero con React Native, el enfoque principal en el pasado era hacer una excelente aplicación para iOS y Android. Pero, ¿qué pasa si también quieres tener una aplicación web? Bueno, en algún momento introdujeron React Native Web, pero nunca funcionó realmente de la manera que queríamos. Así que ahora hay nuevas formas. Y esto es lo que quiero mostrarte. Ahora puedes utilizar React Native con Expo, que de todos modos es una gran recomendación, pero con el enrutador Expo.

Y con el enrutador Expo, tenemos un montón de nuevas opciones para construir nuestras aplicaciones. Y el sueño del que hablamos, ¿qué tal si pudiéramos construir para todas estas plataformas desde una base de código, está empezando a hacerse realidad. Permíteme mostrarte algunas características del enrutador Expo.

Entonces, ¿por qué deberías considerar el enrutador Expo? Comencemos con una visión general con esta excelente imagen de la introducción del enrutador Expo versión 2. Por cierto, ¿sabías que esto se llama estilo Bento? Aprendí esto de mi diseñador. Como estas cosas, lo has visto todo el tiempo en Vercel, Next.js. Creo que se llama estilo Bento.

Entonces, ¿por qué el enrutador Expo? El enrutador Expo introduce muchas cosas geniales en una aplicación de React Native. Quizás la más importante sea el enrutamiento basado en archivos. Porque con el enrutamiento basado en archivos, puedes obtener la misma URL en la web si construyes tu aplicación para la web, y también puedes usar ese esquema para tus aplicaciones nativas para navegar. Funciona realmente muy bien. Pero más allá de eso, hay muchas otras cosas interesantes en las que vamos a adentrarnos. Soporte de CSS, rutas de tipo, rutas asíncronas. Y además, esto fue solo la versión 2 del enrutador Expo. En este punto, también hemos visto la versión 3 del enrutador Expo, que introdujo rutas de API. Por lo que puedes tener rutas de API junto a tu aplicación de React Native, lo cual es un concepto súper interesante y se relaciona con este concepto de que todo vuelve a ser uno. Hemos visto esto, por ejemplo, con Next.js, con componentes de servidor, las rutas de API. Todo está volviendo al punto de partida de los viejos tiempos de PHP, pero de una manera mejor, por supuesto. Esto también está sucediendo para React Native. Podemos ver aquí que también podríamos tener rutas de API en nuestro proyecto con el enrutador Expo. Estas fueron solo las versiones 2 y 3.

En este punto, en React Summit, probablemente la versión 4 del enrutador Expo esté disponible con nuevas características y una versión realmente estable que podemos usar en nuestra aplicación. Más sobre cómo podemos usar el enrutador Expo en un segundo. Echemos un vistazo más de cerca a estas características. Por ejemplo, la primera que te di es el enrutamiento basado en archivos. El enrutamiento basado en archivos es probablemente popular para todos los que han usado Next.js, Swellkit, cualquier tipo de marco de trabajo de pila completa popular en estos días. Y funciona exactamente igual para aplicaciones nativas con React Native. Podemos tener una carpeta, luego tenemos un archivo home.tsx y luego tenemos una definición de pila y tenemos este archivo post con corchetes, lo que significa que esta es una URL dinámica. Podemos pasar un ID o un ID de publicación a esa página y es increíble cómo funciona. Es un cambio completo de mentalidad para los desarrolladores nativos porque generalmente pensamos en pantallas y páginas, pero si adoptamos este concepto, también podemos construir fácilmente para la web porque todas estas cosas se convertirían en /home, /home/new y podemos aprovechar eso a nuestro favor.

También, si más adelante hablamos de enlaces universales que pueden saltar directamente a tus aplicaciones. Otra cosa son los diseños web porque no quieres simplemente escribir un code que se vea igual en la web y en el móvil. Simplemente no es bueno. En lugar de eso, podemos tener archivos de diseño donde definimos si la plataforma es la web, entonces podemos usar un code diferente. Si la plataforma en la que estamos ejecutando es iOS, Android u otra plataforma nativa, usamos una implementación nativa y eso nos da la oportunidad de construir desde una base de código pero aún así respetar las plataformas. Todavía podemos tener una barra de pestañas nativa, una pila nativa o una navegación por dibujo y en la web podemos tener un menú en la parte superior o lo que quieras tener. Ya ves esto en esta imagen que en realidad estamos usando CSS. Este es un code real de una aplicación nativa de React porque con Expo Router en realidad tenemos soporte CSS. Estamos un poco limitados aquí todavía, pero está mejorando y es increíble ver que podemos llevar esto a proyectos nativos de React. Si nos detenemos un momento aquí y pensamos en esto, esto también significa que en el futuro podremos incorporar cosas como Tailwind CSS, que probablemente sea la biblioteca más popular en la web en este momento. De hecho, ya está funcionando ahora mismo. Hay una biblioteca llamada Native Win que podemos usar, lo que nos permite usar Tailwind CSS tal como está en React Native. Todo se está uniendo en este mismo lugar. No quiero emocionarme demasiado con CSS porque hay muchas más cosas.

Además, por supuesto, tenemos rutas de API. Este es solo un ejemplo sencillo de lo que es posible, pero en muchos casos necesitas una forma sencilla de ocultar tu clave de API. Digamos que quieres comunicarte con la API de OpenAI. No quieres poner tu clave de API en una aplicación React nativa porque todas las claves que tienes en tu aplicación son básicamente públicas. Trata tu aplicación nativa como si fuera un sitio web, como una aplicación pública. Con las rutas de API, podemos tener nuestra clave en un entorno seguro del lado del servidor. Todavía está en el proyecto React nativo, pero no se incluirá en tu aplicación móvil real. Esto solo está en esta función de borde que luego puedes implementar en algún lugar.

Esto es súper interesante y hay mucho más. Probablemente lo viste en la pantalla de Bento. Tenemos tipos estáticos. Tenemos alias. Tenemos rutas asíncronas y división de paquetes y mucho más. Solo queríamos centrarnos en estas pocas cosas aquí. Permíteme darte un ejemplo de cómo podría verse en la realidad. Usé esto en uno de mis talleres y creamos una aplicación que tiene una barra de pestañas. Tiene una navegación por dibujo en el móvil y en la web una imagen completamente diferente. Puedes reutilizar todas las páginas que tienes en esa aplicación móvil, pero en la web, por lo general quieres tener efectos de desplazamiento, botones. Quieres tener un menú en la parte superior. Todo esto es posible con las cosas que te mostré antes. Diseños personalizados. Puedes tener archivos de componentes personalizados utilizando las extensiones. Puedes tener un archivo con .web, .native y se utilizarían diferentes archivos y componentes. Funciona muy bien con ExpoRouter. Esta probablemente no sea la demostración más emocionante.

Lo más emocionante es lo que ha hecho el creador de ExpoRouter. Evan Bacon es el creador de ExpoRouter junto con su equipo. Su blog utiliza ExpoRouter. Puedes verlo en evanbacon.dev. Si ves la pantalla completa, verás un sitio web regular. Se ve genial, funciona muy bien. Si luego pasas a una versión más pequeña o lo navegas desde tu dispositivo móvil, verás que se convierte en una barra de pestañas porque también está utilizando diferentes diseños web nativos. Por supuesto, esto aún no es un diseño nativo, pero dentro de una aplicación, usaría una barra de pestañas regular.

Lo mejor de todo es que también puedes obtener todo el código de esto. Si estás interesado en ver lo que es posible con ExpoRouter, te recomiendo encarecidamente que consultes el repositorio en GitHub de evanbacon.dev, donde compartió todo esto. También está utilizando rutas de API, creo que para la generación de imágenes OG, una forma realmente inteligente de utilizar todo lo que están haciendo con ExpoRouter en este proyecto. Creo que es justo decir que con React Native es definitivamente posible. Puedes usar ExpoRouter y obtener un resultado realmente genial para tu sitio web. No es como si te enfocaras en lo nativo y luego el web fuera una idea secundaria. No, lo que obtienes con ExpoRouter, si sigues estos mecanismos, si usas las rutas de diseño, las etiquetas meta y todas las cosas nuevas con ExpoRouter, definitivamente es posible construir un excelente sitio web desde tu única base de código. Puedes compartir la mayor parte del código, que es realmente el sueño del que hablamos al principio, y especialmente porque React Native respeta las plataformas subyacentes, respeta la plataforma web, así como Android e iOS, y renderiza los controles nativos.

Con eso, también es justo decir que hay una forma alternativa. ExpoRouter y construir para todas las plataformas aún no es el estándar en la mayoría de las aplicaciones. Por ejemplo, el enfoque probablemente más popular es usar un monorepositorio con Next y Expo o React Native uno al lado del otro. Eso significa que estás usando Next.js para tu sitio web, para tu marketing, lo que sea que sea, y luego tienes una aplicación React Native que se dirige a iOS, Android y tal vez otras plataformas nativas. También es un buen enfoque porque estás utilizando lo mejor de estas plataformas y hay formas de unificar y compartir código. Por ejemplo, hay una excelente biblioteca de Fernando Rojo llamada Soleto, que te permite usar este componente de enlace que utiliza tanto el enlace de Next como el enlace de ExpoRouter, y por lo tanto tienes la misma navegación. Eso también significa que puedes tener componentes que se comparten en la web y en nativo, y simplemente te ayuda a reutilizar parte de tu código. Si realmente te sientes aventurero, también podrías complementarlo con Tamagui. Tamagui es una biblioteca de UI que te permite utilizar componentes de alto rendimiento en iOS y en la web que se ven geniales en todas las plataformas. Solo otra recomendación, si aún no estás listo para ExpoRouter. Esto nos lleva al final de esta presentación. Probablemente deberíamos dedicar un momento para hablar sobre el futuro, porque ExpoRouter ya es genial y está mejorando aún más. La Versión 4, como dije, está a la vuelta de la esquina o tal vez ya se haya lanzado cuando se celebre el React Summit.

¿Qué más hay? Hay una biblioteca llamada ReactStrictDOM, que definitivamente deberíamos mencionar. Fue lanzada como código abierto por Matter hace unos meses y en realidad es un concepto muy interesante de lo que podría ser posible. Todo lo que te muestro aquí es bastante experimental, en los primeros días. No te asustes por lo que verás a continuación. La idea de ReactStrictDOM es que tenemos una separación entre ReactStrictDOM nativo a la izquierda y web a la derecha. Pero escribiríamos el mismo código y simplemente se mostraría de manera diferente en estas plataformas.

Déjame darte un ejemplo claro, porque explicar esto podría llevar un poco de tiempo hoy. Así es como podría verse en realidad. Importamos estos elementos HTML o el elemento div de la biblioteca ReactStrictDOM, y luego lo usamos de esta manera. También podríamos tener nuestras propias cosas como un bloque de ejemplo o combinarlo con otros elementos como un scroll view. Puede que esto te parezca un poco terrible, y estoy de acuerdo en que probablemente no es la mejor manera, porque ninguna plantilla, ningún fragmento de código que encuentres en Internet funcionará si lo haces así. Pero como dije, esto está en sus primeras etapas. Y solo ver que podría ser posible es súper interesante, porque si construyes esta aplicación, que funciona, esto no es una teoría. Este es el código real que probé en un video también. Si construyes esto, puedes construir un sitio web a partir de esto, que muestra las etiquetas div habituales, las etiquetas span o p habituales. Pero si lo implementas como una aplicación nativa en tu dispositivo, en realidad está renderizando vistas nativas de React. Está utilizando la vista UI, la etiqueta UI en iOS y los elementos correspondientes en Android. Por lo tanto, no está renderizando, no está haciendo lo que Capacitor o Ionic están haciendo. En realidad, está renderizando a elementos nativos a partir de código HTML, lo cual es completamente alucinante, como un vistazo al futuro.

Además de eso, por supuesto, tenemos que mencionar los componentes del servidor de React, y solo tenemos que decir que sí, esto también es posible para React Native. Especialmente Shiman Ripshak ha hecho un gran trabajo mostrando diferentes casos de uso de los componentes del servidor de React. Aún así, nuevamente, está en sus primeras etapas, pero debería ser posible más adelante este año usar componentes del servidor de React con React Native. Una vez más, esto me sorprende en lo que es posible, que estamos cargando aplicaciones nativas y luego incorporando los componentes del servidor, pero esto podría ser increíblemente beneficioso para muchas aplicaciones. Todo esto me lleva al punto de que tenemos tiempos realmente emocionantes por delante. Lo primero que te he mostrado hasta ahora en esta charla es definitivamente una posibilidad y está sucediendo en este momento. No es como si estuviéramos soñando con algo que podría o no suceder en algún momento en el futuro. Así que para ser muy claro, Expo Router v4 está a la vuelta de la esquina. Probablemente ya se haya lanzado, tal vez en versión beta, tal vez en versión estable, y después de la versión cuatro, como he hablado con Evan Bacon, veremos un cambio de marca, un cambio de nombre en torno a Expo Router, y luego se convertirá más en el estándar para las aplicaciones de Expo. Así que esto definitivamente está aquí para quedarse. Luego tenemos los componentes del servidor de React, que ya están teniendo lugar en Next.js, pero también llegarán a React Native. Como hemos visto con los ejemplos de Shiman, hay mucho en marcha.

Definitivamente será posible usar los componentes del servidor de React con React Native más adelante este año, lo que una vez más facilita la combinación de nuestro código. Y además de eso, apenas hemos tocado este concepto, pero todo el tema de traer Tailwind-CSS a React Native es fascinante. Hablé con Mark Lawlor sobre esto, el creador de NativeWin, y hay mucho más en esto que simplemente tener Tailwind en React Native. Porque si piensas en esto, si miras el NPM instalado de Tailwind, es enorme. Ha conquistado la web, y si los desarrolladores web pueden reutilizar sus habilidades existentes, no solo las cosas web, que hemos visto que funcionan con React Strict DOM, sino también las cosas de estilo, que ahora han aprendido con Tailwind, y usar exactamente la misma sintaxis para React Native, se abre una nueva puerta para que más personas vengan a React Native, y a su vez construyan aplicaciones universales basadas en estas tecnologías.

Y por último, como la guinda del pastel, Skia, una biblioteca muy popular, y también Reanimated tienen soporte web. Por lo tanto, también podemos usar el mismo código que usamos normalmente para nativo con estas bibliotecas en la web, lo que significa que tenemos una fascinante variedad de herramientas disponibles para construir nuestra aplicación web con React Native. Para concluir, solo quiero usar las palabras de Kasper Kapusiak, quien concluyó la encuesta del estado de React Native diciendo que es difícil no decir que estamos viviendo los mejores años de React Native hasta ahora, y definitivamente no podría estar más de acuerdo. Es emocionante estar aquí. Es emocionante ver a los actores en el espacio, innovando, progresando en todas las bibliotecas, y el entusiasmo en la comunidad es realmente genial.

Esto me lleva al final. Una vez más, soy el creador de galaxies.dev, así que si quieres adentrarte más en React Native, échale un vistazo. También tengo un podcast llamado Rocket Ship, donde hablo con todas estas personas e intento explicar los conceptos de una manera fácil y comprensible. Para terminar, solo quiero darte una cosa en el camino. Por favor, ensúciate las manos. Podemos hablar sobre Expo Router y aplicaciones universales y monorepositorios, pero simplemente haz algo. Pruébalo. Crea una nueva aplicación. Ve cómo funciona. Ve cómo se siente, y rápidamente te darás cuenta de que sí, es posible que un código, un código de React, domine todas las plataformas, no solo la web, sino también la nativa. Gracias por asistir a esto, y nos vemos en uno de los lugares donde puedes encontrarme.