Scarlet Smalltalk on a Web Page

21 December 2019

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.

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.

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>

A Touch of Amber

1 September 2012

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

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.

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!'.

Jtalk and QuickSilver Smalltalk

19 March 2011

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

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.

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.