Building with Parenscript and Preact: Difference between revisions

I have a thing for tools that are off the beaten path but are super powerful. I call them "secret weapons" since everyone sees "Lisp" or "Pascal" or whatever and immediately turns their brain off while you're doubling your productivity. I figured it might be fun to put something together with Parenscript to see what the fuss is all about. I saw an article from Holger Sindbaek about how he's making 10k a month off a Solitaire game, so I figured I might try to get in on some of that action; plus I have fond memories as a kid of opening FreeCell and watching the king's head turn left and right to follow the mouse.

I decided from the start that I wanted Lisp-style interactive development. Parenscript itself is (basically) just a function that takes code and spits out a JS string, so there's not really a development environment component to it. I found [https://github.com/johnmastro/trident-mode.el trident-mode] which is a pretty barebones tool that makes the HTML page long-poll Emacs for JS strings and then evals them. I wanted to do something similar to React's "fast refresh" which swaps out components while preserving state. Basically the frontend equivalent of [https://nickfa.ro/w/images/8qgw3f.jpg "C-M-x'ing that sexp" ] and having your running program automatically update. Every time I'm in a hot-reloading environment like this I like to pretend I'm Andy Gavin [http://www.codersnotes.com/notes/disassembling-jak/ with my own PS2 toolchain].

<syntaxhighlight lang="lisp">(defcomponent -ui-button () (props)

  (with-defaults (on-click (disabled false) children) props

    (psx

    (:div ((on-click on-click)

            (class-name (class-names "ui-button" (when disabled "disabled")))

            (style (create "color"

                          (if disabled

                            "grey"

                            "black"))))

          children))))</syntaxhighlight>

function UiButton(props) {

     var disabled304 = 'undefined' === typeof props.disabled ? false : props.disabled;

     return [preact.h('div', Object.assign({ onClick : props.onClick,

                                            className : classNames('ui-button', disabled304 ? 'disabled' : null),

                                            style : { 'color' : disabled304 ? 'grey' : 'black' }

                                          }), [props.children])];

s(UiButton, '', false, function () {

$RefreshReg$(UiButton, 'UiButton');

And it's true, it only took about 50 lines of macro code to implement. Combine that with trident-mode to push the snippets to the frontend for evaluation, and you have a full fledged interactive hot reloading environment! I don't want to get all Reddit about it, but:

Parenscript is fundamentally flawed. It's a super-lightweight papering-over of JavaScript, and you become aware of that harsh reality immediately. It makes an attempt to look like the surface syntax of Common Lisp while maintaining none of its semantics, so you kind of have to juggle in your mind the JavaScript you want to get, the Parenscript you have to write, and the Common Lisp that would do something else if executed as CL. It's especially odd since JS has no cons cells, and Parenscript doesn't try to provide them-- <code>(cons 1 nil)</code> just becomes <code>cons(1, null);</code>. So it looks superficially a lot like CL, but isn't like it semantically at all. On top of that, Parenscript has a few bugs: it will just miscompile things sometimes, specifically its <code>loop</code> construct, and it has a bad habit of not declaring variables when you use <code>let</code>, which doesn't work in <code>use strict"</code> mode.

One thing I've always thought about macros in Common Lisp is that you often don't need them because the language is already so rich on its own. A lot of the times I find myself wanting to use a macro is when I'm using other languages that don't have them. In this case, worlds collide since the actual implementation language is pretty spartan, but it can be extended with the full power of Lisp. Which means that usually when I'd wish for macros I'd sigh wistfully and start copy-pasting, but now I can actually have them. It's pretty cool, and combined with JavaScript's dynamic nature, and my home-grown interactive development environment, it does feel kinda like you're writing Lisp... until the illusion is inevitably broken by semantic differences. But I actually do like it a lot anyway, it's a lot more fun than writing straight JS, that's for sure.