Labs/Bespin/FAQ

What is the Bespin project?

Bespin is an experiment in trying to create a web-based web-focused extensible code editing tool.

What is the first release?

We wanted to get a technical preview out to the community to show one potential view of a Web based code editor. Bespin is a showcase of HTML 5 technology including the Canvas tag.

What do I need to do to install the Bespin prototype

Nothing! Yay Web! Jut go to bespin.mozilla.com

Why is the Mozilla Developer Lab working on Bespin?

We are bullish on the Web, so we wanted to do an experiment that would test the latest Web technology to see if it it could match desktop class applications. What better choice of a project than something that developers care deeply about - their coding experience.

What are the goals of Bespin?

The main goals are two-fold. We both want to show what is possible on the Web, and experiment with the notion of a Web coding experience that lives in the cloud. We love tools like vi and emacs, and wondered what tools like that would look like on the Web platform. What if we make it clean, fast, extensible, and ready for the community to build on. We purposefully wanted to get Bespin out as early as possible because we want to start a conversation on exactly that point.

Why did you write Bespin on Open Web technologies?

Not only do we believe that the Web is the platform of now and the future, but we strongly believe in empowering the community to take ownership of their tools. As Web developers, it made sense to us to have a malleable tool we could change to fit our needs using the skills we have.

Why did you use Canvas?

One of the main goals of Bespin is to see if we can build a responsive example, and one that can handle large files. We have seen great examples of Web based coding areas that normally enhance a textarea, use contentEditable, or do their work with the DOM (e.g. each line is a div). However, they often fall down with large files and the ingenious hacks that people use to get it working cause pain. This lead us to rolling our own editor in Canvas, giving us full control over the experience. Since we have the full control, it enables us to do interesting visualizations in the tool itself.

Ben goes into more detail in this blog post

Is Bespin working with other Labs projects?

Most command lines in editors (e.g. emacs, vi) are simple beasts that act on editor. Ubiquity raised the bar on what a command line can do, and how users can experience it. We developed the Bespin command API to be the same as Ubiquity. The goal is to have Bespin commands literally be Ubiquity commands. This would enable the social aspects that Ubiquity give you; subscribing to commands.

Weave is another project that seems to be a natural fit. We are going to need to deal with storage and syncing. Weave could potentially contain the infrastructure.

Are you working on other developer tools?

Of course! This is the first experiment from the developer tools lab, but we really see the lab as a place for the wider community to share ideas about what developers need to be more productive on the Web. What tools do you need? Would great profiling tools (e.g. memory profiler) make sense? The possibilities are endless, and we want to start tackling key issues that we all have.

How can I get involved?

The Bespin project is a space for us to collaborate on what a Web based code editor could be.

• Check out our main announcement post has a lot more details on the vision and why we are doing this.
• Join our Bespin group
• Chat with us in our #bespin irc channel
• View the Bespin code documentation

The developer tools lab is much broader, and we very much want the wider community to share thoughts and ideas there.

What are the pieces of Bespin?

The initial Bespin prototype actually contains a few pieces. The major portion is the editor itself. The canvas editor is meant to be modular, and of course this is all Open Source. If you have the need for an editing experience in your projects, you could choose to use the Bespin editor.

How does the server work?

We have a Server API that the client speaks to. The API is clearly defined and we have implementations in Python and Java. The reason that we did that was that we want to make it very clear that anyone could write backend servers in their platform of choice. Currently the Python server is the most up to date version, and is what we are putting the bulk of our effort into.

What is Thunderhead?

Thunderhead is a much more bleeding edge edge experiment. We have talked to a lot of developers who are experiencing real pain with layout on the Web with respect to building Web applications (versus pages). We wanted to take a look at this problem and built the beginnings of a layout system using JavaScript and Canvas. This is Thunderhead, and we will be posting more about it soon.

How do I write a command?

Writing a command should look similar to Ubiquity commands if you have ever checked them out. How about an example? Here is a simple command that will sort the current buffer:

Bespin.Commands.add({
   name: 'sort',
   takes: ['direction'],
   preview: 'sort the current buffer',
   completeText: 'optionally, sort descending',
   execute: function(self, direction) {
       var buffer = self.editor.model.getDocument().split(/\n/);
       buffer.sort();
       if (direction && direction.toLowerCase().startsWith("desc")) buffer.reverse();
       self.editor.model.insertDocument(buffer.join("\n"));
   }
});

What browsers do you support? What are the requirements?

We currently rely on both Canvas, and a particular feature of Canvas called fillText that allows you to draw text to the screen. As you can imagine, you would quite like that in an editor.

Although we require that support, we have played with the notion of bitmap rendered fonts. Hopefully browsers catch up quickly so we don't have to do this ;)

As of February 2009, Firefox 3.x and WebKit nightly builds have the proper Canvas support. Chrome also works, but is not fast enough with the particular operations that Bespin is performing.

Is there an easy way to jump between the editor and the command line?

Yes there is! Simply type Control-J and you will flip between. You will notice that when the editor is out of focus the cursor will turn into a red block. In the command line the ">" prompt will turn orange when focus is applied.

Why did you decide to use Canvas and not contentEditable / DOM approaches

This project started as a challenge to see if we could create something fast and scale up to large files. We have tried to do this via the DOM in the past and always ran into bottlenecks and pain. The Canvas approach got us out from under the DOM and we thought it was an interesting path to go on. We wanted to share this with the community to see if it is interesting. We are game for people to try to do this using contentEditable / DOM / other techniques and would love to see those side by side. This was just our approach.

Why did you choose Prototype?

This can become a religious war. There isn't a huge method to the reasoning on us choosing Prototype. There are a couple of things:

• We did some jQuery work, but since the app doesn't actually use the DOM a lot, it didn't feel like the best choice for us. We love jQuery, but it lacked some of the helpers that we enjoy with Prototype (array stuff, OO stuff etc).
• We use Prototype now, but this will probably change. We want components such as the editor to play nice, and adding global objects makes us a bit concerned. Also, with the comet work, and other pieces, it may make sense for us to actually turn to Dojo which has all of this already. Still working this all out.

How can I get other languages support for syntax highlighting?

You have a couple of choices:

• Wait for someone to do it.
• Give it a go yourself!

It isn't as hard as you think. Check out the JavaScript Syntax Highligher to see.

We also have a plan for syntax highlighter plugins that will grok vim syntax files, emacs, or textmate so we don't have to reinvent the wheel. Want to help with that too?

Why do you tell me my browser isn't supported?

We have seen some folks talking about the pop-up that we show when we detect that the browser in question won't support Bespin.

It is important to note that we aren't doing a user agent check. We actually check for the functionality that is required for this to work: Canvas and a subset of Canvas (drawing text)

You can see what we need in the following JavaScript Code:

function checkBrowserAbility() {
    if (typeof $('testcanvas').getContext != "function") return false;
    var ctx = $('testcanvas').getContext("2d");
    if (ctx.fillText || ctx.mozDrawText) 
        return true; // you need text support my friend
    else
        return false;
}

So, it isn't that we don't love your browser. It just won't work.

Do you have a roadmap for Bespin?

We are hoping that the open community that is "the Bespin project" will make a roadmap very fluid. We have already seen people giving code drops with amazing experiments. However, to give a guide, here are some of the high level thoughts and items that we feel are worth investigating as a Labs/Bespin/Roadmap.

Can I host Bespin on my own server?

Absolutely! We want this to happen. Currently there are implementations of a Python and Java server. The easiest to run is the Python server and here are directions

Why doesn't Bespin support i18n well?

Covered on Labs/Bespin/KnownIssues:

Why doesn't Bespin support i18n well?

I am having strange issues with my key bindings

Covered on Labs/Bespin/KnownIssues:

I am having strange issues with my key bindings

Why is copy and paste not working with the system clipboard?

Covered on Labs/Bespin/KnownIssues:

Why is copy and paste not working with the system clipboard?

Why does it seem slow on Linux?

Covered on Labs/Bespin/KnownIssues:

Why does it seem slow on Linux?

Why does it seem slow on Chrome?

Covered on Labs/Bespin/KnownIssues:

Why does it seem slow on Chrome?