Skip to main content

SqueakJS: A Lively Squeak VM

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


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).

Go to the project page to try it yourself. The sources are on GitHub, and contributions are very welcome.

Have a great Christmas!

Comments

Carl Gundel said…
Makes me wonder if the Newton OS couldn't be made to run similarly. ;-)
Anonymous said…
I wonder if scratch 2.0 switches to flash due to web browser support.

Now with squeak running on top of javascript, would scratch come back to its squeak origin?
Carlos Crosetti said…
Awesome work Bert, How close (or far) you are in deliverying a Lively Kernet where ST and JS can be written and clalled each other without the need of an image?
Vanessa said…
Hi Carlos, I'm not sure what you mean by "without an image". Writing a primitive to a allow calling out to JS would be pretty simple. Calling into Squeak would be a bit harder, but not much. I don't intend to work on that any time soon though - you're welcome to make it work :)
Carlos Crosetti said…
Thanks Bert, as you said. it would be nice to have the first option you mention, to call Squeak from JS so one can leverage existing ST code.
Carlos Crosetti said…
From what you said ("Calling into Squeak"), I'll refine my question to: from Lively Kernel, your Squeak VM loads a mini image that in turn, may kick an internal ST process to do some work in the Squeak space and when done, return the control flow to Lively Kernel?
Vanessa said…
Yes. That is how the copy logic works, for example. Inside the ctrl-c keyboard handler JS generates a Squeak keyboard event, and then runs the interpreter until the image has called the clipboard primitive. Then the JS takes the clipboard data produced by Squeak and returns control to the browser.

See onCopy() in the Display morph.

Popular posts from this blog

Frontend-only Multi-Player. Unlimited Bandwidth. Or: What is Croquet.io, really?

A multi-player web app needs a backend, right? What if I told you, it doesn’t? Read on for how Croquet gets rid of servers. No, really . Instantaneous Shared Experiences  is how we describe Croquet on our website. And while that excellently describes What Croquet does, as Croquet's Chief Architect, I wanted to share a bit about How we do that. So I wrote a Twitter thread . Here it is in blog form, slightly extended. Click the animation above if it does not play automatically Croquet lets you build completely client-side multi-user web apps. Read that again. Client-side. Multi-user. No I’m not kidding. I built it, I know it works. 😁  Croquet apps run completely client-side: can be hosted as a static web site no server-side code needed no networking code needed  Croquet is literally virtualizing the server: Instead of running code on a server (or in a serverless function) we run it as a virtual machine (VM) on each client.  Croquet carefully controls the inputs to these identi

Deconstructing Floats: frexp() and ldexp() in JavaScript

While working on my  SqueakJS VM, it became necessary to deconstruct floating point numbers into their mantissa and exponent parts, and assembling them again. Peeking into the C sources of the regular VM, I saw they use the  frexp ()   and ldexp () functions found in the standard C math library. Unfortunately, JavaScript does not provide these two functions. But surely there must have been someone who needed these before me, right? Sure enough, a Google search came up with a few implementations. However, an hour later I was convinced none of them actually are fully equivalent to the C functions. They were imprecise, that is, deconstructing a float using frexp() and reconstructing it with ldexp() did not result in the original value. But that is the basic use case: for all float values, if [ mantissa , exponent ] = frexp (value) then value = ldexp ( mantissa , exponent ) even if the value is subnormal . None of the implementations (even the complex ones) really worked. I

Connecting fields

Quick Recipe To connect field a in obj1 to field b in obj2 , use this: obj2 startScript: #b: when: {obj1. #aChanged} Now for the whole story ... Problem A colleague of mine wanted to make a drop-down list, where the options are not just set once, but provided and updated by the application. So, of course, when the options in the application changes, the items of the list widget have to be set to this new value. Nothing easier than that, just write a handler: onOptionsChanged     <on: optionsChanged in: app>     listWidget items: app options HOWEVER, he wanted to build this programmatically, not using a separate method. So, he easily came up with the following: listWidget startScript : #items: withArguments: {app options} when: {app. #optionsChanged} HOWEVER, this does not work as intended because the arguments to the script are evaluated only once, rather than every time the script is triggered. Well, this is what blocks are for, right? So this indeed works as intended: listW