Editores de código online – Programa sin salir de tu navegador

Uso regularmente tres ordenadores diferentes (casa, trabajo y viajes). Poder usar un buen IDE (Integrated Development Environment) en la nube me iría de perlas para evitar tener que instalar y configurar un entorno de programación (editor, plugins,…) en cada ordenador.  De ahí mi interés en todo lo que haga referencia a editores de código online.

Pero IDEs de verdad, no me interesan aquellos editores en el navegador que sólo ofrecen un editor de texto con, como mucho, syntax highlighting. Quiero un editor en la web que sea comparable (o yo me crea que puede llegar a serlo) a los Eclipse, JetBrains, Visual Studio Code y compañía (aunque no lleguen a ser editores de código inteligentes).  Os presento los entornos de programación online más interesantes:

AWS Cloud 9

AWS Cloud 9 es mi primera opción. Ya seguía con atención la evolución de Cloud9 incluso antes de qué Amazon la comprara. AWS Cloud9 es un entorno de programación en la nube que te permite escribir, ejecutar y depurar tu código en el navegador. Como tal, incluye un editor de código pero también un debugger y un acceso a terminal.

Cloud9 viene ya con soporte para los lenguajes más populares, lo que te permite empezar a programar sin tener que configurar nada. Y por supuesto, siendo un producto de Amazon, es muy fácil también escribir código que utilice todos los servicios de Amazon (e.j. puedes crear y testear rápidamente funciones AWS Lambda). Tienes acceso directo a la instancia Amazon EC2 que aloja tu entorno desarrollo. Además, el editor permite la colaboración en tiempo real (ver la imagen que encabeza el post).

Visual Studio Online

Amazon no es la única gran empresa tecnológica que entiende que hay que tener presencia en la nube, también para la propia actividad de desarrollo. De una forma más “light” también Microsoft hace sus pinitos. Microsoft ofrece el editor Monaco, una versión de Visual Studio Code capaz de ejecutarse dentro del contexto del navegador. Stackblitz es otro editor de código online que utiliza VSCode como “motor”. Coder sigue una aproximación diferente. Más que ofrecerte una “versión online” de VS Code, lo que te ofrece es un entorno de desarrollo remoto que viene cargado con Visual Studio Code.

Y el futuro parece aún más prometedor para Visual Studio. Microsoft acaba de anunciar Visual Studio Online, la evolución de intentos anteriores destinados a facilitar la colaboración de programadores remotos con VS Code. Visual Studio Online ofrecerá la misma experiencia que Visual Studio (con todos los complementos y extensiones a los que estás acostumbrados) pero permitiendo el acceso a tus workspaces desde cualquier dispositivo.

Codeanywhere

Codeanywhere es otro competidor fuerte en este espacio. Viene configurado para dar soporte a todo tipo de lenguajes. Aún mejor, Codeanywhere también viene con varios entornos / proyectos preconfigurados. Por ejemplo, puedes programar en  PHP pero si el código PHP es para un plugin de WordPress, tienes también la opción de decir que quieres programar un proyecto WordPress y tener soporte específico para ese entorno.

Además, más allá de todas las funcionalidades esperadas, como su nombre indica, Codeanywhere está diseñado para cuando estás de viaje, tienes que tocar algo de tu código y no tienes más remedio que utilizar tu tablet o teléfono para eso. Como podéis ver, es un editor “responsive”.

Editores online que se integran con GitHub

CodeSandbox es un editor online especializado en el desarrollo web. Una funcionalidad muy útil de CodeSandbox es que cada vez que guardas el proyecto, puedes compartir la URL del proyecto y cualquiera, sólo con esa URL, puede acceder a él y modificarlo. Ésta fue de hecho la motivación original que llevó a su creador a empezar el proyecto (más sobre la historia de CodeSandbox en esta entrevista al fundador de CodeSandbox)

Tiene también otras funcionalidades muy interesantes (como el soporte a NPM y la gestión de dependencias) pero la razón que me convenció a incluirlo en esta lista fue su integración perfecta con GitHub. Basta con copiar la URL de tu proyecto en GitHub y copiar esa URL en CodeSandbox para tener un nuevo entorno de programación ligado al proyecto para empezar a modificarlo, y que además se mantendrá actualizado con todos los cambios que otros hagan directamente en GitHub.

GitPod sigue una filosofía similar. Un simple click en la página de una issue, pull request o branch (o prefijando la url de GitHub con ‘gitpod.io#’) y Gitpod lanza un entorno de programación asociado a esa issue o pull request. El editor en ese entorno de programación online es Theia del que hablamos a continuación.

No llega al mismo nivel de integración pero vale la pena que os miréis también GitHub for Atom.

Y, finalmente, mención especial a CodeMirror, un editor de texto para el navegador creado en JavaScript. Fácilmente extensible via su API y sistema de plantillas CSS. La verdad es que, por sí mismo, CodeMirror no es un editor potente pero si la base de otras herramientas más interesantes. Por ejemplo, es el editor que usa GitHub para que puedas crear tus Gists (una de las mejores maneras de compartir código online). Creo que sólo esto es más que suficiente como para concederle a CodeMirror un lugar en esta lista.

Editores online para Eclipse

Eclipse se toma muy en serio la misión de proporcionar un editor de código online basado en Eclipse. De hecho, el Eclipse Cloud development proyecto es el punto de entrada a todas las iniciativas Eclipse en este campo.

Y es que no hay un editor online para Eclipse, hay tres, que compiten y se complementan:

• Eclipse Che intenta ser la traducción online del Eclipse al qué estás ya acostumbrado.
• Eclipse Orion es una visión más tipo “tabula rasa” que busca proporcionar la mejor experiencia con un editor más nativo para la web y que usa tecnologías más “modernas” como NodeJS y JavaScript. A cambio, tiene menos funcionalidades y soporta menos lenguajes que Che.
• Eclipse Dirigible es más una plataforma en la nube que intenta facilitar la creación de software empresarial. Ayuda por ejemplo en la modelización de la base de datos la generación de la interfaz de usuario, la creación de servicios REST,…

¿Te ha quedado claro la diferencia entre los tres editores online de Eclipse? ¿No? Pues a mi tampoco. Échale un ojo a este FAQ sobre las diferencias entre Eclipse Che, Eclipse Orion y Eclipse Dirigible a ver si te aclara las cosas.

La buena noticia es que como mínimo están mirando de estar cada vez mejor alineados. Che va a usarse como la infraestructura básica sobre la que otros van a poder ejecutarse (Orion y Dirigible pero también otros editores como Theia, basado en el language server protocol, ver más abajo) para así combinar las ventajas de cada uno. Por ejemplo, la imagen enseña el plugin de Dirigible ejecutándose en Che.

IDEs sociales

Si tu objetivo principal al usar un entorno de programación en la nube es el compartir código con otros como parte de un proceso de aprendizaje y construcción colectiva, entonces Glitch es tu opción. Glitch es una plataforma para programar colaborativamente donde cada proyecto tiene además asociado una cuenta para su alojamiento web. Con Glitch cualquiera puede crear, compartir y reutilizar proyectos de otros (lo que en Glitch se llama “remix”, la idea es que mires qué proyectos te gustan y los puedas utilizar como punto de partida para el tuyo propio).

Glitch fue creado por Fog Creek Software (que acaba de cambiar su nombre a Glitch, lo que dice mucho sobre hasta qué punto creen en el producto).

Y si no te gusta Glitch, puedes probar Plunker. CodePen es otra opción, más especializado en la creación de código front-end. CodePen viene con una visualización en tiempo real del resultado del código que estás tocando. CodeSandbox, del que ya hemos hablado antes, también se puede ver como un  ejemplo de programación social. Runkit es otra alternativa que se especializa en desarrollo para node ofreciendo un entorno “sandboxed” para JavaScript con paquetes npm preinstalados.

Por último, Repl.it  viene con algunas funcionalidades muy útiles para compartir código. Por ejemplo, en el contexto de un curso, el profesor puede organizar un entorno virtual a compartir con los alumnos. O aún, mejor puedes incrustar directamente un trozo de código (y ejecutarlo) directamente en tu web, como se ve a continuación:

Language server protocol

No, no es un editor. Pero el language server protocol (LSP) es cada vez más el componente clave para crear nuevos IDEs online.

La idea detrás de LSP es simple. Para simplificar el esfuerzo de crear un nuevo entorno de programación, hay que separar lo que es la edición del código de la semántica de ese mismo código. Si el editor no tiene qué entender la semántica de cada lenguaje de programación, podemos ahorrar mucho esfuerzo y esforzarnos en proporcionar la mejor experiencia de edición. Eso sí, entonces, este editor agnóstico (en lo que se refiere al lenguaje) necesita un servidor específoco para el lenguaje que utiliza el usuario. Este servidor proporcionará todos los servicios que el cliente no es capaz de proporcionar (ej. verificar la corrección del programa). Cliente y servidor se sincronizan gracias a un protocolo de comunicación específico. El Language Server Protocol es la estandarización de este protocolo de mensajes entre el editor y el servidor. 

El protocolo LSP para lenguajes de programación textuales

Tenemos ya un servidor LSP para casi cualquier lenguaje (ver esta lista de servidores LSP) con lo que crear un nuevo editor de código online puede usar LSP para olvidares de implementar ningún tipo de soporte específico a cada lenguaje individual. Esto es así incluso para lenguajes gráficos.

El porqué no uso ningún IDE online

Como decía al principio, me encantaría programar todo el tiempo sin salir de mi navegador. Pero no lo hago. Sigo con mi Eclipse y mis Jetbrains instalados.

¿Porqué? La razón es muy simple (¡y triste!): soy un programador muy malo. Y necesito toda la ayuda del mundo para configurar, escribir y depurar mi código. Para la gente como yo, los IDEs clásicos son todavía la mejor opción, también por su gran ecosistema de plugins (incluyendo plugins externos) que permiten fácilmente tener la configuración y soporte óptimo para el tipo exacto de proyecto que te ocupe.

Pero hay esperanza. A lo mejor mejoro ni nivel de programación. O, más probablemente, los editores de código online seguirán mejorando a pasos agigantados.