I typically use 3 different computers (home, office and travel). A good online IDE (Integrated Development Environment) would be really useful to avoid reinstalling and configuring all the editors and libraries and plugins and … I use in every computer. That’s why I always keep an eye on the new and most powerful and promising online code editors for the most popular languages.
I only pay attention to “real” IDEs, meaning that I rule out so-called online IDEs that offer just some kind of online file editor with, at most, syntax highlighting. I only care about online code editors that are comparable (or I believe they could become comparable) to the likes of Eclipse, JetBrains or Visual Studio Code (even if none of the alternatives I’ve found could be considered a smart code editor). These are some of the best online editors and initiatives that have attracted my attention:
AWS Cloud 9
AWS Cloud 9 is my number one option. I was already closely following the evolution of Cloud9 even before Amazon bought it. AWS Cloud9 is a cloud-based (IDE) that lets you write, run, and debug your code in the browser. As such, it includes a code editor but also a debugger and a terminal.
Cloud9 comes prepackaged with support for all major languages, which helps to kick-start your projects. And of course, being an Amazon product, it’s straightforward to call Amazon Services from your code (e.g. you can easily create and test AWS Lambda functions). You can directly access the managed Amazon EC2 instance that is hosting your development environment and use a preauthenticated AWS Command Line Interface. On top of this, the editor supports real-time collaboration (see the image above).
Of course, Amazon is not the only big tech company that realizes the need to move the editor itself to the cloud. On a “lighter” version, Microsoft offers the Monaco editor, which is a version of Visual Studio Code that can run in the browser. Stackblitz is another VSCode-powered online editor. Coder follows a slightly different approach. More than offering you an online environment, it offers an open source remote development environment serving Visual Studio Code.
Codeanywhere is a strong competitor. it supports a large number of programming languages but also several pre-built environments (e.g. you can program in PHP, or if you’re using PHP to write a WordPress plugin, choose the WordPress environment to get additional support). Moreover, beyond all the typical features, as its name indicates, it’s well designed to help you coding-on-the-go , in case there is an emergency and you need to fix some code from your phone or mobile device thanks to its responsive editor.
Online editors with amazing GitHub integration
CodeSandbox is an online editor tailored to web application development. A really cool feature of CodeSandbox is that whenever you save the project, you can share the URL with others and they can work on it (or fork it) as well. In fact, this was one of the original motivations of the project (if you want to know more about the CodeSandbox history listen to this podcast interview with the CodeSandbox founder)
It has other cool features (like NPM support and dependency management) but the reason that pushed me to include in this list is its GitHub integration. Just take the GitHub URL of the project you want to work on. Paste that URL on CodeSandbox and you automatically get a brand new sandbox that stays up to date with the latest changes automatically. Nothing else to do. See an example (note the URL format)
GitPod follows a similar philosophy. A single click on a GitHub-Issue, Pull-Request or Branch (or just prefixing the GitHub-URL with ‘gitpod.io#’) and Gitpod launches a developer workspace for you so that you can start working right away on that part of your project. The online editor in the workspace is Theia (see next section).
Not at the same level of tight integration, but GitHub for Atom is also worth taking a look at.
Online Eclipse editors
Eclipse is really serious about providing an Eclipse-based editor for the web. The Eclipse Cloud development top-level project is the entry point for all these efforts.
In a typical Eclipse fashion, there is not just one initiative but a number of proposals competing/complementing each other:
- Eclipse Che tries to bring the “traditional” look and feel and infrastructure of Eclipse to the cloud.
- Eclipse Dirigible is more of a cloud runtime platform that focuses on helping developers to build business applications. It covers database modeling, UI generation, REST-based services definition…
Do you have a clear understanding of the differences between the three? No? Me neither. Maybe then reading this FAQ on the differences between Eclipse Che, Eclipse Orion, and Eclipse Dirigible will help.
The good news is that they are at least aligning a little bit the different initiatives. Che is going to be used as the core infrastructure on top of which all kinds of IDEs (Orion and Dirigible but also other initiatives like Theia, built on the language server protocol, see below) will be able to run. There is for an instance a Dirigible plugin for Che that allows you to run Dirigible on Che workspaces.
Social Online IDEs
If your motivation for using an online IDE is to facilitate the creation and sharing of code with others, as part of a learning and community building process, then Glitch is the way to go. Glitch is a community-oriented programming and hosting platform where everybody can create, share and reuse projects from others. As the website says, “With working example apps to remix, a code editor to modify them, instant hosting and deployment – anybody can build a web app on Glitch”
Glitch was created by Fog Creek Software (that recently changed its name to Glitch, which says a lot about their vision and how much they believe in this product).
Last but not least, Repl.it comes with a few great code-sharing features. Really useful for, e.g, a programming course where the teacher could share the editor environment with all the students. Or, even better, with Repl.it is really easy to directly embed (and execute) a piece of code in any if your own web pages as you can see here:
Language server protocol
Nope, this is not an editor. But the language server protocol (LSP) will become more and more the foundation for creating all kinds of online IDEs.
In order to reduce the effort for IDE development, we should separate editing features from language semantics. If we do so, we could have a language-agnostic editor (i.e., a generic IDE) talking with a language-specific server. The server provides a number of services to the client (e.g. checking the correctness of the program) so that the client can focus on the interface editing features. Both are synchronized by means of a protocol. The Language Server Protocol (LSP) is the product of standardizing the messages exchanged between the editor and the server.
This architecture also provides developers with the freedom to choose the most suitable technology to implement the client editor and the language server independently of each other.
An LSP server implementation for almost every single programming language is already available (see this list of LSP servers) so it’s just a matter of time we see more and more IDEs build on top of them. And not even for textual languages, graphical languages can also benefit from this change of paradigm in online editors.
I am not using any web-based editor yet
As I said at the beginning, I’d love to do all my programming online. But I don’t do it. I still have both Eclipse and JetBrains installed and use one or the other depending on the project.
Why is that? The reason is simple: I don’t use online code editors because I suck at programming. I need all the help I can get to properly configure, code and debug my software projects. And for people like me, desktop-based programming environments are still the best option. Especially given their rich marketplace of third-party plugins. But I still have hope, maybe I’ll become a better programmer or, more likely, the online code editors will continue to improve.