Dec 13, 2022
One Hour With Enhance.dev
I wanted to build a web form that sends data to a google spreadsheet, and had recently came across Enhance. I was immediately attracted its promise of "it's just HTML" and web components, so I spent ~an hour with learning the basics by reading the Quick start docs and watching the three video walkthroughs. Seemed simple enough! Enhance ships with:
File based routing, where an API route matches the "server render" based on file name.
app/pages/index.htmlis preceded by
app/api/index.mjsand data from the latter is made available to the former.
Automatic Custom Element definition and registration
Just export a function in
<my-element>! This was really nice, because
customElements.define('my-element', ...)has always felt like a turn off to me. Let me write components and you make them available!
This was enough to get excited and give it a shot, but I ran into a few issues:
npm create @enhance ./my-app -ythrew an error:
ENOENT: no such file or directory, rename '/Users/mehulkar/dev/my-app/_.gitignore' -> '/Users/mehulkar/dev/my-app/.gitignore'
Looking at the source, the
@enhance/createpackage copies a template directory. Copying the
gitignorefile should have worked. In fact, cloning the source and executing the script worked fine. My guess is that
npm createis using a cached version, although the
npmdebug logs do not indicate what version is executed, so I can't say for sure. I stopped debugging here, since the fix was pretty simple.
This was a pretty small issue, but as a first experience it seemed like I wasted a bit too much time on fixing it.
I added an
<h1>tag and deleted all the existing boilerplate, and noticed that heading styles had all been normalized. Browser dev tools showed that this came from
.enhance/generated.css, so I deleted that and all the contents of
public/styles.css(which I assume was the source), but on
npm start, the normalization styles came back! I'm not sure why.
The docs say that Enhance uses Architect, which I am not familiar with. I was hoping that I could look at the phantom styles issue by debugging
npm build, but since the starter template doesn't include this, I couldn't.
To be fair, it doesn't look like Enhance builds static sites by default or even "serverless"-style sites, so a
buildcommand may not make sense and this could be have been a choice.
All rendered elements get state.
I didn't get far enough to actually try this out, but it felt a little weird that a
pageis part of the lifecycle after the api route, but intnernal elements receive the json "store" returned by the API. It seems a big magical.
The docs also mention that Pages can be modeled as elements, but that isn't recommended. Maybe that pattern would feel more natural here.
No layout file.
The started template doesn't include an
DOCTYPE, et al. It felt a little magical that I didn't know where this is coming from.
Ideally, I'd want to deploy Enhance to Vercel. Since the framework is owned by the Begin, and the deploy on Begin docs mention "dynamic web applications composed entirely of pure functions", I think this should be possible in theory, but I'm not sure how it would work. For other side projects, I've used 11ty to generate a static side and just have an
api/directory to take advantage of Vercel's serverless functions. I'm not sure that approach would work here.
My overall impression of Enhance in ~an hour is that I'm excited by the premise and would like to keep building my little form with it, but I'd need more than an hour to really start writing the features for my form.