Update 26 Jun 2022: This site is retooling, as such some Javascript files are not being served and this post's demonstration has been disabled.

Scarlet Smalltalk is a Smalltalk-to-Javascript transpiler and runtime by LabWare. This post is my 2012 post on Amber updated to use Scarlet Smalltalk.

If you see a "Hello World" message in the above paragraph, you're seeing my old post updated to use Scarlet Smalltalk. The HTML body contains the following:

<div id="scarlet_do_it">
<p>This is placeholder text. You will see this text if you're reading this post from the blog's RSS feed.  Go on, click on the post's title to see Scarlet Smalltalk in action.</p>
</div>

<script src="/SmdwHelloWorldSK.js" type="application/javascript"></script>

SmdwHelloWorldSK.js comprises the Scarlet Smalltalk runtime plus my little bit of Smalltalk code that returns the "Hello World" string, based on the 'standalone' example. The Smalltalk code looks like this:

Object subclass: #SmdwHelloWorldSK
	instanceVariableNames: ''
	classVariableNames: ''
	poolDictionaries: ''
	category: 'Example'!

! SmdwHelloWorldSK methodsFor: #running !
main
	^ '<p>Hello world from Scarlet Smalltalk.</p>' ! !

And this following Javascript snippet replaces the placeholder text in #scarlet_do_it with the result of evaluating SmdwHelloWorldSK new main (expressed in Javascript syntax):

<script type="application/javascript">
document.addEventListener("DOMContentLoaded", function() {
    $("#scarlet_do_it").html(smalltalk.SmdwHelloWorldSK.$$new().main());
    });
</script>

Update 26 Jun 2022: This site is retooling, as such some Javascript files are not being served and this post's demonstration has been disabled.

I last wrote about Jtalk in Mar 2011. Jtalk has since been renamed to Amber.

If you see a "Hello World" message in the above paragraph, you're seeing my old post updated from Jtalk to Amber. The HTML head contains the following:

<script src="/amber/js/amber.js" type="application/javascript">
<script type="application/javascript">
    loadAmber({files:['/PN-SamadhiWeb.deploy.js'], prefix:['']});
</script>

PN-SamadhiWeb.deploy.js contains Smalltalk written in Amber, then saved in its "compiled" Javascript form.

The HTML body source for the Hello World paragraph looks like this:

<div id="jtalk_do_it">
<p>This is placeholder text. You will see this text if you're reading this
post from the blog's main page or RSS feed.  Go on, click on the post's
title to see Jtalk in action.</p>
</div>

<script type="application/javascript">
smalltalk.init(smalltalk.SmdwHelloWorld);
jQuery(document).ready(function() {
    smalltalk.SmdwHelloWorld._new()._appendToJQuery_("#jtalk_do_it"._asJQuery().empty());
});
</script>

Not surprisingly, SmdwHelloWorld's renderOn: method looks thusly:

renderOn: html
    html p with: 'Hello world from Amber!'.

MorphIDE has been published on SqueakSource3.

I last played with Jtalk a while ago. Jtalk has seen quite some development since.

The Jtalk documentation suggests to set up Apache WebDAV to support committing changes to disk with the web-based IDE; in particular, to handle Jtalk IDE's HTTP PUTs.

I didn't want to reconfigure Apache on my MBP. It is simply far more fun to doodle in Smalltalk.

Existing Smalltalk goodies such as Comanche, Zinc and Swazoo make it very easy to set up a static content HTTP server. Previously, for Seaside, I used Comanche. This time, I use Zinc to serve Jtalk's Javascript files.

To handle PUTs, I subclassed Zinc's ZnStaticFileServerDelegate, calling it PNjtServerIDE. The following method is key:

PNjtServerIDE>>handlePut: aRequest
    | upath lfile |

    upath := aRequest uri path.
    lfile := self directory fullNameFor: upath.
    self directory deleteFileNamed: upath.
    NSFileStream fileNamed: lfile 
        forWriting: true
        do: [ :stream | 
            stream binary.
            stream nextPutAll: (aRequest entity contents) ].
    ^ ZnResponse created: (ZnUrl fromString: aRequest requestLine uri path).

With this, I can PUT code to disk from the Jtalk IDE. However, if I add a new category in Jtalk, it doesn't show up automatically the next time I run the IDE.

Browsing Jtalk's source reveals the loadJtalk() function. Essentially, if I create a category called "PN-Smalltalking", Jtalk will PUT separate "PN-Smalltalking.js" and "PN-Smalltalking.st" files. If I want the category to show up when I run Jtalk, I should invoke loadJtalk(["PN-Smalltalking.js"]).

Somehow, it just feels very unsatisfying to edit manually the loadJtalk() call in some HTML file.

Thus was born MorphIDE.

MorphIDE provides a static HTML file, imaginatively called morphIDE.html, with a button that invokes Jtalk's IDE, just like the Jtalk project's home page does. morphIDE.html starts out with loadJtalk().

As new categories are added to Jtalk, MorphIDE, while handling the PUTs, keeps track of these additions, and dynamically generates new versions of the static morphIDE.html that invokes, accordingly, loadJtalk(['New-Category1', 'New-Category2', ...]).

Thus, each time Jtalk is loaded, my code in New-Category1, New-Category2, etc., are automatically available.

For MorphIDE to tell existing and new categories apart, it must know what the existing categories are. Without wishing to write too much code (hey, I was only doodling), I modified Jtalk's init.js thusly:

var stcategories = '';
smalltalk.init(smalltalk.Object);
smalltalk.classes()._do_(function(each) {
    each._initialize();
    stcategories += each._category();
    stcategories += '\n';
    });
$.ajax({
    url: 'stcategories.txt',
    type: 'PUT',
    data: stcategories
    });

This generates a string containing Jtalk's categories, and uses MorphIDE's PUT machinery to upload the string into a file. Within MorphIDE, during the PUT, the content of this file is read and cached. In this way, MorphIDE comes to know about the Jtalk categories that exist when Jtalk initialized.

What remains is for MorphIDE to track new categories as they are created, and generate morphIDE.html accordingly.

For now, MorphIDE doesn't do much exception handling. It also overwrites each Javascript and Smalltalk source file as they are PUT. I do intend to extend MorphIDE to invoke git, fossil, etc. using OSProcess/CommandShell.

Update 26 Jun 2022: This site is retooling, as such some Javascript files are not being served and this post's demonstration has been disabled.

Jtalk is an implementation of Smalltalk in Javascript recently announced by Nicolas Petton.

If you see a "Hello World" message in the above paragraph, you're seeing Jtalk in action. The HTML head contains this line:

<script type="application/javascript" src="/SmdwHelloWorld.js">

SmdwHelloWorld is a Smalltalk class written in the Jtalk IDE, then saved into the above file in its "compiled" Javascript form.

The HTML body source for the Hello World paragraph looks like this:

<div id="jtalk_do_it">
<p>This is placeholder text. You will see this text if you're reading this
post from the blog's main page or RSS feed.  Go on, click on the post's
title to see Jtalk in action.</p>
</div>

<script type="application/javascript">
smalltalk.init(smalltalk.SmdwHelloWorld);
jQuery(document).ready(function() 
{"#jtalk_do_it"._asJQuery()._contents_(smalltalk.SmdwHelloWorld._new())});
</script>

Not surprisingly, SmdwHelloWorld's renderOn: method looks thusly:

renderOn: html
    html p with: 'Hello, world! This paragraph is rendered by Jtalk.'.

QuickSilver Smalltalk is also an implementation of Smalltalk in Javascript. It is written by Peter Fisk.

Seems lots of Smalltalkers don't read Planet Smalltalk. The aggregator has been syndicating Peter Fisk's description of QuickSilver Smalltalk for some time, but many pharo-project readers don't seem to know about it, judging by the reaction on that mailing list to the announcement of Jtalk.