El Viaje de los Proyectos de CodeSandbox

Hola a todos. Esta es la primera vez que hablo en eventos de React. Antes asistía, pero ahora estoy hablando aquí y estoy muy feliz de poder estar aquí.

Quiero dar una advertencia. Esta es la primera vez que comienzo a usar Keynote para esta presentación, así que estoy bastante entusiasmado con las animaciones.

Mi nombre es Yves Van Horne, pero mi nombre es bastante difícil de pronunciar, incluso en los Países Bajos. Así que también puedes llamarme Yves, puedes llamarme Ives. Mis amigos también tienen problemas con mi nombre. Me llaman Flip. Si quieres llamarme Flip, está bien también. Mi nombre de usuario en Twitter es Compute Ives, o Compute Yves, no importa.

Estoy aquí para hablar sobre Code Sandbox. Primero quiero verificar rápidamente quién de ustedes conoce Code Sandbox. De acuerdo, esto es genial. Aún así, voy a hacer una demostración, porque eso es algo que me gusta hacer. Esto es Code Sandbox. Básicamente, tienes código y tienes una vista previa. Lo genial de esto es que puedes hacer cambios en ese código. Lo verás de inmediato en la vista previa. Lo mejor es que obtienes una URL que puedes compartir con otras personas y luego ellas pueden jugar con ese código y comenzar con él. Bueno, pueden conocer tus ideas.

Ahora tenemos una especie de celebración. Creo que desde ayer hemos alcanzado los 30 millones de sandboxes en Code Sandbox. Eso fue algo que cuando comenzamos Code Sandbox nunca esperábamos. Eso no estaba en nuestros sueños más salvajes. La gente ha construido cosas locas. Todo ese Mario Kart allí, no es JavaScript. Es solo CSS y funciona. Puedes mover tu kart y todo. De todos modos, durante esta charla, quiero hablar sobre la historia de cómo comenzó Code Sandbox. Cómo comenzó como un pequeño proyecto de estudiante y cómo creció y creció y lo que hemos aprendido en el camino porque mi objetivo realmente con esta charla es si alguno de ustedes tiene una idea y podría querer trabajar en esa idea, quiero hablar sobre las lecciones que hemos tenido para que también puedas usar esto.

Y al final, también tengo una parte técnica de la charla sobre cómo hacemos que la última versión de Code Sandbox funcione.

Así que volvamos seis años atrás. Trabajaba en un sitio web de subastas. Estábamos convirtiendo nuestras páginas de Ruby on Rails a React. Y, en algún momento, estaba de vacaciones en un hermoso lugar llamado St. Ives. Y fuimos allí porque mi nombre estaba en él. Esa fue realmente la única razón. Y, mientras estaba allí, recibí preguntas de mis compañeros de trabajo sobre fragmentos de código. Recibí fragmentos en Slack. Tuve que descifrar qué estaba pasando. Y vi, bueno, este fragmento de código no funciona porque creo que podría ser esto. Pero fue frustrante. No tenía mi computadora portátil conmigo, así que no podía ejecutar el código.

Y, entonces, en ese momento, estaba pensando, ¿qué tal si tengo mi entorno de desarrollo siempre disponible? ¿Eso facilitaría las cosas? ¿Podría ponerlo en el navegador, por ejemplo? Y, por supuesto, como muchas ideas, no hice nada con la idea. En cambio, comencé a estudiar en la universidad. Y al principio, fue muy agradable. Y con el tiempo, comenzamos a tener conferencias. Cada vez más conferencias. Y eran interesantes. Pero luego comenzamos a tener conferencias de Java. La primera estuvo bien. La segunda también estuvo bien. Pero después de la tercera, pensé, bueno, tal vez sea hora de comenzar también un proyecto paralelo. Tal vez.

Y, así, fui a mi tablero de ideas. Vi Code Sandbox allí y comencé a abrir Sketch y crear la primera versión llamada React Sandbox. Y estaba muy enfocada en componentes. Como esto aquí. Debería ser un componente en el...

Y pensé, bueno, este design está hecho. Puedo comenzar a implementarlo. Y así, nos fuimos con la implementación. Esta es la primera versión en la que realmente estaba trabajando. Podías escribir código y ver la versión. Y estaba tan entusiasmado con esto. Pensé, wow, esto se siente genial. Y eso me motivó mucho, por ejemplo, a agregar pestañas. Podías importar esas pestañas. Y luego pensé, bueno, ¿qué tal si puedes construir bibliotecas de NPM dentro de los sandboxes y luego puedes importarlas en otros sandboxes?

Así que, esta vista de dependencias muy extraña llegó a la barra lateral. Pero en ese momento, parecía un explorador de archivos. Así que pensé, bueno. Hagámoslo un explorador de archivos en su lugar. Llamémoslo como es. Y luego comenzó a pulirse más. Pensé, bueno, esto ahora realmente comienza a parecer un editor de código. Así que comencé a agregar soporte de dependencias de NPM. Y comencé a usar esto realmente para prototipar hasta que llegó a esta fase donde esto estaba justo antes del lanzamiento, creo, donde llegó a una versión que se parece mucho a cómo es hoy. Es como un editor de código.

Y la parte interesante de esto es que la idea realmente comenzó como un editor de componentes. Y luego pensé, bueno, ¿qué tal si construyes bibliotecas de componentes allí? ¿Y qué tal si puedes compartir esas bibliotecas de componentes con el mundo y luego importarlas en tus sandboxes? Y al final, resultó ser un editor de código en línea. Y la lección principal para mí es que no importa qué idea tengas, puede ser imperfecta. Vale la pena trabajar en ella. Y he hablado con personas antes que dijeron, bueno, tengo esta idea, pero no creo que sea una buena idea. Así que no trabajaré en ella. Pero creo que es una lástima, porque muchas ideas comienzan siendo imperfectas. Y durante el trabajo en la idea, refinaremos la idea y mejorará o será completamente diferente. Así que eso es increíblemente importante. Y si tienes una idea, incluso si es imperfecta, comienza a trabajar en ella. Así que tenemos esta versión funcional.

Pero lo veía todos los días. Y en algún momento pensé, bueno, esto no es interesante. Quiero decir, puedes construirlo, puedes usarlo para crear prototipos y lo estaba usando de esa manera, pero lo veía todos los días y empezó a parecerme normal. Así que perdí la motivación para trabajar en ello. Pensé, bien, proyecto secundario terminado. Voy a volver a mis clases. Y volví a mis clases.

Y luego mis compañeros de clase me preguntaron, bueno, ¿qué has estado haciendo? Y les mostré, bueno, he estado trabajando en este proyecto secundario. Se llama Code Sandbox. Y se lo mostré. Y estaban mucho más entusiasmados de lo que esperaba inicialmente. Estaban realmente entusiasmados por usar esto para comenzar a escribir código React, algo que no habían hecho mucho antes. Y pensé, bueno, tal vez haya algo detrás de esto. Y con mi cofundador decidimos, bien, vamos a trabajar en ello, vamos a lanzarlo el 1 de abril. Cada característica que no esté terminada para el 1 de abril será eliminada del producto. Y así se ve este gran aumento en los commits. Y eso es lo que hemos hecho.

La lección aquí es que, creo, siempre debes buscar retroalimentación externa. Sigues mirando tu propia cosa y luego tienes una visión distorsionada de ella. Te acostumbras mucho a esa idea. Pero también poder hacer ese lanzamiento rápido, porque puedes construir cosas enormes que otras personas no verán el valor en ello. Un ejemplo de esto es que pensé que realmente necesitábamos el soporte del registro de MPM en CodeSandbox, como poder publicar tu sandbox en un registro de MPM para poder usarlo en tus proyectos locales, como poder construir bibliotecas en CodeSandbox. No pasó el corte del 1 de abril y nunca terminé esta característica. Nunca se fusionó porque la gente realmente no lo estaba pidiendo. Y no fusionaremos la característica en un futuro cercano porque tiene algunos conflictos de fusión. No creo que nadie quiera realmente pasar por esos conflictos de fusión. Pero otro ejemplo es, por ejemplo, pensé que la forma en que almacenamos los archivos con CodeSandbox no escalaría. Estábamos almacenando archivos en Postgres en una database. Y eso es gracioso, porque pensé, bueno, necesitamos reescribir esto realmente para escalar antes de poder lanzarlo.

Y hoy, con estos 30 millones de sandboxes y todos tienen un promedio de como 10 archivos, por lo que todavía hay 300 millones de archivos almacenados en Postgres. Y todavía, puedes actualizar un archivo en aproximadamente 80 milisegundos y puedes recuperar un archivo en 10 milisegundos desde Postgres. Así que, bueno, también es algo realmente bueno. Postgres es genial. Elixir también. Bueno, de todos modos.

Así que eso también fue un aprendizaje interesante. Sigue KISS. Mantén la idea pequeña. Una vez que lo hayas lanzado, la gente dará retroalimentación y luego puedes usar esa retroalimentación para reescribirlo tal vez si es necesario o para ampliarlo con el conjunto de características que encuentres valiosas.

Entonces, el gran día llegó. Al final, decidimos no lanzarlo el 1 de abril porque es el Día de los Inocentes. Eso no es realmente una gran idea. La gente simplemente lo vería como una broma. Así que el 2 de abril, lo lanzamos. Tuvimos nuestra cerveza de estudiantes. El tweet salió, gran anticipación y obtuvimos seis likes. Y todos esos likes eran de mis amigos del instituto que no programaban. Así que fue un mal lanzamiento. Y nos preguntábamos, ¿qué hacemos ahora? Hemos trabajado seis meses en esto. Lo lanzamos y nadie está mirando. Tuvimos cinco registros de personas que no sabían cómo programar. Lo cual es genial, por cierto. Llegaré a eso más tarde. Así que comencé a leer libros de marketing en modo de pánico. Y una regla que recuerdo muy bien es que es mejor tener 100 verdaderos fans que 10,000 personas a las que les gustas. Es mejor tener 100 personas que realmente estén entusiasmadas contigo, que hablen con otros sobre lo que estás construyendo y que te sigan, que 10,000 personas que te miren ocasionalmente, que te prueben ocasionalmente. Porque esos 100 verdaderos fans, harán más fans y crecerá de manera más orgánica y natural. Así que comenzamos a hacer cosas que no se pueden escalar. Comenzamos a hablar directamente con la gente.

Cuando alguien se registra, le enviamos un correo electrónico preguntando, hey, ¿qué piensas de CodeSandbox? Y si nos envían el Sandbox, les ayudamos a construir su Sandbox incluso. Y esta fue una oportunidad interesante, porque algunas personas regresaron con Solicitudes Destacadas. Y la forma segura de convertir a alguien en un fanático, realmente, es si tienen una Solicitud Destacada y tú implementas esa Característica, porque muestra que estás escuchando. Hay una gran advertencia de que solo debes implementar Características con las que estés de acuerdo tú mismo, o que se ajusten a tu plan de desarrollo. Pero si lo haces, realmente apreciarán tu tiempo.

Así que lanza con frecuencia. Y si lanzas, hazlo públicamente. Compártelo con la gente, porque habrá personas a las que les gustes y ellos te verán constantemente lanzando cosas nuevas y cada vez que lanzas algo y tienes un registro de cambios, ellos piensan, hm, tal vez debería probar esto. Muestra actividad. Y así comenzamos a crecer. Comenzamos a tener más y más usuarios en CodeSandbox. Y eso fue muy surrealista. Si miraras mis calificaciones, sería el gráfico inverso. Y recibimos comentarios locos, locos. Como por ejemplo, este, cásate conmigo, estoy enamorado de ti, esto es delicioso, gracias. Te he incluido en mi testamento. Todavía necesito encontrar a esta persona. Me sorprendió tanto que hice una captura de pantalla en Snapchat y puse detrás en holandés. Está traduciendo, qué retroalimentación. Sé que el holandés es un idioma desafiante.

Pero también aprendimos que las personas usan Code Sandbox de diferentes maneras que inicialmente no conocíamos. Y una gran forma que realmente ha cambiado nuestra forma de ver Code Sandbox es que las personas aprenden a programar usando Code Sandbox. Porque si vas a Code Sandbox, no tienes que configurar un entorno. Imagina si nunca has programado antes y tienes que aprender de inmediato sobre un terminal, sobre NPM, sobre el editor de código, sobre qué bundler usar incluso. ¿Debería usar create React App? Next JS? Astro? Bueno, de todos modos. Con Code Sandbox, puedes ir a un enlace y tener una versión en ejecución y puedes comenzar a editar el texto en blanco y obtienes inmediatamente esa sensación de dopamina de programar. De eso se trata realmente. También aprendimos que Code Sandbox se utiliza para compartir trabajo. Ya sabíamos esto, pero las personas lo usan para diferentes tipos de compartición. Como, por ejemplo, entrevistas de trabajo o informes de errores.

Y las personas querían usar Code Sandbox más allá de los prototipos. Si alguien comenzaba un prototipo en Code Sandbox y se volvía más grande y más grande, el prototipo a veces superaba a Code Sandbox. Y tenían que ir a local. Y eso fue un poco lamentable. También encontramos eso lamentable. Así que eso fue increíblemente importante para nosotros. Y también mapeamos estos aprendizajes a nuestros valores al final. Donde la accesibilidad es el valor más importante. Queríamos realmente reducir la curva de aprendizaje.

Pero en el último, hemos estado trabajando mucho recientemente. Y eso se debió a Excalidraw... No estoy seguro de cuántos de ustedes conocen Excalidraw. Es interesante. Es una herramienta de pizarra blanca bastante genial. Y ese proyecto comenzó en Code Sandbox. Como un prototipo. Y se compartió en Twitter muchas veces. Las personas también contribuyeron a Excalidraw. Y eso funcionó por un tiempo. Pero a medida que el proyecto crecía, nuestra integración de Git no era tan buena.

El más grande es que vieron discrepancias con su entorno local. Porque con Code Sandbox, estamos ejecutando todo en el navegador. Eso es un desafío. Incluso cosas como... Si quieren instalar una dependencia de NPM para Canvas, tiene enlaces C. ¿Ahora, en el navegador, transpilamos esos enlaces C a Wasm para poder ejecutarlo? Bueno, hubo algunas pequeñas discrepancias.

Entonces, la gente comenzó a usar Excalidraw localmente. Eso nos pareció una gran pérdida. Así que estábamos pensando... ¿Podemos habilitar Code Sandbox para proyectos grandes? O mejor dicho, ¿podemos habilitar Code Sandbox para proyectos realmente grandes? ¿Podemos usarlo para desarrollar Code Sandbox en sí mismo? Y fuimos al tablero de dibujo. Nos preguntamos a nosotros mismos... ¿Podemos habilitar el flujo de Code Sandbox para cualquier proyecto de cualquier tamaño, integrado en tu flujo de trabajo existente? Eso es mucho decir. No estoy seguro de por qué puse esta diapositiva aquí. Pero eso es en lo que hemos estado trabajando durante el último año y medio, creo. Y lo llamamos Code Sandbox Repos. Tiene muchas animations elegantes. Sid me ayudó con esto. Voy a mostrarlo un par de veces más porque, de lo contrario, no hago justicia a esta animación. Una vez más. Vale. Una vez más. Y luego terminamos.

Entonces, ¿qué es Code Sandbox Repos? Es el mismo flujo de Code Sandbox. Así que tienes sandboxes. Puedes bifurcar esos sandboxes. Así que tienes un sandbox. La gente puede ir a él. Pueden bifurcarlo. Y luego pueden hacerlo con su propia versión que poseen. Sin embargo, lo hemos integrado con GitHub. Entonces puedes, por ejemplo, vincular el sandbox a la rama principal de tu repositorio. Cuando alguien bifurca ese sandbox, obtienen un nuevo sandbox que está vinculado a una nueva rama de ese repositorio. Y ahora lo genial de esto es que con GitHub, puedes contribuir de vuelta. Entonces puedes... Alguien puede crear un sandbox. Alguien puede bifurcarlo.

Y luego alguien puede abrir una solicitud de extracción para ese sandbox. Y eso es muy genial.

Oh. Una demostración. Así que veamos. De acuerdo. Esto es Code Sandbox. Y esto también era nuestro objetivo. Esto es Code Sandbox en ejecución. Sé que es confuso. Ves dos editores. Aquí uno y aquí otro. Nuestro equipo también está confundido por esto. Suena muy bien, pero sí, puede ser confuso. También estamos ejecutando cosas como storybook aquí, por ejemplo.

Pero ahora puedo trabajar con esto como si estuviera desarrollando. Si quiero, tenemos este pequeño inspector. Entonces puedo, por ejemplo, cambiar esto. Puedo hacer clic en él, ir al nombre del componente, puedo cambiarlo a React. Hagamos esto completamente basado en React advanced. Así que vamos aquí. Además, oh, ese ya está cambiado. Voy aquí. Hago que ese también esté basado en React advanced. Oh, sí, escribí mal. Y ahora el editor no sirve. Al menos este. El otro todavía funciona. Pero, sí, todo es React advanced. No muy útil.

Pero esto es una cosa. Pero también queríamos que pudieras usar tu propio editor de código. Por ejemplo, puedes hacer clic en abrir en VS code. Me dará esta pequeña advertencia y aún más advertencias. Oh, no, ya tenía un VS code abierto. Dos segundos. De acuerdo. Y ahora abriré este repositorio dentro de Code Sandbox pero dentro de mi propio VS code. Así que todavía puedo usar mis propias extensiones y todo. Puedo usar lo que estoy acostumbrado. Pero tengo un editor en línea que puedo compartir.

Por ejemplo, también puedes verme dos veces aquí ahora. Voy a hacer zoom. Es más claro. Oh. Este soy yo. Dos veces. Y también tiene colaboración en vivo entre los diferentes editores. Por ejemplo, estoy aquí en Package Station. Puedes verme, bueno, haciendo cosas. Y lo genial de eso es que puedes usar el editor al que estás acostumbrado. Pero si quieres compartir algo rápidamente con un diseñador o un desarrollador, pueden usar el editor en línea. Todavía puedes colaborar. Y además de eso, también tenemos una aplicación nativa para iPad. Una aplicación para iPhone. Que también se integra con esto. Así que puedes tener a alguien trabajando en iPad. Puedes tener a alguien trabajando en el editor web. Puedes tener a alguien... Sí.

Y vamos a agregar más integraciones también. También estamos abriendo esta API. Así que eso es una cosa muy importante. Y debido a que está integrado con Git, puedes ver qué cambios has realizado. Y puedes hacer clic en crear PR y nosotros nos encargaremos de crear el commit y todo. Y también abrir el PR en GitHub. Ese PR en GitHub tendrá un enlace a esta rama también. Así que si quieres revisar código, no tienes que cambiar de entorno. No tienes que cambiar de rama ni nada. Irás directamente a un entorno en ejecución con IntelliSense y todo.

Esto es lo principal de lo que hemos estado construyendo con Codesandbooks. Sin embargo... Oh, sí. Este también es el desafío. Porque ya no estamos ejecutando cosas en el navegador. Estamos ejecutando cosas en la VM. Si pudiera... No voy a hacer la demostración. Vamos a continuar. Estamos ejecutando cosas en una VM. Y debido a esto, puedes ejecutar cualquier cosa. Y cuando digo cualquier cosa, me refiero realmente a cualquier cosa. He estado ejecutando Minecraft con Codesandbooks. Un servidor en Codesandbooks. Y me he estado conectando con él. Lo cual nadie aquí debería hacer en casa. Bueno, de todos modos. Puedes ejecutarlo con cualquier editor. También agregaremos soporte para WebStorm y todo más adelante. Pero el desafío está en las VM.

Antes ejecutábamos cosas en el navegador. Logramos que eso fuera rápido. Pero, ¿cómo podemos hacer que los servidores de desarrollo se inicien rápidamente si ni siquiera sabemos qué estamos ejecutando? Porque estamos ejecutando esta VM. Y la respuesta es, ¿qué pasa si no cargamos el servidor de desarrollo? Porque si trabajas en tu MacBook, puedes... Si estás trabajando en una rama, inicias el servidor de desarrollo, trabajas en una rama y cierras la MacBook. Un día después, la abres. El servidor de desarrollo aún se inició. No tienes que esperar a que se inicie el servidor de desarrollo porque tu MacBook se fue a dormir en ese tiempo. ¿Podemos habilitar eso para todo en CodeSandbox? ¿Podemos habilitar este tipo de suspensión? Y es posible. Es realmente posible. Hay algo llamado Firecracker, que es creado por AWS, Amazon. Es un administrador de máquinas virtuales liviano. Inicia VM para ti. Y esto es súper interesante, porque puedo tomar una VM que está ejecutando algo, puedo serializarla en un disco y una memoria de instantánea, y luego puedo usar eso. Puedo iniciar nuevas VM a partir de esto. Y lo interesante de tu MacBook es que solo puedes tomar una instantánea de lo que tienes abierto, ¿verdad? Pero podemos habilitar esto para cada rama. Entonces puedes estar trabajando en una rama. Y rápidamente abres una nueva pestaña para revisar un PR, que es otra rama, y la inicias al instante. Luego puedes volver a tu última rama en la que has estado trabajando, y no tienes que cambiar de rama, hacer una instalación de yarn o cualquier otra cosa. Tenemos suspensión para cada rama. Y las instantáneas, puedes iniciar una VM a partir de una instantánea en 600 milisegundos. Esto nos permite realmente crear esta experiencia rápida. Pero puedes hacer más. Esto es lo que me emociona. Tenemos este modelo de bifurcación con CodeSembooks, donde puedes decir, hago una bifurcación. Voy a un sandbox. Presiono bifurcar. Y quieres una copia exacta. Y antes esto era un poco desafiante de cómo podrías hacer eso con las VM. Pero con este enfoque, puedes usar esa misma instantánea si quieres.

Y ahora puedo hacer clic en bifurcar. Y cuando hacemos la bifurcación, en realidad ahora copiamos la VM. Hemos copiado esta VM. Y todavía estoy conectado aquí. Puedo hacer cambios en esta. Y ahora también tenemos un nuevo servidor de Minecraft, que es una copia exacta del último servidor de Minecraft que acabo de crear. Y tengo otra instancia de Minecraft. Puedo conectarme a esa. Y deberías ver que esto todavía está aquí. Por lo tanto, podemos llevar esta rama bastante lejos. Y no solo en servidores Node, o no solo en proyectos web. Puedes ejecutar tu entorno de Docker Compose y tener una instancia única para cada rama que se iniciará al instante. Y estoy muy, estoy súper emocionado por esa posibilidad. Nunca supe que eso sería posible con VMs. Oh, el temporizador está vacío.

De acuerdo. Quiero agradecerles mucho por escuchar. Tengo pegatinas. Si tienen alguna pregunta, vengan a mí y también les puedo dar una pegatina. También tengo más que pegatinas. Y gracias por escuchar mi charla.