Los caminos de Anthony hacia el código abierto - La teoría de conjuntos

Rate this content
Bookmark

Lecciones que aprendí en mi camino hacia trabajar a tiempo completo en código abierto, así como consejos para pensar y hacer que los proyectos de código abierto sean más exitosos.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Anthony Fu
Anthony Fu
37 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Los proyectos de código abierto pueden tener éxito al encontrar una gran intersección de usuarios objetivo. Hacer extensiones universales puede llevar a una mayor popularidad y colaboración. Se fomenta la colaboración entre ecosistemas para crear arquitecturas más mantenibles y extensibles. El apoyo financiero es necesario para que los proyectos de código abierto sean sostenibles. Contribuir al código abierto se puede hacer identificando áreas de mejora y participando activamente en los flujos de trabajo de GitHub.

1. Introducción al código abierto

Short description:

Soy Anthony Fu, creador de Vitesse, LightDate, Unocss, miembro coordinador de Vite, Vue y Nuxt. El código abierto es divertido y gratificante. Hay muchos factores para que un proyecto sea exitoso. Compartiré mi experiencia e ideas en una serie de charlas.

Y es un gran honor estar aquí y gracias por recibirme. Y sí, permítanme presentarme un poco, supongo que soy una cara nueva para React. Así que mi nombre es Anthony Fu y soy el creador de Vitesse, LightDate, Unocss, y también el miembro coordinador de Vite, Vue y Nuxt. También mantengo algunos proyectos y actualmente trabajo en el laboratorio de Nuxt en el equipo de framework, así que también pueden encontrarme con los enlaces a continuación.

Y como pueden ver, a nivel de front-end, como a nivel de framework de front-end, soy bastante de la comunidad de Vue. Y esta es en realidad la segunda vez que asisto a un evento de React. Y este evento es increíble y realmente me hace sentir como en casa porque aquí tenemos el React con un toque de Vue. Sí. Así que gracias a todos por hacer posible este evento y es un gran honor hablar y compartir mi perspectiva con ustedes aquí. Como realmente no sé mucho sobre React para hablar, aquí está el trato. Hablaré sobre algo que les pueda resultar interesante fuera de React y ustedes me enseñarán cómo usar correctamente los ganchos de use-effect más adelante, ¿de acuerdo?

De acuerdo, como pueden ver, estoy trabajando en múltiples proyectos de código abierto y también he creado algunos proyectos que es posible que ya estén utilizando, como por ejemplo, Vitesse, un framework de pruebas único. Y como alguien que ha estado trabajando en código abierto durante un tiempo y ha ganado la vida con ello, tengo que decir que el código abierto es muy divertido y gratificante. Y creo que muchos de ustedes ya quieren contribuir al código abierto y ya lo están haciendo. Sin embargo, hay muchos factores que determinan si un proyecto de código abierto se vuelve popular o exitoso, dependiendo de cómo lo definamos. Por ejemplo, la calidad del código, la documentación, las comunidades, el marketing y demás. Todos son importantes y están relacionados entre sí y no hay una regla de oro que diga cómo se puede hacer un proyecto de código abierto exitoso. Así que aquí me gustaría compartir algo de mi experiencia e ideas para crear y mantener proyectos de código abierto, combinados con algunas observaciones que he aprendido de la comunidad. Espero que pueda darles algunas ideas nuevas para comenzar su propio viaje en el código abierto o encontrar nuevas ideas para mejorar su proyecto existente.

El código abierto es un tema bastante amplio y no puedo cubrirlo todo en una sola charla. Por eso intento dividirlo en diferentes aspectos del código abierto en cada charla y convertirlos en una serie. Esta es la primera y esta charla es la primera parte de la serie. Sé que puede sonar un poco aleatorio y pueden preguntarse qué significa eso y trataré de explicarlo. Digamos que ya tenemos un proyecto de código abierto o planeamos crear uno. Y para ser un poco prácticos, digamos que queremos obtener cierta cantidad de usuarios, cierta cantidad de adopciones o simplemente queremos que la gente disfrute usándolo y disfrute de nuestro trabajo duro. Entonces, una cosa a considerar es cómo nos imaginamos a nuestros usuarios objetivo. Por ejemplo, ¿mi herramienta es para usuarios finales o para desarrolladores? ¿Es para desarrolladores de Vue o para desarrolladores de React, etc.? Sabemos que es un hecho que, entre todos nuestros usuarios objetivo, solo una parte de ellos se convertirá en nuestros usuarios reales y también depende de muchas cosas, ¿verdad? Y depende de cómo lo estemos promocionando. Y para obtener más usuarios en nuestro proyecto, podríamos intentar convertir a más usuarios potenciales en usuarios reales, tal vez haciendo más marketing o puliéndolo. En ese caso, la cantidad de usuarios objetivo que tienes, los círculos más grandes, en realidad se convierte en el límite superior de la cantidad de usuarios reales que podrías tener. Y por otro lado, también podemos intentar encontrar una forma de ampliar nuestros usuarios objetivo para incluir a más personas.

2. Target Users and Set Intersections

Short description:

El primer ejemplo es mi primer proyecto de código abierto llamado VS Code-View-I18-LA. Ayuda a los desarrolladores a ver la internacionalización en VS Code. Los usuarios objetivo del proyecto son la intersección de los desarrolladores de Vue, los usuarios de VS Code y aquellos que necesitan internacionalización. El éxito del proyecto depende de encontrar una gran intersección entre estos conjuntos.

Naturalmente, también tendrás más usuarios reales convertidos a partir de él. Bajo estas ideas, veamos algunos ejemplos de cómo podemos hacerlo. El primer ejemplo que les mostraré es en realidad mi primer proyecto de código abierto en 2019 y el repositorio se llama VS Code-View-I18-LA. Es una extensión de VS Code que ayuda a los desarrolladores a lidiar con I18, con la llamada internacionalización, como previsualizar la traducción en tu code o gestionar las claves para cada idioma, etc. Y aquí tienes una captura de pantalla de la extensión que muestra la función básica y espero que te dé una idea básica de lo que es. Y la extensión no es el tema principal hoy. Pero al comienzo de este proyecto, tenía muchas ganas de hacer que este proyecto fuera popular, ya que realmente quería demostrarme en el código abierto. Estaba súper feliz cuando obtuve las primeras 100 y 200 estrellas. Y luego recibí un reconocimiento de la comunidad. Pero después de eso, comencé a buscar metas más altas. En ese momento, soñaba con trabajar a tiempo completo en el código abierto, como tú, el creador de Vue. Así que mi ambición era crear algo tan popular como Vue. Y luego de repente vi que hay una diferencia fundamental entre mi proyecto y Vue. Y eso se refleja directamente en el nombre del proyecto. Si observas el nombre, es bastante largo y está compuesto por varias palabras, mientras que Vue es solo Vue, ¿verdad? Así que vamos a desglosarlo parte por parte. Primero, es una extensión de VS Code. Eso básicamente significa que solo los usuarios de VS Code usarán esta extensión. Podemos dibujar un círculo para indicar los usuarios de VS Code aquí. Luego tenemos Vue, porque está construido sobre mi necesidad, uso Vue, así que también podríamos tener un círculo de usuarios de Vue. Y finalmente, es una herramienta para la internacionalización. Eso significa que no todos los usuarios de Vue probarán esta extensión, porque no todas las aplicaciones necesitan internacionalización. Podemos dibujar un círculo para I18 también. Y luego descubrimos que nuestros usuarios objetivo están dentro de las intersecciones de esos tres conjuntos, lo que significa que solo los desarrolladores de Vue que están trabajando en la edición de una aplicación y que eligen VS Code como su editor probarían nuestras extensiones. Esto suena bastante limitado. Y esto es lo que se llama intersecciones de conjuntos. Antes de profundizar en la solución, también echemos un vistazo a este gráfico para ver qué significa la intersección de los demás. Y pronto nos dimos cuenta de que la intersección entre VS Code y Vue son en realidad los usuarios de Vola o Vita en ese momento, que es el soporte de IDE de VS Code para Vue. Como resultado, sabíamos que tanto Vita como Vola tienen una gran base de usuarios, porque tanto Vue como VS Code tienen una comunidad lo suficientemente grande como para hacer que la intersección sea lo suficientemente grande. De manera similar, también teníamos la intersección entre Vue e I18, un proyecto como Vue-I18-Ally, que es súper popular. Y cuando se trata de la intersección entre VS Code e I18, parece que no había tal proyecto en ese momento.

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

Cómo Construir Tu Propio Proyecto de Código Abierto
React Advanced Conference 2022React Advanced Conference 2022
16 min
Cómo Construir Tu Propio Proyecto de Código Abierto
Hello my friend, in this talk, I wanna share with you how to build your own open source project. Building an open source software project can be challenging. I receive a lot of things randomly in a day, like thank you messages for making my life easier, which motivates me. To choose an open source project to work on, pick one you use every day. Your software is being used when people report issues and send pull requests.
Lecciones de Mantenimiento de Bibliotecas TypeScript
TypeScript Congress 2022TypeScript Congress 2022
30 min
Lecciones de Mantenimiento de Bibliotecas TypeScript
Top Content
Mark Erickson, a Senior Frontend Engineer at Replay, discusses JavaScript libraries and their support for TypeScript, including migration, versioning, and debugging. He also explores the challenges of supporting multiple TypeScript versions and designing APIs for use with TypeScript. Additionally, he shares advanced Redux type tricks and insights into maintaining a TypeScript library. The poll results reveal the widespread usage of TypeScript among developers, with many gradually migrating their codebases. Lastly, he provides tips for upgrading TypeScript and verifying functionality.
Módulos Nuxt 3 y Código Abierto
Vue.js London 2023Vue.js London 2023
31 min
Módulos Nuxt 3 y Código Abierto
Nuxt.js modules are a central part of Nuxt and have had 14 million downloads. Creating Nuxt modules is easy with Nuxt 3. Modules can provide assets, CSS injection, plugins, and auto imports. Learning Nuxt modules gives a deeper understanding of Nuxt and extends its functionalities. The Nuxt community is friendly to newcomers and encourages module creation.
Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React
React Day Berlin 2023React Day Berlin 2023
31 min
Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React
Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.
Haciendo que una biblioteca de código abierto sea financieramente sostenible
React Day Berlin 2022React Day Berlin 2022
8 min
Haciendo que una biblioteca de código abierto sea financieramente sostenible
The Talk discusses how an open source library, ReactFlow, was made financially sustainable. Various methods were tried, including Github sponsoring and cross financing, but a price tag was eventually added to the library. Building trust and clear expectations through ongoing support and communication with subscribers was key to gaining financial support. The issue of people not knowing how much to contribute was addressed by providing a clear pricing structure. Additional features like one-on-one support and Pro examples were added to combat the paradox of choice and encourage financial support.
The State of XState
React Finland 2021React Finland 2021
18 min
The State of XState
Over the past few years, state machines, statecharts, and the actor model have proven to be viable concepts for building complex application logic in a clear, visual way with XState. In this talk, we'll take a peek into the future of XState, including new features in the next version, and new tools and services that will make it even easier to create and collaborate on state machines.

Workshops on related topic

Node.js: Aterrizando tu primera contribución de código abierto y cómo funciona el proyecto Node.js
Node Congress 2023Node Congress 2023
85 min
Node.js: Aterrizando tu primera contribución de código abierto y cómo funciona el proyecto Node.js
Workshop
 Claudio Wunder
Claudio Wunder
Esta masterclass tiene como objetivo brindarte un módulo introductorio sobre los aspectos generales del código abierto. Sigue a Claudio Wunder de la Fundación OpenJS para que te guíe sobre cómo funciona el modelo de gobierno de Node.js, cómo se toman decisiones de alto nivel y cómo hacer tu primera contribución. Al final de la masterclass, tendrás una comprensión general de todos los tipos de trabajo que hace el proyecto Node.js (desde la clasificación de errores hasta decidir los próximos 10 años de Node.js) y cómo puedes formar parte del panorama más amplio del ecosistema JavaScript.

Las siguientes tecnologías y habilidades suaves podrían ser necesarias:
- Comprensión básica de Git e interfaz de GitHub
- Conocimiento de inglés profesional/intermedio para la comunicación y para permitirte contribuir a la organización Node.js (ya que todas las contribuciones requieren comunicación dentro de los problemas y solicitudes de GitHub)
- La masterclass requiere que tengas una computadora (de lo contrario, se vuelve difícil colaborar, pero las tabletas también están bien) con una configuración de IDE, y recomendamos VS Code y recomendamos la extensión GitHub Pull Requests & Issues para colaborar con problemas y solicitudes directamente desde el IDE.

Se cubrirán los siguientes temas durante la masterclass:
- Un repaso de algunas características de la interfaz de GitHub, como los proyectos de GitHub y los problemas de GitHub
- Repasaremos los conceptos básicos del código abierto y seguiremos la Guía de código abierto
- Repasaremos Markdown
- Cubriremos el gobierno del código abierto y cómo funciona el proyecto Node.js y hablaremos sobre la Fundación OpenJS
- Incluyendo todas las formas en que uno puede contribuir al proyecto Node.js y cómo se pueden valorar sus contribuciones
- Durante esta masterclass, cubriremos problemas de nodejs/nodejs.dev, ya que la mayoría de ellos son de nivel básico y no requieren conocimientos profundos de C++ o de Node.js.
- Dicho esto, aún recomendamos a los asistentes entusiastas que deseen desafiarse a sí mismos a los "Good First Issues" de nodejs/node (repositorio principal) si lo desean.
- Permitiremos a cada asistente elegir un problema o trabajar junto con otros asistentes para abordar problemas juntos mediante la función de Pair Programming a través de la característica de VS Code Live Share
- También podemos hacer salas de descanso en Zoom para las personas que deseen colaborar juntas
- Claudio estará allí para brindar apoyo a todos los asistentes y, por supuesto, responder cualquier pregunta sobre problemas y desafíos técnicos que puedan enfrentar
- Las tecnologías utilizadas en nodejs/nodejs.dev son React/JSX, Markdown, MDX y Gatsby. (No se necesita ningún conocimiento de Gatsby, ya que la mayoría de los problemas son agnósticos a la plataforma)
- Al final de la masterclass, recopilaremos todos los colaboradores que hayan abierto con éxito una solicitud de extracción (incluso si es un borrador) y reconoceremos su participación en las redes sociales.