Caffeine :: Livecode the Web!

CaffeineFor the impatient… here it is.

Back to the Future, Again

With the arrival of Bert Freudenberg’s SqueakJS, it was finally time for me to revisit the weird and wonderful world of JavaScript and web development. My previous experiences with it, in my consulting work, were marked by awkward development tools, chaotic frameworks, and scattered documentation. Since I ultimately rely on debuggers to make sense of things, my first question when evaluating a development environment is “What is debugging like?”

Since I’m a livecoder, I want my debugger to run in the web browser I’m using to view the site I’m debugging. The best in-browser debugger I’ve found, Chrome DevTools (CDT), is decent if you’re used to a command-line interface, but lacking as a GUI. With Smalltalk, I can open new windows to inspect objects, and keep them around as those objects evolve. CDT has an object explorer integrated into its read-eval-print loop (REPL), and a separate tab for inspecting DOM trees, but using them extensively means a lot of scrolling in the REPL (since asynchronous console messages show up there as well) and switching between tabs. CDT can fit compactly onto the screen with the subject website, but doesn’t make good use of real estate when it has more. This interrupts the flow of debugging and slows down development.

The Pieces Are All Here

With SqueakJS, and its JavaScript bridge, we can make something better. We can make an in-browser development environment that compares favorably with external environments like WebStorm. I started from a page like try.squeak.org. The first thing we need is a way to move the main SqueakJS HTML5 canvas around the page. I found jQuery UI to be good for this, with its “draggable” effect. While we’re at it, we can also put each of Squeak‘s Morphic windows onto a separate draggable canvas. This moves a lot of the computation burden from SqueakJS to the web browser, since SqueakJS no longer has to do window management. This is a big deal, since Morphic window management is the main thing making modern Squeak UIs feel slow in SqueakJS today.

SqueakJS provides a basic proxy class for JavaScript objects, called JSObjectProxy. Caffeine has an additional proxy class called JSObject, which provides additional reflection features, like enumerating the subject JS object’s properties. It’s also a good place for documenting the behavior of the JS objects you’re using. Rather than always hunting down the docs for HTMLCanvasElement.getContext on MDN, you can summarize things in a normal method comment, in your HTMLCanvasElement class in Smalltalk.

Multiple Worlds

With a basic window system based on HTML5 canvases, we can draw whatever we like on those canvases, using the SqueakJS bridge and whatever other JS frameworks we care to load. I’ve started integrating a few frameworks, including React (for single-page-app development), three.js (for WebGL 3D graphics development), and morphic.js (a standalone implementation of Morphic which is faster than what’s currently in Squeak). I’ll write about using them from Caffeine in future blog posts.

Another framework I’ve integrated into Caffeine is Snowglobe (for Smalltalk app streaming and other remote GUI access), which I wrote about here previously. I think the Snowglobe demo is a lot more compelling when run from Caffeine, since it can co-exist with other web apps in the same page. You can also run multiple Snowglobes easily, and drag things between them. I’ll write more about that, too.

Fitting Into the JavaScript Ecosystem

To get the full-featured debugger UI I wanted, I wrote a Chrome extension called Caffeine Helper, currently available on the Chrome Web Store. It exposes the Chrome Debugging Protocol (CDP) support in the web browser to SqueakJS, letting it do whatever the CDT can do (CDT, like SqueakJS, is just another JavaScript-powered web app). The support for CDP that I wrote about previously uses a WebSocket-based CDP API that requires Chrome to be started in a special way. The Caffeine Helper extension provides a JavaScript API, without that requirement.

I also wrote support for generating Smalltalk code from JavaScript, using the esprima parsing framework, and vice-versa. With my debugger and code generation, I’m going to try developing for some file-based JS projects, using Smalltalk behind the scenes and converting to and from JavaScript when necessary. I think JS web development might actually not drive me crazy this way. :)

Please Try It Out!

So, please check out Caffeine, at caffeine.js.org! I would very much appreciate your feedback. I’m particularly interested to hear your use cases, as I plan the next development steps. I would love to have collaborators, too. Let’s build!

Advertisements

15 Responses to “Caffeine :: Livecode the Web!”

  1. Craig, the vision outlined above is what I would love to participate in. A very brief getting started would be helpful. You mention that, “From the canvas below this one, you can interact with Squeak’s traditional user interface” This canvas that you speak of, is it a traditional Javascript Canvas element or a Morphic canvas? I did a view-source of the website and didn’t see where the https://caffeine.js.org/ source code was stored? Are you working on github or somewhere else?

    • Hi there… Great! Yes, this release probably only makes sense to Smalltalkers who are willing to get into JavaScript. The bottom canvas is an HTML5 canvas that is being drawn on by SqueakJS. What SqueakJS is drawing is the Squeak Morphic UI. The best way to see the sources of the website is to look at the “Sources” tab of your web browser’s devtools. There will soon be something coherent on github, but there isn’t at the moment. For now, check out the website’s repo at https://github.com/ccrraaiigg/ccrraaiigg.github.io/.

  2. Reblogged this on F7L8C9.

  3. […] Caffeine is powered by SqueakJS, you can create mashups with any other JavaScript frameworks you like. […]

  4. For doing file based development I wonder if it would be possible to expose a filesystem like webdav or similar ?

  5. […] seen a couple of examples of frontend Caffeine development, using jQuery UI and voxel.js. Let’s look at something on the backend, using Node.js and something I like to […]

  6. […] Caffeine is powered by SqueakJS. The performance of SqueakJS is amazingly good, thanks in large part to its dynamic translation of Smalltalk compiled methods to JavaScript functions (which are in turn translated to machine code by your web browser’s JS engine). In the HTML5 environment where SqueakJS finds itself, there are several other tactics we can use to further improve user interface performance. […]

  7. […] Caffeine web livecoding project has added Pharo to the list of Smalltalk distributions it runs with […]

  8. […] our previous look at livecoding NodeJS from Caffeine, we implemented tweetcoding. Now let’s try another exercise, creating WebSockets that tunnel […]

  9. […] seen how to use Caffeine to livecode the webpage in which we’re running. With its support for the Chrome Remote […]

  10. It seems very interesting what you put together.

    I wanted to try it, but it is not working for me…

    I tried on Chrome, but mixed content is not allowed and I didn’t find a way to unblock on Chrome 60. So, I switched to Firefox and I managed to allow mixed content, but it gives me the following error:

    Console on page https://caffeine.js.org/

    TypeError: SqueakJS.runSqueak is not a function
    window.startCaffeine()
    utilities.js:140

    squeak.html:30
    utilities.js:140:19

    Console on page https://caffeine.js.org/pharo/

    TypeError: SqueakJS.runSqueak is not a function
    runDemo()
    squeakjspharo.html:21
    window.onload()
    squeakjspharo.html:97
    squeakjspharo.html:21:48

    Any idea on how to make it work?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: