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

Visual Studio Online

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.

And the future seems even brighter for Visual Studio with Microsoft announcing Visual Studio Online, an evolution of preliminary attempts to make remote development with VS Code easier. According to Microsoft, Visual Studio Online is a new web-based companion editor that compliments the Visual Studio family, and ensures you can work effectively from any device. If you can’t wait for its release, you can already sign up for its private preview program.

Codeanywhere

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)

Example of CodeSandbox integration with GitHub

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.

And a special shout out to CodeMirror, a text editor for the browser implemented in JavaScript. A rich programming API and a CSS theming system are available for customizing and extending CodeMirror to fit your needs. In this sense, in itself, CodeMirror is not a powerful editor but it turns out that CodeMirror is the editor that powers the GitHub Gist mechanism (one of the best ways to share code online) This alone books CodeMirror a spot in this list!

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 Orion, instead, tried a more “blank slate” approach using NodeJS and JavaScript to create a native web-based editor (as a trade-off with fewer features and language support than Che)
  • 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.

Eclipse online editors: che, orion and dirigible

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 hosting platform

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

If, for whatever reason, you don’t like Glitch, an alternative to Glitch is Plunker. CodePen is also an interesting option, specialized in the programming and sharing of front-end of code (the code excerpts to be shared are called “pens”). I like the real-time preview of the code you write. CodeSandbox above could also fit in this category. Runkit is another alternative that focuses on node development by providing a sandboxed JavaScript environment with npm packages preinstalled.

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.

LSP approach for textual programming languages

LSP approach for textual programming languages

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.

Join our Team!

Follow the latest news on software development, especially for open source projects

You have Successfully Subscribed!

Share This