85
edits
Building with Parenscript and Preact: Difference between revisions
no edit summary
No edit summary |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 13: | Line 13: | ||
= The Stack = | = The Stack = | ||
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] | 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.] | ||
Since I want to side-step the modern frontend stack a bit, I found Preact as an alternative implementation of React in 3kb, and it [https://dev.to/jovidecroock/prefresh-fast-refresh-for-preact-26kg has a blog post] describing how to hook into its hot updating system. I quickly whipped up a macro which implements a JSX-like syntax, and a <code>defcomponent</code> macro for creating React components, so I can write something like this: | Since I want to side-step the modern frontend stack a bit, I found Preact as an alternative implementation of React in 3kb, and it [https://dev.to/jovidecroock/prefresh-fast-refresh-for-preact-26kg has a blog post] describing how to hook into its hot updating system. I quickly whipped up a macro which implements a JSX-like syntax, and a <code>defcomponent</code> macro for creating React components, so I can write something like this: | ||