El Viaje de los Proyectos de CodeSandbox

Rate this content
Bookmark

Los Proyectos de CodeSandbox es la nueva versión de CodeSandbox que permite el flujo de trabajo de CodeSandbox hoy en día, pero para proyectos de cualquier tamaño. Durante esta charla, Ives compartirá la historia de cómo se crearon los Proyectos y cómo hicimos posible técnicamente construir los Proyectos.

25 min
21 Oct, 2022

Video Summary and Transcription

Code Sandbox es un editor de código en línea que comenzó como un editor de componentes. Ha evolucionado y ahora tiene 30 millones de sandboxes. Los creadores enfatizan la importancia de buscar comentarios externos y realizar lanzamientos rápidos. También destacan el poder de tener verdaderos fanáticos y el valor de los comentarios de los usuarios. Code Sandbox se está expandiendo para admitir proyectos grandes e integrarse con GitHub. Ofrece funciones de colaboración, la capacidad de usar tu propio editor de código y aplicaciones nativas para iPad y iPhone. Los desafíos radican en ejecutar todo en una máquina virtual y habilitar servidores de desarrollo rápidos. Code Sandbox también está explorando la posibilidad de ejecutar otras tecnologías como Deno, Bun y Ruby on Rails. La charla concluye con una demostración de cómo ejecutar un servidor de Minecraft en Code Sandbox.

Available in English

1. Introducción a Code Sandbox

Short description:

Hola a todos. Esta es la primera vez que hablo en eventos de React. Estoy aquí para hablar sobre Code Sandbox. Ahora tenemos una especie de celebración. Desde ayer hemos alcanzado los 30 millones de sandboxes en Code Sandbox. Durante esta charla, quiero hablar sobre la historia de cómo comenzó Code Sandbox y lo que hemos aprendido en el camino.

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.

2. La historia de Code Sandbox

Short description:

Al final, tengo una parte técnica de la charla sobre cómo hacemos que la última versión de Code Sandbox funcione. Volvamos seis años atrás. Trabajaba en un sitio web de subastas, convirtiendo nuestras páginas de Ruby on Rails a React. Mientras estaba de vacaciones en St. Ives, recibí preguntas de mis compañeros de trabajo sobre fragmentos de código. No tenía mi computadora portátil, así que no podía ejecutar el código. Esto me llevó a pensar en tener un entorno de desarrollo siempre disponible. En lugar de perseguir la idea de inmediato, comencé a estudiar en la universidad. A medida que asistía a más conferencias, incluyendo Java, decidí comenzar un proyecto paralelo. Vi Code Sandbox en mi tablero de ideas y creé la primera versión, React Sandbox, enfocada en componentes.

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...

3. La Evolución de Code Sandbox

Short description:

La idea comenzó como un editor de componentes, pero evolucionó hacia un editor de código en línea. No importa cuán imperfecta sea una idea, vale la pena trabajar en ella y perfeccionarla. Comienza a trabajar en tus ideas, incluso si son imperfectas.

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.

4. El Viaje de Code Sandbox

Short description:

Inicialmente perdí la motivación para trabajar en Code Sandbox, pero cuando se lo mostré a mis compañeros de clase, estaban entusiasmados por usarlo. Así que mi cofundador y yo decidimos trabajar en ello y lanzarlo el 1 de abril. Buscar retroalimentación externa y hacer lanzamientos rápidos es importante. Algunas características, como el soporte del registro de MPM, no fueron incluidas, mientras que otras, como cambiar el sistema de almacenamiento de archivos, eran innecesarias.

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.

5. The Release and the Power of True Fans

Short description:

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. Así que también es algo realmente bueno. 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. Al final, decidimos no lanzarlo el 1 de abril porque es el Día de los Inocentes. Así que el 2 de abril, lo lanzamos. 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. Y una regla que recuerdo muy bien es que es mejor tener 100 verdaderos fans que 10,000 personas a las que les gustas. Así que comenzamos a hacer cosas que no se pueden escalar. Comenzamos a hablar directamente con la gente.

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.

6. Code Sandbox and User Feedback

Short description:

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. 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 te verán constantemente lanzando cosas nuevas. Cada vez que lanzas algo y tienes un registro de cambios, ellos piensan, hm, tal vez debería probar esto. También aprendimos que las personas usan Code Sandbox de diferentes maneras que inicialmente no conocíamos. Una gran forma que realmente ha cambiado nuestra forma de ver Code Sandbox es que las personas aprenden a programar usando Code Sandbox. También aprendimos que Code Sandbox se utiliza para compartir trabajo.

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.

7. Expanding Use and Challenges

Short description:

Las personas querían usar Code Sandbox más allá de los prototipos. A veces, los prototipos crecían y superaban a Code Sandbox, lo que requería que los usuarios fueran locales. Esto fue una lástima e increíblemente importante para nosotros. Mapeamos estos aprendizajes a nuestros valores, siendo la accesibilidad el valor más importante. Hemos estado trabajando en Excalidraw, una herramienta de pizarra blanca que comenzó como un prototipo en Code Sandbox. A medida que el proyecto crecía, nuestra integración de Git enfrentaba desafíos, incluyendo discrepancias con el entorno local.

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.

8. Code Sandbox Repos and GitHub Integration

Short description:

Hemos estado trabajando en habilitar Code Sandbox para proyectos grandes e integrarlo con GitHub. Esta nueva función, llamada Code Sandbox Repos, permite a los usuarios bifurcar sandboxes y vincularlos a ramas en sus repositorios. Esto permite la colaboración y contribución a través de GitHub.

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.

9. Code Sandbox Demo

Short description:

Y luego alguien puede abrir una solicitud de extracción para ese sandbox. Oh. Una demostración. Esto es Code Sandbox en ejecución. Suena muy bien, pero sí, puede ser confuso. También estamos ejecutando cosas como Storybook aquí. Puedo trabajar con esto como si estuviera desarrollando. Tengo este pequeño inspector. Puedo cambiar el nombre del componente a React. Todo es React avanzado. No muy útil.

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.

10. Using Your Own Code Editor and Collaboration

Short description:

Pero también queríamos que pudieras usar tu propio editor de código. Por ejemplo, puedes hacer clic en abrir en VS code y abrir un repositorio dentro de Code Sandbox en tu propio VS code. Esto te permite usar tus propias extensiones y trabajar con un editor en línea que se puede compartir. Code Sandbox también ofrece colaboración en vivo entre diferentes editores, lo que permite una colaboración fluida entre desarrolladores y diseñadores. Además, Code Sandbox tiene aplicaciones nativas para iPad y iPhone, lo que brinda aún más flexibilidad en la forma en que trabajas.

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í.

11. Integration and VM Challenges

Short description:

Estamos agregando más integraciones a la API y permitiendo la integración directa con Git. Esto te permite ver tus cambios, crear solicitudes de extracción y revisar código sin cambiar de entorno. Sin embargo, el desafío radica en ejecutar todo en una máquina virtual (VM), lo que te permite ejecutar cualquier cosa, incluso juegos como Minecraft. Estamos trabajando en agregar soporte para WebStorm, pero las VM presentan desafíos.

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.

12. Fast Dev Servers and CodeSandbox Forking

Short description:

Podemos hacer que los servidores de desarrollo se inicien rápidamente al no cargar el servidor de desarrollo. Firecracker, un administrador de máquinas virtuales liviano creado por AWS, nos permite serializar las VM en instantáneas y iniciar nuevas VM a partir de ellas. Esto permite cambiar rápidamente entre ramas sin tener que esperar a que se inicien los servidores de desarrollo. Con el modelo de bifurcación de CodeSandbox, puedes crear una copia exacta de un sandbox utilizando la misma instantánea.

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.

13. Habilitando bifurcaciones y bases de datos ramificables

Short description:

Podemos usar instantáneas y Copiar en Escritura para habilitar bifurcaciones rápidas y bases de datos ramificables en Code Sandbox. Esto permite probar fácilmente migraciones y tener datos disponibles en todas las ramas. Además, estamos trabajando en habilitar esta funcionalidad para sandboxes en la nube, expandiéndonos más allá de los proyectos web para admitir otras tecnologías como Deno, Bun e incluso Ruby on Rails. Estoy emocionado de demostrar el proceso de bifurcación ejecutando un servidor de Minecraft en Code Sandbox.

creamos una instantánea. ¡Bloop! Y luego la copiamos. ¡Bloop! Y luego creamos una nueva rama. ¡Bloop! El gran desafío aquí es cómo hacerlo rápido. Una instantánea ocupa ocho gigabytes. ¿Cómo puedes copiar una instantánea de ocho gigabytes en dos segundos? Porque ese es el objetivo. Y ya te puedo decir que no puedes. Sí. Usamos algo llamado Copiar en Escritura. Y he escrito una publicación en el blog sobre esto. Si hablara de esto ahora mismo, probablemente me llevaría mucho tiempo. En el blog, puedes ver cómo usamos Copiar en Escritura para crear instantáneas muy rápidas. Pero las cosas que esto permite son realmente interesantes. Podemos hacer bifurcaciones rápidas o bases de datos ramificables. Por ejemplo, instalas una base de datos Postgres en la rama principal, agregas nuevos datos y luego bifurcas esa rama principal. Esta nueva rama también tendrá todos esos datos disponibles. Por lo tanto, cosas como migraciones, puedes probarlas muy fácilmente en copias de bases de datos, pero también las ramas parecerán siempre activas porque están en reposo y podemos reanudarlas muy fácilmente. No tenemos costos de alojamiento. Solo tenemos que mantener el almacenamiento, pero el almacenamiento es barato. La CPU no lo es. Y una cosa que también queremos hacer es habilitar esto para sandboxes en la nube. La semana pasada, tuvimos un primer lanzamiento para sandboxes en la nube. Por lo tanto, no solo los repositorios tendrán este tipo de funcionalidad, sino que podemos habilitar sandboxes para mucho más que proyectos web. Podemos habilitar, esto es solo una pequeña parte, como Deno, Bun, pero ¿qué pasa si queremos, por ejemplo, Ruby on Rails, por ejemplo, sandboxes de Ruby on Rails, volviendo a los orígenes, sería posible. Y eso es súper interesante para mí. Y ahora quiero hacer una demostración muy rápida porque estoy muy emocionado con esto. Quiero mostrarte cómo funciona esta clonación, esta bifurcación, bifurcando un servidor de Minecraft. Así que quiero ejecutar un servidor de Minecraft en Code Sandbox, aquí está. Por cierto, esto se reanudó ahora desde la hibernación. Así que viste esta cosa gris y luego volvió.

14. Resuming Minecraft Server and Unique Instances

Short description:

Esa es la reanudación desde la hibernación. Tengo este servidor de Minecraft en funcionamiento con registros y una conexión de tailscale. Puedo conectarme a la VM usando mi red interna. Puedo construir y realizar cambios en el servidor, creando copias exactas para diferentes instancias. Esto no se limita a proyectos web, ya que también puedes ejecutar entornos de Docker Compose con instancias únicas para cada rama. Estoy emocionado por esta posibilidad y no sabía que era posible con VMs. Gracias por escuchar!

Así que tengo este servidor de Minecraft. Está ejecutando Minecraft aquí. Puedes ver los registros. Y también tiene una conexión de tailscale. Esto me permite conectarme directamente a la VM usando mi red interna. Así que ahora puedo... Oh, los sonidos también funcionan. Estoy cargando en el mundo. Oh, está oscuro. Espera. Mis trucos. Y puedo construir algo. Oh, eso suena genial. Y tenemos un logo tan simple. Puedo construir nuestro logo como demostración. ¿No es increíble?

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.

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

React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.