<script server>
// GET /books/:id
server.get('/:id', async (req, res) => {
const book = await Book.findById(req.params.id)
res.render(self, { book })
})
</script>
<main>
<h1>Book Detail</h1>
<p>Title: {= book.title}</p>
<p>Author: {= book.author}</p>
</main>
SaneJS.zip
npm install
npm run dev
Watch the video
Building websites with something like React plus a whole REST or GraphQL API is like using a laser guided missile to kill a mosquito. 🤨
We were driven to this insanity because vanilla HTML can't do the kinds of complex interactivity and partial DOM updates users expect from today's modern websites.
But what if there were a way to extend HTML so that we could get the interactivity and sex appeal of a SPA with a dramatically simpler approach?
SaneJS is a starter kit for building Express/Mongoose web applications using old school server-rendered templates. HTMX is added on the front-end for a modern SPA-like feel. The starter kit includes an HTMX, Express, and Mongoose stack, custom Express middleware, a templating system, and basic HTML/CSS boilerplate code.
If what you're building is truly a Single Page Application (the next Figma?), then by all means, use a SPA framework like Svelte or Vue.
HTTP was designed for HTML on the wire. The "HT" is for Hypertext — not JSON. When we send HTML down the wire as God (aka, Tim Berners-Lee) intended, it turns out there's a ton of stupid shit we no longer need. Things like client-side state management — the DOM is the client-side state. Client-side routers? Don't be ridiculous. JSON Web Tokens? Server sessions are tried and true — and so much easier to implement.
Need to inject some data into your templates? Your database is right friggin' there. No
need to build an API endpoint, then set up a
fetch request, parse the JSON response, handle errors, etc. You can just grab
the data and render it into your template in a few lines of code like the example at the top
of this page.
Of course, none of this works if we have to go full Web 1.0 where every click triggers a full browser refresh. That's where HTMX changes the game by extending HTML to allow for any DOM element to trigger a server request, and then render that response to any other DOM element on the page — without refreshing the browser.
There's much more to the story than just that, of course. For example, HTMX "boost mode"
makes regular links and form submissions behave more like a SPA application by swapping
out only the <body> of the page rather than tearing down and rebuilding
the entire DOM tree.
Sometimes you just need a bit of client-side interactivity without a round-trip to the server. For those cases, Hyperscript is included by default (or can be easily swapped out for whatever you prefer). HTMX and Hyperscript are best buds and play very nicely together.
