Whole Code



Reviewed July 24th, 2019

Smalltalk is the legendary, original OOP language and operating system, created by Alan Kay, Dan Ingalls, and Adele Goldberg at Xerox PARC in 1972. It has influenced almost all modern programming languages and operating systems. It's known for its holistic operating system that includes a code editor, runtime, package manager, debugger, file system, and pioneering graphical user interface, including overlapping windows. Below we examine a few features of modern reincarnations of Smalltalk: The Glamorous Toolkit on Pharo and Lively Web.

Product Feel


The Glamorous Toolkit is a Smalltalk environment built on top of the Pharo Smalltalk operating system. The main interface of GT is the Inspector, which blurs the line between evaluating code and navigating dynamic structures. It allows multiple views, represented as tabs, for each object, so you can explore data in the most relevant representation. For example, in the following video, I view a file reference object as a traditional file system viewer, but later show its other lower-level representations as well. Every object has a meta tab view, which shows which messages it accepts. I use the meta tab to explore the available manipulations for an image in my filesystem, which I apply in a new inspector in an embedded window.

Literate coding

Documents in the Glamorous Toolkit are a mix between a templating language and a WYSIWYG document. All media elements have a text-based representation that's usually hidden until the cursor gets near and disappear when the cursor leaves. All embedded media are infinitely nestable, which means you can run a program inside a program inside some documentation inside a test case, etc.

Single render tree

Contrasted with HTML's multiple rendering methods (HTML vs canvas), the Glamorous Toolkit consists of a single render tree. This allows users to inspect any property of the entire system, including itself. Smalltalk thrives on all things meta. The following video shows turing the current window that the code is running in to a dark pink.

The following video shows how runnable code windows can be embedded arbitrarily deep:

Lively Web

Lively Web is a Smalltalk environment for the web, featuring a direct manipulation WYSIWYG environment for building visual, dynamic layouts. All objects have a "halo menu" which allows you to change its properties, like size and color, as well as connecting it to other objects by dragging connections between them. In the following video, I create a counter button by dragging a connection between a button and a text object and editing the "converter" code between them. I then add a slider to the mix, where I at first have trouble getting it to properly get the rotation and scale of the window to change. One of my favorite features of this environment is that you can evaluate any highlighted text with a keyboard shortcut; the result is pasted next to the evaluated code, already highlighted to make for easy copying or deleting.

Further Reading