IDE in the cloud: Mozilla Labs' browser-based IDE prototype

IDE in the cloud: Mozilla Labs’ browser-based IDE prototype

Mozilla Labs has launched a new open source project called Bespin that aims to …

Ryan Paul – Feb 13, 2009 9:15 am | 12

Bespin, a web-based code editor Credit: Mozilla Labs

Mozilla Labs has launched a new project called Bespin that provides a browser-based framework for interactive code editing. The prototype includes a simple IDE with a built-in command system, a basic project management interface, and an editor that supports syntax highlighting and other features.

The Bespin framework is distributed under an open source license and can be deployed by users on any server. It uses standards-based Web technologies and doesn’t rely on features that are specific to the Mozilla ecosystem, so you will eventually be able to use it in any standards-compliant Web browser. It does use some cutting-edge standards, however, so you will need Firefox 3 or a WebKit nightly build to test it today.

The editor’s internal components are written in JavaScript and are very easy to extend. Developers can add additional editor commands and syntax highlighting support for other programming languages. Out of the box, the current protoytpe comes with highlighting support for CSS, JavaScript, and HTML. Bespin uses several third-party frameworks, including Prototype and Scriptaculous. The editable text area is rendered on a Canvas element.

The lead developers behind the Bespin project are Ben Galbraith and Dion Almaer, the co-founders of Ajaxian, a developer-oriented blog about emerging JavaScript technologies and advanced Web development.

“As we strive to evolve the Open Web as a robust platform for application development, we believe in the potential for web-based code editors to increase developer productivity, enable compelling user experiences, and promote the use of open standards,” Galbraith and Almaer wrote in a statement at the Mozilla Labs website. “Just as Mozilla enables massive innovation by making Firefox open on many levels, we hope to do the same with Bespin by developing an extensible framework for Open Web development. We’re particularly excited by the prospect of empowering Web developers to hack on the editor itself and make it their own.”

A technical overview of the prototype and additional details about the Bespin vision are provided in a blog entry at Ajaxian. You can test the demo and see an introductory video presentation at the Bespin website.

The project is still at an early stage of development and there is clearly a lot of work to be done before it will be able to deliver the same practical value as existing desktop editors. Despite the limitations, it shows an enormous amount of promise and has the potential to eventually deliver a user experience that rivals even the best text editors. Performance is not particularly good in Firefox 3, and it lags quite a bit on my Linux desktop computer. Ongoing efforts by the major browser vendors to improve JavaScript performance will likely help a lot.

As a hardcore Vim user, I have often wondered what would be possible if someone tried to create a new editor today that provides the same kind of inherent programmatic extensibility as Vim or Emacs but using a cleaner structure and an object-oriented programming model. Bespin could answer that question and also bring a whole lot of additional value to the code editing space by leveraging the power of the Web.

Imagine being able to use the editor to edit itself and then save your JavaScript modifications to a server so that your custom enhancements will be accessible from anywhere when you log back in. That isn’t possible yet, but it seems like a natural evolution of the Bespin model. One of the features that is planned for the future is the ability to import files that are stored in publicly accessible version control repositories. Another feature that is on the roadmap is support for multiuser collaborative editing.

I spent some time looking through the code base, and I found it to be very accessible and intuitive. To make a new command, for example, all you have to do is add a simple JavaScript command definition in the frontend/js/commandline/commands.js file. The following is an example of a command from that file:

// ** {{{Command: insert}}} **
Bespin.Commands.add({
  name: 'insert',
  takes: ['text'],
  preview: 'insert the given text at this point.',
  hidden: true,
  execute: function(self, text) {
    self.editor.model.insertChunk(self.editor.cursorPosition, text);
  }
});

Bespin is an extremely impressive project that stretches the limits of what can be achieved with the browsers of today using native standards-based Web technologies. In doing so, it provides profound insight into the untapped potential of the medium and the kinds of capabilities and applications that could become commonplace in the future as browsers and Web standards evolve.