En agosto de 2021, el equipo de ingeniería de GitHub publicó un blog en el que explicaban todos los problemas que tenían al instalar entornos de desarrollo locales para cada programador. Tú sabes: configurar tu computadora, instalar dependencias, clonar el repo, instalar el proyecto, etc. Este proceso podía tomar de 45 minutos a medio día por programador. Sin embargo, medio día para un programador que empieza a trabajar, no es mucho tiempo, porque luego se pone a echar código y ser productivo. El verdadero problema es que, si este programador hacía algún cambio en su equipo, su entorno de desarrollo podía quedar inutilizable y tocaba comenzar el proceso desde cero. ¡Imagínate la ineficiencia!
¿Y cómo lo resolvieron? Llevando el entorno de desarrollo de local hacia la nube. De tal manera, los programadores ya no están preocupándose de la configuración local sino que se conectan al servidor y empiezan a codear, ya sea desde el navegador o desde Visual Studio Code.
Y es que hoy en día la tecnología nos permite eso, mover las tareas más importantes de nuestro equipo local hacia la nube, de tal manera que tu equipo local le puede caer agua, lo puedes incendiar, lo puedes perder, pero todo el proyecto está a salvo. Y eso te enseñaremos en este blog: las herramientas que existen para desarrollar software desde la nube sin tener que instalar nada en tu equipo local. Y lo haremos con el método que siempre nos caracteriza, porque en español, #NadieExplicaMejorQueEDteam.
Antes de continuar, te quiero recordar que muy pronto llegará a EDteam lo que estabas esperando todo el año: ¡El Black Friday 2022 🚀!
¿Por qué usar un editor de código online?
En el año 2006, Google lanzó su primera versión de Google Docs, una suite de herramientas muy similar a Word, Excel y Power Point, pero don dos diferencias fundamentales:
- Funcionan desde el navegador, por lo que no se necesita instalar nada.
- Trabajo colaborativo. Varias personas pueden trabajar en tiempo real en el mismo documento y ver los cambios que hace cada uno.
Era tan sorprende para su época, que muchas aplicaciones quisieron convertirse en el Google Docs de su área. Por ejemplo, Figma lo logró en el campo del diseño. Por eso creció tanto hasta que Adobe la compró.
En el desarrollo de software, existen muchas aplicaciones que quieren ser el Google Docs del código y ofrecer ventajas como:
- Trabajar desde cualquier lugar sin instalar nada.
- Trabajar desde cualquier dispositivo, incluso tablets o teléfonos (donde es imposible instalar el entorno de desarrollo completo).
- Tener sesiones de trabajo colaborativo.
- Evitar errores de compatibilidad porque el entorno está en la nube y no en local.
- Compartir tu trabajo con el mundo o hacer deploy con un simple click.
Actualmente abundan las ofertas para escribir código desde el navegador sin escribir nada. Pero te cuento algo, estas herramientas están basadas en proyectos de JavaScript Open Source, que te permiten tener tu propio editor de código. Es decir, que si tu quisieras, podrías tomar estos proyectos y crear tu propio editor de código e insertarlo en tus proyectos.
Por ejemplo, los más utilizados son:
- Ace.
- Mónaco
- Codemirror.
1. Ace
Es el editor usado en Cloud9 de AWS y es el sucesor de un proyecto de Mozilla llamado Skywriter, que buscaba crear un editor de código en el navegador usando el elemento < canvas > de HTML.
Sin embargo, luego vino Cloud9 en 2010 con la propuesta de utilizar el DOM, y no el elemento Canvas, lo cuál le daba mayor flexibilidad. Así que los dos proyectos se fusionaron.
Ace significa Ajax.org Cloud9 Editor, y aunque en 2016, Amazon compró Cloud9, la base, que es Ace, sigue siendo Open Source, por lo que puedes usarlo en tus proyectos y también puedes probarlo online desde: https://ace.c9.io/build/kitchen-sink.html.
Mónaco
Mónaco es el editor que le da vida a VSCode y está soportado por todos los navegadores como Edge, Opera, Chrome, Safari y Firefox. Exceptuando, los navegadores móviles. Incluye validación de código, resaltado de sintaxis, intelisense, autocompletado y lo puedes probar aquí: https://microsoft.github.io/monaco-editor/index.html.
Codemirror
Es el editor de código en el navegador más usado. Una de las desventajas de Mónaco es que no es compatible con navegadores móviles, mientras que Codemirror no tiene ese problema. Además, Codemirror es completamente modular, así que se puede ir extendiendo y es hace que sea el editor más usado por empresas como Codepen, Mozilla, Replit, WordPress, entre otras.
CodeSandbox
CodeSandbox es un IDE en la nube orientado al desarrollo web. Puedes usarlo desde el navegador o desde iOS (iPad, iPhone). Está optimizado para tecnologías web como React, Vue, Angular, Svelte y más. Además, está integrado con npm para que puedas instalar paquetes públicos o gestionar paquetes privados. También se integra con Github, de tal manera que puedes importar o exportar tus proyectos fácilmente.
CodeSandbox tiene su sede en Amsterdam (Holanda), la misma ciudad donde nació Python (como te contamos en este video). Además, la compañía comenzó en 2017 como un playground para React. Es decir, un lugar donde puedes hacer pruebas de código con React y ya está. Sin embargo, con el tiempo evolucionó hasta convertirse en un completo IDE en la nube.
Está basado en VSCode, por lo que usa Mónaco como editor, y ya que está orientado a web, incluye Hot Reload. Es decir, que los cambios que hagas en el código se vean automáticamente en el navegador. También puedes hacer deploy con un solo click a Netlify y tiene una gran cantidad de plantillas para proyectos, para React, Vue, Angular, HTML, Node.js, Preact, Next, Vanilla JS, Vanilla TypeScript, Svelte o Gatsby para que no tengas que comenzar desde cero.
Con CodeSandbox puedes compartir tu trabajo con todo el mundo y construir tu portafolio. En esta dirección https://codesandbox.io/explore puedes ver todos los sandbox públicos, como este Mario Kart escrito con solo css o este mapa con React.
Puedes usarlo en el navegador, iPhone y iPad, pero lamentablemente no existe una app para Android. Tiene una capa gratuita que te permite comenzar sin pagar nada, con la limitación de que todo tus proyectos serán público. Si quieres sandbox y repos privados, los precios comienzan en 12 dólares al mes si eres individual o 18 al mes para equipos de hasta 20 personas.
Replit
A diferencia de CodeSandbox, Replit no está orientado exclusivamente al desarrollo web, por lo que soporta casi cualquier lenguaje y tipo de proyecto. Por eso, fue el editor que utilizamos en EDteam para nuestro curso gratuito Programación desde cero. Replit tiene una comunidad de más de 15 millones de creadores de Software, soporta más de 50 lenguajes e incluye todas las configuraciones necesarias para que comiences cualquier tipo de proyecto con un solo click.
También tiene trabajo colaborativo en tiempo real, basta con compartir un link y las personas que entren podrán empezar a trabajar contigo sin necesidad de saber de GIT, porque no necesitan hacer pull, push ni commits. Esto es ideal para enseñar programación.
Replit empezó en el 2016 con el editor Mónaco, pero ya que no tiene soporte para móvil, decidieron cambiar a Ace, el editor de AWS y Cloud9. Sin embargo, este Ace no eran compatibles con las APIs de Mónaco y tuvieron que escribir varias funciones dos veces. Así que decidieron migrar a CodeMirror, que es más liviano y tiene soporte para funciones touch de los móviles.
Además, Codemirror es modular, por lo que les permitía escribir nuevos módulos para agregar funciones, como atajos de teclado de VSCode, Vim e Emacs. También agregaron un selector de color de CSS, o el soporte para Solidity. Gracias a esto, Replit tiene aplicaciones para Android y iOS.
Además, incluye Ghostwriter, un escritor fantasma que te ayuda a escribir código con inteligencia artificial (parecido a Github Copilot). Puedes empezar a usar Replit gratis y los precios comienzan en 7 dólares al mes.
Github codespaces
Como comenté al inicio del video, Github tenía grandes problemas con la configuración de sus entornos locales de desarrollo. A pesar de que tenían guías documentadas y habían programado y documentado sus scripts, los problemas aún surgían y muchos programadores gastaban tiempo solucionando problemas, en lugar de usar ese tiempo para programar.
Entonces, se crea Github CodeSpaces para solucionar estos problemas, ayudando a que los programadores se enfoquen solo en programar y no en estar resolviendo incompatibilidades en su computadora. Porque Codespaces lleva todo el entorno de desarrollo a la nube a través de máquinas virtuales y contenedores, a las cuáles se conectan los desarrolladores, ya sea por el navegador o por VSCode.
Así que Codespaces es más que más que un editor de código online, sino un completo entorno de desarrollo que vive en la nube y que se define a través de archivos de configuración. En palabras de Github: “Codespaces es Visual Studio Code soportado por máquinas virtuales de alto rendimiento que se inician en segundos”.
Gracias a Codespaces, Github redujo el tiempo que le tomaba a un desarrollador configurar su entorno de desarrollo para empezar a trabajar, de 45 minutos a menos de 10 segundos, ya que el todo el poder de cómputo ya no está en local, sino en la nube. Como ejemplo, Github.com está construido sobre Codespaces.
Por otro lado, Codespaces se paga por lo que se consume y no tiene una capa gratuita. Los precios comienzan en 0.18 dólares por hora de una máquina virtual de 2 núcleos y 4GB de RAM
Y como dato, además de Codespaces, existe github.dev, que es un VSCode en el navegador, completamente integrado con GitHub. ¿Cómo lo utilizas? solamente ve a un repro y cambia la URL: de github.com a github.dev y verás la magia.
Por ejemplo, de https://github.com/facebook/react a https://github.dev/facebook/react.
Pero existe una manera mucho más sencilla: es estar en el navegador, viendo el repro de GitHub y solamente presionar “.” en el teclado. ¡Y voila!
AWS Cloud9
El último en nuestra lista es AWS Cloud9 que, como comenté al inicio, es la continuación del proyecto Skywriter de Mozilla y uno de los primeros editores de código completamente funcionales desde el navegador. Fue lanzado en 2010 y en 2016 fue comprado por Amazon para integrarlo en AWS porque le faltaba un IDE en sus servicios.
Por cierto, en este blog hemos usado como sinónimos los términos IDE y Editor para simplificar los conceptos, pero no lo son. Sin embargo, si quieres saber las diferencias exactas, tienes la mejor explicación en español en este video.
Cloud9 brilla en el desarrollo de aplicaciones serverless con AWS Lambda, ya que por su naturaleza, este tipo de aplicaciones son bastante complicadas en depurar en local, pero ya que Cloud9 te da acceso a las instancias de EC2, tienes todo el control para hacer las pruebas y los tests necesarios. También te da acceso de sudo a las instancias de Linux que estés ejecutando para instalar o configurar todo lo que necesites.
Además de estas funciones que ya lo diferencian completamente de todos los demás editores de esta lista, incluye las funciones que esperamos como programadores: colaboración en tiempo real y chat, soporte para más de 40 lenguajes, autocompletado de código, historial de cambios, plantillas para iniciar proyectos nuevos sin configuración , además, también se integra con las soluciones de AWS como CodeStar para CI/CD. ¿No sabes qué es CI/CD? En este video tienes la mejor explicación en español.
Similar a Codespaces, Cloud9 se paga por consumo, pero no por el consumo de Cloud9, sino de la máquina EC2 que estés ejecutando. Si aún no conoces bien que es AWS y EC2, te recomiendo que vayas a nuestro curso: Fundamentos de AWS en EDteam.
Según la página de Cloud9, por una máquina corriendo unas 4 horas diarias, (con la hibernación automática configurada), y unos 20 días al mes, podrías estar pagando un promedio de 2 dólares mensuales.
¿Has usado alguno de estos editores? ¿Cuáles agregarías a esta lista? Si conocías estos editores online, hoy #LoAprendisteEnEDteam.