HTML User Interfaces with Livecoded Web Components
a canvas that paints HTML
SqueakJS not only enables us to run to Squeak in web browsers, it also features a bidirectional JavaScript bridge that lets us invoke JS functions from Smalltalk and evaluate Smalltalk closures from JS. This lets us use Smalltalk closures as functions for JS callbacks and promises, and manipulate ES6 classes and modules. In particular, we can make full use of the JS event system underlying the web browsers’ DOM-based user interfaces.
The Caffeine system, built with SqueakJS, makes heavy use of these facilities, bringing the Smalltalk livecoding experience to web development. I’ve used it to provide a web-native version of the Smalltalk IDE itself. Rather than make a new subclass of Squeak’s ToolBuilder, I made a new Morphic canvas. When morphs draw themselves on it, the canvas creates and connects appropriate HTML DOM objects into the shadow DOM of a dynamically-created Web Component. It’s rather like a 3D printer. With tools that can mingle with the rest of the content on a webpage, I’d like to create better user interfaces for editing, debugging, and storing webpages.
livecoding Web Components
Caffeine augments the JSObjectProxy class from SqueakJS with a JSObject class, adding Smalltalk behavior and documentation to proxied JS objects. A further subclass, JSClass, proxies ES6 classes, and its subclass WebComponent can create a JS class and register it as a web component. Finally, the web component subclass HTMLWorld provides the behavior we’re discussing here.
HTMLWorld supports much of the Morphic drawing and canvas behavior, such as drawing rectangles, images, and strings. For some morphs, a world delegates to an instance of class in the HTMLMorph hierarchy. These classes have knowledge about specific widgets such as buttons, lists, and text editors, for both Morphic and HTML. Since most Morphic user interfaces are built from a small set of these widgets, an HTMLWorld is able to create HTML equivalents without any UI-specific knowledge.
Leveraging this, one can open the HTML equivalent for any morph from within the morph, by evaluating:
thisContext openInHTML
The receiving context can search the sender chain for the morph scope in which the expression was evaluated, and ask it to draw itself on an HTMLWorld. One may also set the system so that any time a morph is opened from a morph scope which already has an open HTML equivalent, another HTML equivalent is opened in turn for the later morph. This lets us make a smooth transition from the traditional Morphic IDE to an HTML counterpart. Ultimately, we can simply make the main Squeak HTML canvas transparent, using it when needed but using HTML UIs for most work.
renovating web browser UIs
With the ability to livecode user interfaces that can manipulate other DOM content around them, we can develop more flexible alternatives to existing web browser UIs. The next one I’d like to tackle is the Chrome Devtools UI. Currently, it takes the form of a set of panels that run alongside the subject page, and is very limited in its use of graphics and persistence. For example, at a given moment one may look at a page’s elements, or a debugger, but not both. One inspects an element by evaluating console expressions, or with a limited properties editor that is cumbersome to use with multiple elements simultaneously.
With the web-component-based UIs we can make with Caffeine, we can build open-ended UIs to the DevTools facilities, with multiple open windows. We can respond to events from the code being debugged, and from the debugger. We can bring some of the process manipulation experience from the Smalltalk debugger to debugging JavaScript.
What will you build?
This code is live now. If you have any questions, please let me know!
thisContext 
Leave a comment