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.
Today we’re launching Bespin as a project within our Developer Tools Lab to focus on this exploration.
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.
Overview
Bespin proposes an open extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards.
Based upon discussions with hundreds of developers, and our own experience developing for the Open Web, we’ve come up with a proposed set of features along with some high-level goals:
- Ease of Use — the editor experience should not be intimidating and should facilitate quickly getting straight into the code
- Real-time Collaboration — sharing live coding sessions with colleagues should be easy and collaboratively coding with one or more partners should Just Work
- Integrated Command-Line — tools like vi and Emacs have demonstrated the power of integrating command-lines into editors; Bespin needs one, too
- Extensible and Self-Hosted — the interface and capabilities of Bespin should be highly extensible and easily accessible to users through Ubiquity-like commands or via the plug-in API
- Wicked Fast — the editor is just a toy unless it stays smooth and responsive editing files of very large sizes
- Accessible from Anywhere — the code editor should work from anywhere, and from any device, using any modern standards-compliant browser
The Initial Prototype
As part of this announcement, we’re also releasing an early experimental prototype to demonstrate some of the concepts of Bespin and the possibilities that it opens up.
Bespin 0.1
- Initial prototype framework that includes support for basic editing features, such as syntax highlighting, large file sizes, undo/redo, previewing files in the browser, importing/exporting projects, etc.
Screenshots of Bespin 0.1 running in modern, standards-compliant browsers
All of the source code underlying the Bespin experiment is being released as open source software under the the MPL.
Get Involved
Mozilla Labs is a virtual lab where people come together online to create, experiment and play with Web innovations for the public benefit. The Bespin experiment is still in its infancy and just getting started. There are many ways to join the team and get involved:
- Play around with the demo and let us know what you think
- Report a bug
- Grab the source code and fix a bug or add a feature
- Discuss, debate and add to the design in the Bespin discussion group
- Join us in #bespin on irc.mozilla.org
– Ben Galbraith and Dion Almaer, on behalf of the Bespin development team
Tags: announcement, bespin
Looks very promising though still rough. The main issues I saw was blurry text (I used Chrome and 120dpi screen – one could expect trouble dealing with this when using a canvas) and the ease with which I could loose my edit by pressing the Backspace key (the browser went to the previous page loosing my changes) – the changes must remain!
One other thing, in the collaboration mode, it would be nicer if every user had a private view in addition to a shared, common view. This way both can work on the same code but also each can look aside without disorienting the other.
I’ll try to post bugs on the above…
Hey Ben,
nice – I’ll show this off in my IT Project Mgmt class re collaboration. I really like the dashboard – maybe there can be language specific versions ie in Rails a column for controllers, for models, for stylesheets, …. that would be really productive when jumping between files.
sw33t
About Linux performance: with 3.0 it’s indeed very slow (as in unusable) on my system (Ubuntu 8.10, nvidia, no visual effects). But on 3.1 (and 3.2) the speed is quite acceptable.
Thanks guys but i won’t try this. I’m too bored to register. Why should i register just to try the demo anyway?
Cm’on…
What is the plan for integration with a source code management system?
These guys need to get out a little more. They have good goals, but each of their goals (perhaps with the exception of the heatmap) is already accomplished by another project. Amy-editor has collaborative editing, codemirror can edit large files faster than Bespin can. But my point is that none of these use the canvas tag. Canvas is bad because I can’t make a quick edit on my iPhone. Since when have you ever seen an Internet Cafe that had Firefox on them? They’re defeating their own goals by doing it in a canvas tag. Instead they should resurrect Amy-editor and port the rendering engine from Codemirror over to it.
@ben I really hope you mean that about migrating the features into Gecko eventually. I’m imagining a future where HTTP and HTML are merely wrappers for opaque Javascript code that implements a complete UI toolkit in a fullscreen Canvas element, and I don’t like it one bit. That future is no better than one where Flash or some other proprietary thing replaces HTML. I think it’s absolutely the wrong direction for the Web, even though otherwise I love the ideas behind the Bespin project.
Very interesting.
I especially like the re-use of Ubiquity APIs to create linguistic commands.
On the other hand, creating a graphic toolkit on top of canvas seems really wacky. That seems really un-webish. Also, it is hard to imagine the performance would be better than a tweaked and native rendering engine. That said, I understand that the browser APIs may not be the best to do what you need…
I’ve been playing with a browser JS editor in my spare time so I could do almost everything I need online.
Thanks for this
all the world needs now is JS2 and a svg editor in svg and the desktop is dead.
This is super cool, just want to request, can you put a shortcut to go to the command from the editor and vice versa coz using the mouse to switch between them slows down productivity (at least for some)
This is really promising work! It will be very interesting to see where you can take this.
Re: the collaboration demo…
In the real world I personally find “instant update” collaboration to be at bit award and scary. I like to have control over whats going on with my stuff. I realize that this is mostly playing around with ideas and concepts on your part but I’d like to share my view on this subject anyway.
The direction I would advocate for this type of editing is an editing mode where the user is made aware of changes made by others in real time but still retain the control over when, and what parts of the code, that is updated locally. As an example of how that could be implemented is to indicate graphically what lines/code snippets/functions have been modified, by whom, and to what extent. Then let the user at any time apply the most recent version (or from specific user or whatever) of a line/code snippet/function or update the entire file etc.
I guess there are many different opinions on how things like this are to be done but this is my 2c
Hope you keep playing around with this technology! It looks fairly awesome so far!
I hope can translate the chinese version in this tool.Can we do that?
Sounds like a tall order, an excellent plan and good start.
Good luck folks
Andy M
It’s possible to use with other services? For example can I host it on my own as an add-on to other services?
Outstanding concept and initial implementation! Will be tracking this product with great interest.
Is it a reasonable assumption that processing tab key events is high on the task list? i.e. hitting the tab key with an active selection results in said selection being deleted, straying from typical editor behavior (indent in/out).
Off to play with it some more …
I just played around with Bespin and I am incredibly impressed. The app is extremely fluid and easy to use.
One thing that concerns me is the background and font colors. The dark background and dark font don’t contrast well and make it hard to look at for long periods of time. The user should have the ability to change this.
Anyway, GREAT work! I am always impressed by Mozilla.
Interesting, I’ve been working on a project named Bespin for several months now (A video podcast series around news in the cloud). Though it doesn’t surprise me that someone else thought the name fit in the cloud computing era, the two products shouldn’t be confused with one another.
Really impressive app. However, I cannot type curly braces.
Auto-completion would be a nice feature a tabbed interface as well.
Talking about standards, I can only guess from context that the dates on this site are in US-type Month.Day.Year order, although I find those usually written with a slash.
The initial release of this page in ISO notation (http://en.wikipedia.org/wiki/ISO_8601) would then be 2009-12-02, I guess.
interesting, but thias alpha release make no sence to work with …
I am all for a cross-platform IDE, but why not extend a desktop tool, like Kompozer, which would be much easier to work with? Web-based software definitely has its place, but I think that most people still prefer to use desktop based word processors, spreadsheets and IDEs.
This is great! The only thing I’m wondering is whether or not Lando is going to help debug…
freakingA… das ist zuper!
Sleek interface and I think now I can edit my companies html pages from anywhere in the internet. But, it looks like it doesn’t support PHP and as of now I couldn’t figure out a way to send the files / upload the files to my real server.
another quick request will to add a command to open the files ie, open file
also the command line should be context sensitive like Cisco router CLI
ie
project project_name should change the context
and then
open file_name should open a file in the project_name context
Sleek interface and I think now I can edit my companies html pages from anywhere in the internet. But, it looks like it doesn’t support PHP and as of now I couldn’t figure out a way to send the files / upload the files to my real server.
another quick request will to add a command to open the files ie, open file
also the command line should be context sensitive like Cisco router CLI
ie
project project_name should change the context
and then
open file_name should open a file in the project_name context
(http://monsoondream.com/blog/?p=10)
I like the idea of a cloud viable editor. The power of this will come in when you can tie it to a source control tool like a wiki engine, that can cross link documentation right with code via syntax highlighting.
so a function in example.js
function somefunciton(var1,var2){
//some set of operations
}
auto generates a link around somefunction to a wiki page that describes some functions operation and lifecycle (changes, bugs, TODOs, and other meta data)
As far as editors go, i think JEdit is the simple text editor to compete with, its on all platforms, and it has great plugin, macro and shortcut key support. Other text editors are not as cross platform, and since this is in the cloud, this needs to beat the cross platform options out there.
Maybe this can compete in places of code cooperation where JEdit can’t, like a wiki and MS word compete with composing an online encyclopedia.
Very nice. A fine example of what you can achieve with just JavaScript and HTML.
And it looks to be a very useful tool too. I can imagine just going to a URL to update my website files. No need for file transfer, just quick and simple editing.
The command line tool is also really nice. I can’t wait for the “set callaborate yes” command to work! (Couldn’t figure out the command to move between command line and editor though)
I’ll keep my eye on this.
And very nice scrollbars too!
Although I am impressed with this demo, I don’t like this idea of a graphic you can render text to on the browser. We’d all better say hello ‘drm protected’ textual content that can no longer be read by screen-readers, and content which doesn’t honour your font choices, or re-size properly to different displays.
Already some news sites use some awful hacky javascript and layers to present uncopyable text, and it wont be long before they have embedded pdf-like viewers with completely custom renderers and unaccessible content – like flash but worse.
Back on the demo, quite impressed – particularly that implementing the whole toolkit in javascript works at all, let alone at interactive speed. I was thinking of doing something like this in java (at least, the remote editor part), because of the access to a proper widget set and performance, but this shows that perhaps it could be done in javascript instead.
Although a limited demo that works in english for able bodied people is one thing, a full-blown i18n capable toolkit, non-english or custom keyboard layouts, and full accessibility and the rest is another thing entirely (if it is even possible).
a “publish to server” feature would be something I’d want up front, but it’s already incredible. way to go!!
can I install it as Mozilla add-on via Tools->add-ons->get add-ons?
Search for “bespin” doesn’t yield results.
I can only say: Wow!
Keep up the good job. I’ll be reading your source code.
I would like blocks of code to be able to be tabbed in. This does not seems to work. Also untab with Shift tab doesn’t work. I would like text that is selected to be a different color. it is hard to read the text that is selected. Also control k cuts a line but control u should paste the line according to most text editors in linux.
Great job on the editor. I would like ti to work on google chrome and opera. I have seen opera working fine with canvas on other sites before.
Not every problem that has a solution need be solved.
I can’t imagine the amount of technical complexity required to build a web application such as this, but neither can I imagine a reason why it is better in a pragmatic sense than my current editor (emacs).
Maybe I cannot see the same picture as everyone else, but I’ve summed up my initial thoughts at: http://agentultra.com/?p=193
Good luck with the project.
I had (very) bad performance under ubuntu interpid using fx3 with an nvidia card.
Installing driver version 180 solved everything.
See: http://ubuntuforums.org/showpost.php?p=6634437&postcount=12
@Dao – You know many blind programmers?
awesome love it!
could you make it downloadable some day so that I could test and code javascript php and HTML inside firefox?
the problem with this is that you can’t test it and you can’t download what you’ve made.
This is just awesome, many features, great performance, and open source.
Its visuals are very good.
Thank you guys, keep up the great job. This is a rly good project.
could you make it downloadable some day so that I could test and code javascript php and HTML inside firefox?
the problem with this is that you can’t test it and you can’t download what you’ve made.
I hope you can translate the chinese version in this tool.
Good luck with the project.