Caffeine

Web apps are dynamic media under the hood...
They can be that way when we're developing and presenting, too.

Caffeine brings the Smalltalk livecoding model to the dynamic JavaScript system built into every web browser.

Squeak's GUI, Morphic, can draw all its windows together on a single canvas, or each window on its own canvas. The first slide contains an example of this.

There's also a standalone JS implementation of Morphic, MorphicJS, from UC Berkeley's Snap project.

We can use MorphicJS for Squeak windows, each in its own HTML5 canvas, while Squeak itself runs as a headless backend service.

The standalone Squeak Morphic and MorphicJS windows are minor examples of animated wireframes: using DOM elements defined by the HTML code of this presentation as resources for code loaded later.

We can extend this technique to use HTML for more extensive expression of the GUI structures that our code uses. Rather than burdening our code with implementing a UI system (event handling and so on), we can reuse the one built into the web browser.

Here's an example of animated HTML wireframe, defining the UI of a Smalltalk code browser. The HTML DOM elements used are cloned from a WebComponents import of a hand-designed HTML file.

In addition to these local GUI alternatives, Caffeine supports interaction with other system instances on remote machines. Snowglobe is a framework for connecting instances of Caffeine together, both at the GUI and remote-messaging levels.

To augment the JavaScript bridge, Caffeine integrates the Esprima parsing framework, for parsing back and forth between JavaScript and Smalltalk source code.

Caffeine can run in JavaScript environments outside web browsers, too. In particular, it can run headlessly in NodeJS instances (as a Web Worker ), and it can inject JavaScript code into NodeJS instances with help from the node-livecode package on npm. Details are at my blog, thiscontext.com:

The A-Frame XR support runs in headsets as well as 2D displays. For non-AR non-6DOF headsets, it's useful to be able to type by speaking, rather than having to view a physical keyboard or use a virtual keyboard. Caffeine integrates the Web Speech API.

Another piece of Caffeine's audio infrastructure is support for the WebMIDI API .

In addition to manipulating the webpage in which it runs, Caffeine can also livecode every other tab in the web browser, with the help of the Chrome Remote Debugging Protocol and the Caffeine Helper extension from the Chrome Web Store.

Thanks!

• • Dan Ingalls and team for Squeak
• • Bert Freudenberg for SqueakJS
• • the Squeak communities
• • Eliot Miranda, Chris Thorgrimsson,    and Lam Research for supporting the    development of Snowglobe