¿MDX en React-Native!?

Hola, soy Daniel, un desarrollador independiente full stack de JavaScript de Finlandia. Mi definición de full stack es que construyo aplicaciones web desde cero hasta la producción, lo que significa la UI y su estilo, back end con node, integración de API, bases de datos, servidores, lo que se te ocurra.

También construyo aplicaciones con React Native y sigo asombrado de lo bien que mi experiencia web existente puede aplicarse en esa área. Es tan normal usar una biblioteca específica de JavaScript o React en React Native que los casos en los que no es posible destacan.

Ah, el buen viejo NPM, la tierra santa de los desarrolladores de JavaScript, donde normalmente puedo encontrar un paquete para lo que necesito hacer. NPM proporciona soluciones reutilizables para cada desafío para que pueda concentrarme en la lógica del negocio, ya sabes, lo que la aplicación realmente necesita hacer, sin meterme en las hierbas de desarrollar gestores de estado personalizados o enrutadores o soluciones de estilo o lo que sea. Pero, ¿y si lo que necesitas no existe en NPM? Esta es una charla sobre algo que daba por hecho que existía, pero que tuvo la descortesía de no existir. La solución que desarrollé y los desafíos que encontré en el camino. Y por supuesto, lo publiqué en NPM.

MDX está en el título de esta charla, entonces, ¿qué es MDX? Es una combinación de dos tecnologías, Markdown y JSX. Me doy cuenta de que estas dos pueden ser muy familiares para esta audiencia, pero echemos un vistazo a las fortalezas que cada una aporta a la mesa y imaginemos cómo podría ser un equipo.

El contenido es el rey. Y la capacidad de crear y mostrar contenido es enormemente importante para cualquier aplicación. Si tu contenido es basado en texto, Markdown es una gran herramienta para usar, ya que proporciona todo lo que necesitas mientras es muy simple y fácil de aprender para cualquiera. Con Markdown, puedes escribir texto formateado en cualquier lugar que acepte entrada de teclado. Ya no necesitas un software de procesamiento de texto especializado para eso. Markdown es legible para los humanos tal como está, pero para materializar ese formato, solo necesitas un renderizador de Markdown. Markdown está estandarizado y ha existido durante un tiempo, por lo que hay muchas bibliotecas disponibles para probablemente todos los lenguajes de programación y plataformas. Markdown es casi tan fácil de renderizar, al menos de escribir, debido a que, de nuevo, es solo texto plano. Hoy en día, esperamos que Markdown sea compatible y parece que eso sucedió de la noche a la mañana. Un día, teníamos tantos lenguajes de formato como aplicaciones con áreas de texto, y al día siguiente, Markdown estaba en todas partes. Por supuesto, la gente ha trabajado duro en esto, pero muestra lo importante que era unificar y estandarizar estas simples características de formato y cuánto se necesitaba.

Probablemente no necesito entrar en por qué React es genial, ya que estoy hablando en una conferencia llamada React Advanced, pero quiero tocar el tema de JSX, que React introdujo y popularizó. Mientras que Markdown simplificó el formato de texto e hizo innecesario el HTML para estos casos de uso, JSX lleva el HTML al siguiente nivel. Cuando empecé a programar, mezclar HTML y JavaScript era un no-no. Era tabú, ya que eran preocupaciones separadas. Tenías tu HTML, que decorabas con estilos y scripts. Nunca se encontrarían. Cuando vi JSX por primera vez, fue horroroso, ya que iba en contra de todo lo que había aprendido hasta ese momento. Pero me arriesgué y probé React.

Y desde entonces no he mirado atrás. JSX permite un code declarativo y una architecture basada en composición, donde la estructura de la aplicación está involucrada en la lógica de negocio como un ciudadano de primera clase, en lugar de algo separado y desconectado, que necesitas modificar quirúrgicamente para que refleje el estado actual de tu aplicación.

HTML es estático y por sí solo no es suficiente para las aplicaciones modernas. Se han hecho intentos para hacerlo más dinámico, algunos más exitosos que otros. La renderización de HTML en el servidor funciona bastante bien, pero una vez que el marcado llega al navegador, sigue siendo estático y pedir al servidor que haga actualizaciones que el cliente podría hacer mucho más fácil y rápido es una user experience que huele y sabe a los años 90. Y cuando intentas manipular HTML estático con JavaScript o JQuery, rápidamente se convierte en un juego de Jenga con demasiadas personas moviendo bloques al mismo tiempo.

En contraste, JSX facilita la composición de componentes autónomos que incluyen la lógica, el estilo y el diseño que necesitan para cumplir su tarea. La UI es un producto del estado y no algo a lo que el desarrollador necesita atender por separado. Las interfaces de usuario pueden ser bastante complejas sin que todo se desmorone.

MDX es lo que parece una combinación de estas tecnologías. En lugar de solo tener negrita e itálica, y tal vez algo más, podrías tener cualquier efecto que puedas hacer con CSS y JavaScript. MDX realmente abre de par en par las compuertas de las posibilidades. Es genial para publicaciones de blogs donde puedes agregar una demostración en línea con el texto o usar texto especial resaltado. El blog de Josh W. Como es un gran ejemplo. Habla de cómo lo construyó aquí.

Y de hecho, esta misma presentación está hecha con MDX. Tomé un efecto de texto brillante del blog de Josh, lo solté directamente, y simplemente funciona. Pero eso solo está rascando la superficie. MDX hace posible servir cualquier contenido interactivo a través, por ejemplo, de un CMS, tan fácilmente como servir texto, lo que permite a cualquier escritor componer contenido multimedia atractivo utilizando componentes que produce el equipo de desarrollo. Se ve así. Es en su mayoría solo markdown, pero ¿qué es eso? Un componente de React en el markdown. Sí. Este ejemplo es algo simple. Por supuesto, podemos hacer cualquier componente de React, como este reproductor de video. Aquí está Jay Foreman explicando los barrios de Londres. Es un gran video, pero veamos esto más tarde. Podemos hacer una escena en 3D. Esto es de los ejemplos de React 3 fiber. De nuevo, lo solté directamente, y simplemente funciona. Las posibilidades son infinitas. Al menos para el ámbito web.

¿Pero qué pasa con React Native? Entonces, estoy desarrollando una aplicación con mi padre, que es escritor. Y MDX es la tecnología perfecta para dar vida a su contenido. Y hacerlo interactivo para los usuarios al tejer widgets atractivos y formatos especiales. Fui a instalar la biblioteca MDX para React Native de NPM en nuestra aplicación React Native. MDX es React. React Native es React. Entonces, seguramente existe, ¿verdad? No existía.

Realicé algunas investigaciones, y la mejor manera de usar MDX en React Native es utilizar el tiempo de ejecución de MDX. Que, como su nombre lo indica, ejecuta lo que le des, como el markdown y los componentes de React en tiempo de ejecución. Esto es teóricamente agnóstico a la plataforma, ya que necesita que se le suministren los componentes de markdown que debe usar. Viene con una gran advertencia parpadeante, que ejecuta lo que le des en tiempo de ejecución. Esta cosa no debería estar cerca de la entrada proporcionada por el usuario, a menos que disfrutes siendo hackeado. En mi caso, solo voy a alimentarlo con los escritos de mi padre y mis propios componentes de React. A menos que mi padre realmente quiera demostrar sus habilidades de hacking, el riesgo aquí es bastante bajo.

Entonces, para hacer realidad MDX en React Native, primero necesitaba hacer realidad el markdown en React Native. MDX está diseñado principalmente para uso web y representa el markdown en lo que sea un p, strong, o h1 tag. React Native no tiene idea de qué hacer con eso. Crear estos componentes fue probablemente el mayor desafío al que me enfrenté durante este esfuerzo, ya que MDX puede ser complicado con el espaciado y el estilo de React Native puede ser complicado en general. Tuve que luchar con casos en los que la línea de texto se cortaba verticalmente y un componente en línea afectaba la altura de la línea, entre muchos otros problemas, cuyos recuerdos he reprimido. Necesitaba que los componentes se vieran igual, además de bien, tanto en Android como en iOS. Utilicé la biblioteca de renderizado de markdown de React Native que incluye vistas de markdown nativas como punto de partida, y armé componentes nativos para la mayoría de las características de markdown.

¡Finalmente, MDX en React Native! Como hemos establecido, no había paquetes listos para usar, así que publiqué mi primera solución como un gist. Terminamos la primera versión de la aplicación con una solución MDX con una solución MDX basada en gran medida en lo que publiqué en el gist, pero todavía tenemos planes mucho más ambiciosos para ella.

Después de un largo descanso de code, continué desarrollando la aplicación y quería mejorar las características de MDX específicamente. Seguramente, después de todo este tiempo, alguien más también había necesitado MDX en React Native y había hecho una biblioteca más pulida? No. Después de unos años, los resultados de búsqueda para React Native MDX se ven así en Google. En DuckDuckGo. En Brave. E incluso fui a Bing. Mi gist rápidamente armado sigue siendo la mejor manera de usar MDX en React Native.

Después de esperar que alguien creara una solución, ahora me doy cuenta de que ese alguien era yo todo este tiempo. Y el mundo está listo para una biblioteca MDX adecuada y pulida para React Native. Presentando RnMDX. Algo de esfuerzo más tarde, y es, de hecho, real. Se puede incorporar en cualquier aplicación React Native, incluyendo aplicaciones Expo, y renderizar contenido interesante e interactivo compuesto por editores, diseñadores y redactores. El objetivo de RnMDX es entregar componentes de markdown listos para usar en React Native y permitir al desarrollador concentrarse en sus componentes personalizados, que quieren usar en MDX, sin necesidad de preocuparse por la parte de markdown. Luego renderiza contenido MDX al vuelo, con el tiempo de ejecución de MDX, o precompila MDX en JavaScript con la herramienta de línea de comandos RnMDX. Renderizar MDX con el tiempo de ejecución de MDX es la manera más fácil de desplegar MDX en React Native, y RnMDX lo hace aún más fácil al proporcionar componentes de markdown funcionales y sensibles integrados con MDX. No necesitas nada más, sólo consigue el contenido MDX como una cadena de algún lugar y lánzalo en el tiempo de ejecución. Por supuesto, esto conlleva una sobrecarga adicional, y es muy inseguro. El tiempo de ejecución ejecutará la cadena que le des, montando y ejecutando los componentes React dentro de ella. Así que necesitas asegurarte de que es de confianza y no se pondrá a hacer nada gracioso. No puedo recomendar en buena conciencia el uso del tiempo de ejecución, pero si puedes estar seguro de la confiabilidad del contenido y no te importa la sobrecarga extra, es definitivamente la manera más fácil de ir. Por otro lado, si quieres seguir el libro, puedes precompilar tu MDX en JavaScript y usarlo en tu aplicación como cualquier otro componente. Esto es, por supuesto, más complicado, pero funciona de la misma manera que un generador de sitios estáticos basado en React como Gatsby. El núcleo de la biblioteca RNMDX es la colección de componentes Markdown que necesitas para cumplir con la parte MD de MDX. Continuando desde los componentes que publiqué en el gist y usé en la aplicación que lo inició todo, pasé más tiempo en ellos para asegurarme de que todas las características de Markdown están cubiertas y que son bloques de construcción sólidos para cualquier caso de uso. También es posible anular cualquiera de los componentes de Markdown proporcionando tu propia implementación y asignándola a la clave de la característica MDX que necesita un cuidado especial en tu aplicación particular. En cuanto al estilo, los componentes de Markdown pueden ser estilizados con los viejos objetos de hoja de estilo de React Native o cualquier biblioteca que los extienda. Y los estilos también pueden ser anulados por el usuario, al igual que los componentes. Los componentes de Markdown bajo estilización fue uno de los desafíos con

Y como se mencionó anteriormente, la forma correcta de usar MDX es precompilar el MDX en componentes de React Native y RnMDX proporciona la herramienta de línea de comandos y todas las demás instalaciones que necesitas para este flujo de trabajo. La precompilación de contenido remoto de CMS es, por supuesto, también posible. Es crucial para cualquier tipo de aplicación de contenido, después de todo. Dado que estamos trabajando con aplicaciones nativas, este tipo de flujo de trabajo de precompilación estática no es tan fluido como en el mundo web con, por ejemplo, Netlify, pero es viable usando CodePush o Expo. Entonces, lo que necesitas para el flujo de trabajo de precompilación es un archivo de configuración que le diga a la herramienta RnMDX dónde se puede encontrar el contenido y dónde deben terminar los componentes compilados. Todavía estoy trabajando en este flujo de trabajo, y toda aportación sobre el tema es bienvenida.

Entonces, ¿cómo se ve RnMDX en la práctica? Me alegra haber preguntado. Aquí hay una aplicación simple usando el método de tiempo de ejecución. Veamos la demostración. Aquí tenemos una aplicación muy simple. Es una aplicación expo, y he importado RnMDX. El componente render MDX aquí toma los componentes personalizados que quieres usar en tu MDX y el contenido MDX como una cadena. Luego simplemente los renderiza en vistas nativas. A la derecha, tenemos el contenido MDX que estamos renderizando. Ahí está el texto de color, que es un componente en línea que envuelve el texto. Y luego, tenemos la caja de color, que es un componente de nivel de bloque. Podemos darles props como componentes normales de React, y el resultado está aquí. ¡Voilà! Muy simple. El texto rojo según el valor de la prop, que es rojo, y luego cajas de colores diferentes según sus tipos de prop. Entonces, es muy simple, es versátil, y puedes usarlo para casi cualquier cosa. No impone muchas restricciones que MDX o React Native no imponen.

Entonces, sin más preámbulos, volvamos a la presentación. MDX ahora existe en React Native. ¡Genial! ¿Y ahora qué? ¿Para qué deberías usar realmente esto? La respuesta corta es, para lo que quieras. Es otra herramienta en tu caja de herramientas. Podrías servir todo el diseño de la aplicación desde un CMS como archivos MDX si quieres, pero el primer caso de uso sensato que viene a la mente es una revista en línea interactiva o un blog donde la versión web se ejecuta en Next o Gatsby y ya tienes un montón de artículos MDX con

Es fácil dar por sentadas las bibliotecas npm. ¿Cuántas veces no has encontrado algo que necesitabas? Es un recurso verdaderamente notable y quiero agradecer sinceramente a todos los que contribuyen con código y, más importante aún, tiempo, para el bien de toda la enorme comunidad. Este no es mi primer paquete npm pero es el más ambicioso hasta ahora. Realmente me sorprende que no existiera. Así que la próxima vez que no encuentres algo que necesites, considera contribuir con tu solución. Resulta que eras el que estaba destinado a hacerlo desde el principio. Eso es todo por mi parte. Gracias por ver y espero que encuentres útil RNMDX. Sé que yo lo haré.