Video Summary and Transcription
Esta charla trata sobre el desarrollo de MDX, una combinación de Markdown y JSX, por un desarrollador JavaScript full stack independiente. MDX es una tecnología poderosa que permite la creación de contenido interactivo dentro de las publicaciones de blogs y admite componentes de React. El orador desarrolló RnMDX, una biblioteca MDX adecuada y pulida para React Native, que se puede incorporar en cualquier aplicación React Native. RnMDX proporciona soluciones para problemas comunes con el contenido de Markdown en React Native y permite la representación de contenido MDX en vistas nativas. Traer MDX a aplicaciones nativas es ahora más fácil, y se puede usar para varios propósitos, como servir el diseño de la aplicación desde un CMS o crear revistas o blogs interactivos en línea.
1. Introducción al Desarrollo Full Stack con MDX
Hola, soy Daniel, un desarrollador independiente de JavaScript full stack de Finlandia. Construyo aplicaciones web desde cero hasta la producción, incluyendo la interfaz de usuario, back end, integración de API, bases de datos y servidores. También construyo aplicaciones con React Native. Esta charla es sobre algo que desarrollé, los desafíos que enfrenté y la solución que publiqué en NPM. MDX es una combinación de Markdown y JSX. Markdown es una herramienta simple y estandarizada para crear texto formateado, mientras que JSX lleva el HTML al siguiente nivel. Me arriesgué y probé React.
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.
2. JSX y sus beneficios
JSX permite un código declarativo y una arquitectura basada en composición, facilitando la composición de componentes autónomos. HTML es estático y no es suficiente para las aplicaciones modernas. JSX permite interfaces de usuario dinámicas sin necesidad de renderización en el servidor o manipulación de HTML estático con JavaScript o JQuery.
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.
3. MDX: Una Tecnología Poderosa para Contenido Interactivo
MDX es una tecnología poderosa que combina las capacidades de CSS, JavaScript y Markdown. Permite la creación de contenido interactivo y atractivo, como demos y texto resaltado especial, dentro de las publicaciones de blogs. MDX puede servir cualquier contenido interactivo, facilitando a los escritores la incorporación de componentes multimedia. Admite componentes de React, permitiendo la inclusión de videos, escenas 3D y más. Aunque MDX se utiliza ampliamente en el desarrollo web, su disponibilidad para React Native es limitada.
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.
4. Uso de MDX en React Native con el tiempo de ejecución de MDX
La mejor manera de usar MDX en React Native es utilizando el tiempo de ejecución de MDX. Ejecuta markdown y componentes de React en tiempo de ejecución, pero se debe tener precaución con la entrada proporcionada por el usuario. En mi caso, solo estoy utilizando los escritos de mi padre y mis propios componentes de React.
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.
5. Desafíos en la Representación de MDX en React Native
Para hacer realidad MDX en React Native, necesitaba hacer posible el markdown en React Native. Crear componentes que representaran correctamente MDX tanto en Android como en iOS fue un desafío significativo. Utilicé la biblioteca de renderizado de markdown de React Native como punto de partida y construí componentes nativos para la mayoría de las características de markdown.
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.
6. MDX en React Native: Presentando RnMDX
¡Finalmente, 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. Presentando RnMDX, una biblioteca MDX adecuada y pulida para React Native. Se puede incorporar en cualquier aplicación React Native y renderizar contenido interesante e interactivo compuesto por editores, diseñadores y redactores. RnMDX te permite concentrarte en tus componentes personalizados sin preocuparte por la parte de markdown. Puedes renderizar contenido MDX al vuelo con el tiempo de ejecución de MDX o precompilar MDX en JavaScript con la herramienta de línea de comandos RnMDX. Si quieres seguir el libro, puedes precompilar tu MDX en JavaScript y usarlo en tu aplicación como cualquier otro componente. El núcleo de la biblioteca RNMDX es la colección de componentes Markdown que cumplen con la parte MD de MDX.
¡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
7. Uso de RnMDX para Markdown en React Native
React Native puede ser caprichoso a veces, por lo que hay algunos problemas comunes con el contenido de Markdown que quiero que esta biblioteca resuelva de manera predeterminada. Hacer que todos los componentes de Markdown se vean lo mejor posible en ambas plataformas de manera predeterminada es un área que requiere ajustes continuos. RnMDX proporciona la herramienta de línea de comandos y las instalaciones para precompilar MDX en componentes de React Native. El flujo de trabajo de precompilación requiere un archivo de configuración que especifica la ubicación del contenido y dónde deben terminar los componentes compilados. RnMDX permite la representación de contenido MDX en vistas nativas, lo que lo hace simple y versátil. MDX ahora existe en React Native, y se puede utilizar para diversos fines, como servir el diseño de la aplicación desde un CMS o crear revistas o blogs en línea interactivos con artículos MDX y componentes React.
creando esta biblioteca. React Native puede ser caprichoso a veces, por lo que hay algunos problemas comunes con el contenido de Markdown que quiero que esta biblioteca resuelva de manera predeterminada. Espaciado, altura de línea y tamaño de fuente, donde el tamaño de píxel se ve diferente entre Android e iOS, son solo algunos de los desafíos. Ahora, soy bastante bueno con CSS, pero esto es lo que sentí. Hacer que todos los componentes de Markdown se vean lo mejor posible en ambas plataformas de manera predeterminada es un área que ha, y probablemente, continuará, requiere ajustes continuos.
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
8. Introduciendo MDX en Aplicaciones Nativas
Introducir MDX en aplicaciones nativas es ahora más fácil. Se requiere compatibilidad con React Native, pero después de eso, simplemente dirige tus aplicaciones nativas a tu CMS para mostrar artículos en una aplicación móvil. MDX puede ser utilizado fuera de las aplicaciones de revistas, como en interfaces de tipo chatbot. Dondequiera que haya texto, hay una oportunidad para agregar un estilo original. Las bibliotecas npm son recursos valiosos, y agradezco sinceramente a los contribuyentes. RNMDX es mi paquete npm más ambicioso. Si no puedes encontrar lo que necesitas, considera contribuir con tu solución. Gracias por ver y espero que encuentres útil RNMDX.
geniales componentes React. Si quieres introducirlos en tu aplicación nativa, eso es ahora mucho más fácil. Por supuesto, necesitarías hacer los componentes compatibles con React Native, pero después de eso, es solo cuestión de dirigir tus aplicaciones nativas hacia tu CMS y mostrar los artículos en toda su gloria en una aplicación móvil. Las aplicaciones móviles realmente no son el mejor medio para textos largos, aunque eso no significa que no haya oportunidades para usar MDX fuera de las aplicaciones de revistas. Si tienes una interfaz de tipo chatbot, la discusión ahora puede involucrar cualquier componente React que implementes. Dondequiera que haya texto, al menos hay una oportunidad para agregar un estilo original.
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é.
Comments