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.

3 comments:

Nickolay said...

Awesome stuff!

And if it will be possible to integrate the result with Oryx (http://bpt.hpi.uni-potsdam.de/Oryx) - then we'll have IDE + Modeller in one place..

I wonder - if its possible to run Firebug's debugger in the "div" or "iframe"?...

The Smalltalk and Seaside Blog said...

Why not use wonderful VisualWorks in the first place to produce JavaScript and/or Joose?

There is no development and debugging environment as mature, sophisticated and productive as VisualWorks Smalltalk.

And there was some work on generating JavaScript from Squeak Smalltalk called ST2J http://www.squeaksource.com/ST2JS. Unfortunately not yet for VisualWorks.

Generating Joose from VisualWorks would be just phantastic. Einfach geil!

Any ideas?

Greetings to beautiful Potsdam!

Malte said...

Here is your plan:
Do what the cappuciono guys did (http://cappuccino.org/) (They implemented an Objective J to JavaScript Compiler and then implemented the full Cacoa API to run in the browser):

- Implement a Smalltalk to JS Compiler
- Implement the primitives with JS

Run VisualWorks in the browser.