Monday, March 2, 2009

VisualWorks for JavaScript: Using Bespin to edit Joose components

When I first saw Bespin, the new "code-in-the-cloud" editor that was created by Dion and Ben at Mozilla, and it's multi-pane editor, ideas kept popping up in my head that this might be the ideal platform to complete my ultimate secret masterplan: Recreate VisualWorks for Smalltalk for JavaScript.

In VisualWorks one navigated (some people actually still do this in present tense) the loaded classes and the components of classes like methods and instance variables by progressively clicking through multiple panes. As soon as one reached an item that could be edited in source the edit view switched to that item. Saving after editing an item would directly compile the new source and put it into the running system.

Don't get me started on the debugger, which was simply awesome, and in my opinion no IDE has ever reached its elegance.

Anyway, back to the secret masterplan. Bespin also has a multi-pane view to navigate files which makes it the perfect candidate to act as a platform for VisualWorks for Joose :)

The goals for this platform would be:
  • Allow editing of loaded Joose components
  • Allow creating classes, methods, instance vars, etc. using some kind of UI
  • Saving a change should update the loaded class. One could, thus, edit the loaded application while it is running (This is the most important feature for VisualWorks-feeling)
  • Persisting changes to the server would be nice, too :)
I started work on a prototype. After the first 4 hours of hacking the system allows navigating loaded Joose classes using the multi-pane view and loading method source code into the edit-view:

To make this actually work, there are, however, still many challenges to overcome:
  • The whole persistence part is practially unsolvable with the current state of Joose (However, Nickolay is working on this problem)
  • Bespin is switching to a different "physical" URL to edit a document. This isnt really cool, if you want to be able to edit stuff that is loaded on your current page.
The architecture would look as follows:
  • Joose objects created using the Bespin editor would have an extra property to store the actual source that was used for their creation.
  • One could also create extra properties to store stuff like method level documentation, etc.
  • When "saving" we actually serialize all loaded Joose classes to a text representation. The text representation will probably not look like a classic Joose class but rather we a sequence of statements like MyClass.meta.addMethod("test", function () { return "test" })
  • Loading loads that representation and then uses reflection to show the actual elements.
Post a Comment