Cómo MDX es un cambio de juego para la Documentación de tu Proyecto React

Rate this content
Bookmark
SlidesGithub

La documentación es esencial para cualquier proyecto y realmente puede "hacerlo o romperlo". Sin embargo, la documentación requiere tiempo para redactar y a veces puede ser olvidada, o las actualizaciones y enmiendas a ella quedan atrás a medida que avanza el proyecto. Además, crear tu documentación con Markdown tiene sus limitaciones, por lo que es posible que no termines con el resultado que deseas o que tu colaborador necesita.


Al usar MDX puedes combinar Markdown con código e integrarlo en tu proyecto React. La documentación se convierte en un proceso más eficiente y fluido y, ¿me atrevo a decirlo... divertido?

FAQ

MDX es un superconjunto de Markdown que permite escribir JSX dentro de tus archivos Markdown. Ofrece la flexibilidad de personalizar la salida de Markdown y reutilizar componentes del proyecto, mejorando así la experiencia del desarrollador y la consistencia de la documentación con el proyecto.

Eddie Chow se frustra cuando la documentación no existe, cuando solo incluye ejemplos básicos como 'hola mundo', y especialmente cuando la documentación está desactualizada o es incorrecta, ya que puede guiar a los desarrolladores por el camino equivocado.

Mantener la documentación actualizada es crucial porque los desarrolladores confían en ella para guiar sus proyectos. Una documentación desactualizada puede ser peor que no tener documentación, ya que puede causar más confusión y errores.

Eddie Chow sugiere que la documentación debería tratarse con la misma importancia que el código, incluyéndola en el mismo repositorio y asegurándose de que cada solicitud de extracción con cambios de código también incluya actualizaciones en la documentación.

MDX permite integrar JSX en archivos Markdown, lo que posibilita la reutilización de componentes del proyecto y la personalización de la documentación. Esto mejora la experiencia del desarrollador y mantiene la consistencia visual entre la documentación y el proyecto.

Los documentos son tan importantes como el código según Eddie Chow. Una buena documentación puede marcar la diferencia en el éxito de un proyecto, facilitando la incorporación y mejorando la experiencia del desarrollador.

Una excelente manera de contribuir es revisar la documentación existente y actualizarla sin hacer suposiciones, especialmente si eres nuevo en el proyecto. Esto te permite aportar una perspectiva fresca y mejorar la exactitud de la documentación.

Eddie Jaoude
Eddie Jaoude
28 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Una buena documentación es crucial y puede hacer o deshacer un proyecto. El boca a boca es importante en la industria, y una gran documentación puede atraer usuarios. MDX es una herramienta poderosa para escribir documentación, permitiendo la personalización y reutilización de componentes. La documentación debe ser tratada como código, con pruebas y mejora continua. El uso responsable de la IA es importante, y se debe utilizar un enfoque equilibrado para la documentación, incluyendo comentarios en línea y diferentes formatos.

1. Introducción a Docs con MDX

Short description:

¡Hola, React Day Berlin! Hoy, hablaré sobre Docs con MDX y cómo puede ser un cambio de juego para tu proyecto. La buena documentación es crucial, pero no muchas personas quieren escribirla. La documentación incorrecta y desactualizada me frustra. Mejoremos los números al final de mi charla. Los documentos son tan importantes como el código. Recuerda, cada solicitud de extracción con cambios de código también debería tener pruebas y documentos.

Muchas gracias por esa cálida bienvenida. Bueno, hola, React Day Berlin. Mi nombre es Eddie Chow y estoy súper emocionado de geek con ustedes hoy sobre Docs con MDX y cómo puede ser un cambio de juego para tu proyecto.

Todos queremos buena documentación, pero parece que no muchas personas quieren escribirla. Me frustro cuando los documentos no existen. Y también me frustro cuando tienen un ejemplo de hola mundo. Quiero un ejemplo del mundo real. ¿Pero sabes lo que realmente, realmente me molesta? Cuando la documentación es incorrecta y está desactualizada. Y desafortunadamente, sucede con demasiada frecuencia. Y permíteme aclarar, por bueno, solo quiero decir correcto, actualizado, y se ve bien. No creo que sea demasiado pedir.

Quiero decir, ¿a quién le gusta leer buena documentación? Levantemos las manos. Quiero decir, esperemos que la mayoría de nosotros. Genial. Muchas gracias. Genial verlos a todos despiertos también. Como dije, nada sofisticado, es lo que esperamos. Quiero decir, ¿a quién le gusta escribir documentación? Bueno, algunas personas, algunas personas no están seguras. Bueno, esperemos que podamos mejorar esos números al final de mi charla.

Los documentos son tan importantes como el código. Y si hay algo que debes recordar de toda esta charla, por favor recuerda eso. Podríamos no tratarlo de esa manera, sin embargo. No obtenemos la misma emoción. Y tampoco obtenemos el mismo reconocimiento de nuestros pares. Cuando alguien dice, escribí esta característica genial, utilicé la biblioteca X, y todos están como, oh sí, genial. Y si alguien dice, documenté la característica X, literalmente silencio, no obtienes ese mismo reconocimiento. Y creo que eso también tiene un papel que jugar. Pero esperemos que todos podamos estar de acuerdo en que la documentación es importante, y es nuestra responsabilidad tener buena documentación. Las pruebas también son realmente importantes, pero eso es una discusión aparte, y hablamos de eso ayer aquí en TestJS. Así que creo que cada solicitud de extracción que tiene cambios de código también debería tener pruebas y documentos.

2. Importancia de la Documentación

Short description:

¿Por qué es importante la documentación? La documentación desactualizada puede ser peor que no tener documentación. Puede confundir a los usuarios y causar frustración. Al igual que montar en bicicleta sin frenos, la documentación debe ser confiable. Los pasos faltantes en la documentación pueden llevar a errores y confusión. Es importante contribuir a los proyectos de código abierto revisando y mejorando la documentación.

¿Por qué? Porque todo debe ser revisado. ¿Qué es peor que no tener documentation? Sí, hay algo peor que no tener documentation. La documentation desactualizada. ¿Por qué? Porque la gente confía en ella. Entonces, cuando algo sale mal, es aún más doloroso. Estamos guiando a las personas por el camino equivocado, por lo que no tener documentación puede ser mejor. Las personas saben que deben mirar el código, o intentar descifrarlo, o llamar a un amigo.

¿Alguna vez has montado una bicicleta sin frenos? Yo sí lo he hecho. A principios de este año en Bangkok, estábamos en un hotel, queríamos ir al parque, y nos dijeron que podíamos tomar prestadas sus bicicletas. Pero no tenían frenos. Pero como sabíamos que no tenía frenos, fuimos más despacio. Me aseguré de que Sarah fuera delante, para poder usarla para detenerme. No, solo estoy bromeando. Pero si una bicicleta tiene frenos, esperas que funcionen. Y lo mismo ocurre con la documentation.

Quiero decir, ¿cuántos de ustedes han visto esto antes? Estoy seguro de que lo han visto muchas veces. Mi proyecto principal, y luego no hay documentation. Ese es un escenario. Otro escenario es la documentación con pasos faltantes. Espero que algunas personas puedan gritar cuáles son los dos pasos que faltan aquí. Sí, antes de instalar las dependencias, navega al nuevo directorio que fue creado por el clon de Git, luego instala las dependencias y luego ejecuta npm run dev. No hay nada malo con esto. Esto no es incorrecto. Solo faltan algunos pasos. Si alguien obtiene un error en ese segundo paso y lo busca en Google, probablemente obtendrá, ya sabes, intenta instalar las dependencias. Bien, package.js no se encuentra. Correcto, navega al directorio, instala las dependencias. Y llegarán allí porque esto es genial. Y por cierto, verás esto en muchos proyectos de código abierto, por lo que una excelente manera de contribuir es revisar la documentation y no hacer suposiciones porque si estás familiarizado con proyectos como este, entonces sabrás qué comandos ejecutar. Pero las personas que son nuevas en la tecnología o en el proyecto no lo sabrán.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.
Puerta de entrada a React: La historia de React.dev
React Summit US 2023React Summit US 2023
32 min
Puerta de entrada a React: La historia de React.dev
Un vistazo detrás de las escenas al diseño y desarrollo de los nuevos documentos de React en react.dev. El nuevo react.dev se lanzó este año introduciendo nuevas metodologías como desafíos y cajas de arena interactivas y características de inclusividad sutiles, como el "tono internacional" y ejemplos culturalmente agnósticos. Los nuevos documentos no solo han cambiado la forma en que las personas aprenden React, sino que también han inspirado cómo pensamos sobre la educación de los desarrolladores como comunidad. En esta charla, aprenderá cómo el equipo de React y algunos miembros ambiciosos de la comunidad hicieron que los "documentos de React rock" para una generación de desarrolladores de front end y cómo estos nuevos patrones y técnicas establecidas se pueden aplicar en sus proyectos favoritos.
Opensource Documentation—Tales from React and React Native
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
Documenting components with stories
React Finland 2021React Finland 2021
18 min
Documenting components with stories
Most documentation systems focus on text content of one form or another: WYSIWYG editors, markdown, code comments, and so forth. Storybook, the industry-standard component workshop, takes a very different approach, focusing instead on component examples, or stories.
In this demo, I will introduce an open format called Component Story Format (CSF).
I will show how CSF can be used used to create interactive docs in Storybook, including auto-generated DocsPage and freeform MDX documentation. Storybook Docs is a convenient way to build a living production design system.
I will then show how CSF stories can be used create novel forms of documentation, such as multiplayer collaborative docs, interactive design prototypes, and even behavioral documentation via tests.
Finally, I will present the current status and outline a roadmap of improvements that are on their way in the coming months.
TypeScript para Autores de Bibliotecas: Aprovechando el Poder de TypeScript para DX
TypeScript Congress 2022TypeScript Congress 2022
25 min
TypeScript para Autores de Bibliotecas: Aprovechando el Poder de TypeScript para DX
Usando ejemplos de código abierto de la vida real, exploraremos el poder de TypeScript para mejorar la experiencia de tus usuarios. Cubriremos las mejores prácticas para los autores de bibliotecas, así como consejos y trucos para llevar una biblioteca al siguiente nivel. Esta charla cubrirá:
- cómo aprovechar la inferencia de tipos para brindar ayuda a tus usuarios;- usar tipos para reducir la necesidad y complejidad de tu documentación, por ejemplo, usando sobrecargas de funciones, tipos literales de cadena y funciones auxiliares (no-op);- configurar pruebas para asegurarte de que tu biblioteca funcione (¡y tus tipos también!) con herramientas como tsd y expect-type;- tratar los tipos como una API y reducir los cambios que rompen la compatibilidad al enviar mejoras;- me basaré en mi experiencia con bibliotecas como nuxt3, sanity-typed-queries y typed-vuex y mostraré lo que logramos hacer y lo que haría diferente en el futuro.

La Fuente Legendaria de la Verdad: Componentiza tu Documentación!
React Advanced Conference 2021React Advanced Conference 2021
24 min
La Fuente Legendaria de la Verdad: Componentiza tu Documentación!
"En el Espacio, Nadie Puede Oírte Gritar." Lo mismo ocurre con tu proyecto súper-nuevo-revolucionario: la Documentación es la clave para que la gente hable de él.Crear una documentación bien ajustada puede ser complicado. Mantenerla actualizada cada vez que lanzas una nueva función debe ser una parte desafiante de tu aventura. Hemos intentado muchas cosas para evitar la brecha entre la documentación y el código: documentación generada por código, ejemplos en vivo al estilo de Storybook, REPL...Es hora de una nueva era de documentación donde el contenido orientado a las personas conviva con ejemplos de código: esta charla te guiará desde las Mejores Prácticas de Documentación - cubiertas por años de documentación colaborativa de FOSS - hasta el nuevo y elegante mundo de los Componentes en Markdown: MDX, MDJS, MD Vite, y todo eso.¡Construyamos una documentación brillante para personas brillantes!