Smalltalk › Squeak › Squeak - Dev

[ANN] SqueakJS

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

9 messages Options

Bert Freudenberg

[ANN] SqueakJS

Hi all,

I'm proud to announce SqueakJS, a new Squeak VM that runs on Javascript:

http://bertfreudenberg.github.io/SqueakJS/

It was inspired by Dan's JSqueak/Potato VM for Java, and similarly only runs the old Squeak 2.2 mini.image for now. But I developed it inside the Lively Kernel, which allowed me to make a nice UI to look inside the VM (in addition to all the Lively tools):

It represents regular Squeak objects as Javascript objects with direct object references. SmallIntegers are represented as Javascript numbers, there is no need for tagging. Instance variables and indexable fields are held in a single array named "pointers". Word and byte binary objects store their data in arrays named "bytes" or "words". CompiledMethod instances have both "pointers" and "bytes". Float instances are not stored as two words as in Squeak, but have a single "float" property that stores the actual number (and the words are generated on-the-fly when needed).

For garbage collection, I came up with a hybrid scheme: the bulk of the work is delegated to the Javascript garbage collector. Only in relatively rare circumstances is a "manual" garbage collection needed. This hybrid GC is a semi-space GC with an old space and a new space. Old space is a linked list of objects, but newly allocated objects are not added to the list, yet. Therefore, unreferenced new objects will be automatically garbage-collected by Javascript. This is like Squeak's incremental GC, which only looks at objects in new space. The full GC is a regular mark-and-sweep: it's marking all reachable objects (old and new), then unmarked old objects get removed (a very cheap operation in a linked list), and new objects (identified by their missing link) are added to the old-space list. One nice feature of this scheme is that its implementation does not need weak references, which Javascript currently does not support.

This scheme also trivially supports object enumeration (Squeak's nextObject/nextInstance primitives): If the object is old, the next object is just the next link in the list. Otherwise, if there are new objects (newSpaceCount > 0) a GC is performed, which creates the next object link. But if newSpaceCount is 0, then this was the last object, and we're done.

The UI for now copies the Squeak display bitmap pixel-by-pixel to a typed array and shows it on the HTML 2D canvas using putImageData(). Clipboard copying injects a synthetic CMD-C keyboard event into the VM, then runs the interpreter until it has executed the clipboard primitive in response, then answers that string. This is because the web browser only allows clipboard access inside the copy/paste event handlers. You can drag an image file from your disk into the browser window to load it.

Besides running it on your desktop, you can install it as offline web app on an iPad:

On the iPad there is neither right-click nor command keys, but the menu is available on the inside of the flop-out scrollbars. It needs a fairly recent browser, too - it works in iOS 7, but apparently not in older ones. On Android it works in Chrome 31, but not quite as well (for example, the onscreen-keyboard does not come up on an Galaxy Note tablet).

The sources are on GitHub, and contributions are very welcome.

Have a great Christmas!

- Bert -

PS: I had to shrink the pictures, see them here http://croquetweak.blogspot.de/2013/12/squeakjs-lively-squeak-vm.html

Jeff Gonis-2

Re: [ANN] SqueakJS

Bert,

This is fantastic work! I didn't know you were going to announce it so soon, I was playing around with Dan Ingalls' Alto simulator the other day and stumbled onto your work and I thought it was very cool.

Have you given any thought to continuing the Slang approach and adding a translator to LLJS, a subset of JS designed to emulate C? It was something I had been thinking of toying with because it seemed to offer a lot of leverage with the current Slang approach.

Anyway, great work, it was really fun to play with and something exciting to think about for the future!

Jeff

Bert Freudenberg

Re: [ANN] SqueakJS

On 20.12.2013, at 22:35, Jeff Gonis <[hidden email]> wrote:

> Bert,
>
> This is fantastic work! I didn't know you were going to announce it so soon,

It is still early, yes, just one month into the project, but it is usable and at a point where I think others could contribute.

> I was playing around with Dan Ingalls' Alto simulator the other day and stumbled onto your work and I thought it was very cool.

Thanks :)

> Have you given any thought to continuing the Slang approach and adding a translator to LLJS, a subset of JS designed to emulate C? It was something I had been thinking of toying with because it seemed to offer a lot of leverage with the current Slang approach.

There are various ways to go about this, indeed. Using Emscripten to compile the C sources to asm.js should work fairly well, as well as doing a NaCl VM (as Yoshiki demonstrated already). These would give you a higher-performance VM, faster.

However, asm.js is only supported on Firefox so far, and NaCl is exclusive to Chrome. I don't expect the browser vendors to agree on a particular technology any time soon.

A pure Javascript VM has the potential to work equally well on all browsers with the same code base. Besides, it's more fun to work on ;)

The Slang code is not too useful for making a real Javascript VM, because it really is just C with Smalltalk syntax. Had I used the Slang sources, I would have ended up having to change them, and the translator, quite a lot. Instead, I opted for a very different object model and garbage collection scheme that is much better suited to Javascript.

The nicest thing about Slang is that you can emulate it in Squeak, so you can use Squeak's debugging tools. However, I used the Lively Kernel for developing SqueakJS, and some of my tools are even nicer than what we have in the simulator. So there really was little incentive for me to try making use of the Slang sources.

- Bert -

Jeff Gonis-2

Re: [Vm-dev] Re: [squeak-dev] [ANN] SqueakJS

Hi Bert,

Thanks for the reply. Just wanted to make a quick comment from my phone so excuse the brevity. Asm.js is just a constrained subset of javascript and so works in every browser just at varying speeds. Chrome has begun optimizing it and is close to firefox in speed and ie will also be optimizing for it going forward. So it could offer a very nice way to get universal coverage and great speeds out of slang transpiled code.

Again though, fantastic work so far!

Jeff

Chris Muller-3

Re: [ANN] SqueakJS

In reply to this post by Bert Freudenberg

Ultra cool, Bert, congratulations!

I was glad to see several, "for now"'s in your note. Could you possibly give us a clue to your roadmap?

A practical implementation of this has massive implications for Squeak -- deployment to any JS-enabled device. Obviously this is a fantastic demonstration of wrapping computation, please tell me this is not just an experiment but something for which you have broader plans for..?

Thanks!

On Fri, Dec 20, 2013 at 3:31 PM, Bert Freudenberg <[hidden email]> wrote:

Hi all,

I'm proud to announce SqueakJS, a new Squeak VM that runs on Javascript:

http://bertfreudenberg.github.io/SqueakJS/

It was inspired by Dan's JSqueak/Potato VM for Java, and similarly only runs the old Squeak 2.2 mini.image for now. But I developed it inside the Lively Kernel, which allowed me to make a nice UI to look inside the VM (in addition to all the Lively tools):

It represents regular Squeak objects as Javascript objects with direct object references. SmallIntegers are represented as Javascript numbers, there is no need for tagging. Instance variables and indexable fields are held in a single array named "pointers". Word and byte binary objects store their data in arrays named "bytes" or "words". CompiledMethod instances have both "pointers" and "bytes". Float instances are not stored as two words as in Squeak, but have a single "float" property that stores the actual number (and the words are generated on-the-fly when needed).

For garbage collection, I came up with a hybrid scheme: the bulk of the work is delegated to the Javascript garbage collector. Only in relatively rare circumstances is a "manual" garbage collection needed. This hybrid GC is a semi-space GC with an old space and a new space. Old space is a linked list of objects, but newly allocated objects are not added to the list, yet. Therefore, unreferenced new objects will be automatically garbage-collected by Javascript. This is like Squeak's incremental GC, which only looks at objects in new space. The full GC is a regular mark-and-sweep: it's marking all reachable objects (old and new), then unmarked old objects get removed (a very cheap operation in a linked list), and new objects (identified by their missing link) are added to the old-space list. One nice feature of this scheme is that its implementation does not need weak references, which Javascript currently does not support.

This scheme also trivially supports object enumeration (Squeak's nextObject/nextInstance primitives): If the object is old, the next object is just the next link in the list. Otherwise, if there are new objects (newSpaceCount > 0) a GC is performed, which creates the next object link. But if newSpaceCount is 0, then this was the last object, and we're done.

The UI for now copies the Squeak display bitmap pixel-by-pixel to a typed array and shows it on the HTML 2D canvas using putImageData(). Clipboard copying injects a synthetic CMD-C keyboard event into the VM, then runs the interpreter until it has executed the clipboard primitive in response, then answers that string. This is because the web browser only allows clipboard access inside the copy/paste event handlers. You can drag an image file from your disk into the browser window to load it.

Besides running it on your desktop, you can install it as offline web app on an iPad:

On the iPad there is neither right-click nor command keys, but the menu is available on the inside of the flop-out scrollbars. It needs a fairly recent browser, too - it works in iOS 7, but apparently not in older ones. On Android it works in Chrome 31, but not quite as well (for example, the onscreen-keyboard does not come up on an Galaxy Note tablet).

The sources are on GitHub, and contributions are very welcome.

Have a great Christmas!

- Bert -

PS: I had to shrink the pictures, see them here http://croquetweak.blogspot.de/2013/12/squeakjs-lively-squeak-vm.html

Bert Freudenberg

Re: [ANN] SqueakJS

On 20.12.2013, at 23:12, Chris Muller <[hidden email]> wrote:

> On Fri, Dec 20, 2013 at 3:31 PM, Bert Freudenberg <[hidden email]> wrote:
>> http://croquetweak.blogspot.de/2013/12/squeakjs-lively-squeak-vm.html
>
> Ultra cool, Bert, congratulations!
>
> I was glad to see several, "for now"'s in your note. Could you possibly give us a clue to your roadmap?
>
> A practical implementation of this has massive implications for Squeak -- deployment to any JS-enabled device. Obviously this is a fantastic demonstration of wrapping computation, please tell me this is not just an experiment but something for which you have broader plans for..?

My personal medium-term goal is running an Etoys image. It will be very slow at first, but there certainly are ways to optimize.

But one reason for releasing it at this early stage is to allow people to work on what they think is needed. Like running a current Squeak image - beyond the stuff needed for Etoys it should really just be a handful changes to correctly interpret closures.

As for optimizing I think the way to go is a JIT compiler that creates actual Javascript functions from Squeak methods. And to make BitBlt fast, we could probably use WebGL.

There's also interesting stuff I probably won't be working on. Like a kind-of FFI that lets you call Javascript libraries directly. Or a plugin that gives you access to the DOM (I do have the mechanism for VM plugins in place already). With that you could write a native HTML UI which would certainly be much faster than BitBlt.

Networking would be interesting, too. How about implementing the SocketPlugin via WebSockets? Or file access using the browser's local storage API? Parallelize the VM with WebWorkers?

There's a gazillion exciting things to do :)

- Bert -

David T. Lewis

Re: [ANN] SqueakJS

In reply to this post by Bert Freudenberg

On Fri, Dec 20, 2013 at 10:31:35PM +0100, Bert Freudenberg wrote:
> Hi all,
>
> I'm proud to announce SqueakJS, a new Squeak VM that runs on Javascript:
>
> http://bertfreudenberg.github.io/SqueakJS/
>
> It was inspired by Dan's JSqueak/Potato VM for Java, and similarly only runs the old Squeak 2.2 mini.image for now. But I developed it inside the Lively Kernel, which allowed me to make a nice UI to look inside the VM (in addition to all the Lively tools):
>

Woohoo! This looks wonderful, thank you for the early Christmas present :-)

Dave

David T. Lewis

Re: [ANN] SqueakJS

In reply to this post by Bert Freudenberg

On Fri, Dec 20, 2013 at 10:31:35PM +0100, Bert Freudenberg wrote:
> Hi all,
>
> I'm proud to announce SqueakJS, a new Squeak VM that runs on Javascript:
>
> http://bertfreudenberg.github.io/SqueakJS/
>
> It was inspired by Dan's JSqueak/Potato VM for Java, and similarly only runs the old Squeak 2.2 mini.image for now. But I developed it inside the Lively Kernel, which allowed me to make a nice UI to look inside the VM (in addition to all the Lively tools):
>

I don't know if anyone commented on the UI, but I love the VM debugger panels
that display and control the running VM while you use the Squeak mini image
running right next to it.

Dave

Bert Freudenberg

Re: [ANN] SqueakJS

On 22.12.2013, at 19:49, "David T. Lewis" <[hidden email]> wrote:

On Fri, Dec 20, 2013 at 10:31:35PM +0100, Bert Freudenberg wrote:
Hi all,

I'm proud to announce SqueakJS, a new Squeak VM that runs on Javascript:

http://bertfreudenberg.github.io/SqueakJS/

It was inspired by Dan's JSqueak/Potato VM for Java, and similarly only runs the old Squeak 2.2 mini.image for now. But I developed it inside the Lively Kernel, which allowed me to make a nice UI to look inside the VM (in addition to all the Lively tools):

I don't know if anyone commented on the UI, but I love the VM debugger panels
that display and control the running VM while you use the Squeak mini image
running right next to it.

Dave

Thanks :) And there's even some stuff that's not exposed in the UI yet. I use the Lively tools to inspect the VM. Then for example

this.breakOnNewMethod = true;

will break when the newest CompiledMethod is executed - which is your next doit.

Or, use the Chrome debugger to step through the GC:

debugger; this.image.fullGC();

It's fun - for our sort of folks, anyway ;)

- Bert -