Introducing the Zelt Stack: Refining Web Development

Web development continues to evolve. Each new project is an opportunity to refine project structure, bundling, the choice of language for the api, choices of libraries and frameworks for the front end, and ultimately look for what can be removed and simplified. My goal has always been to drive towards the bare metal of the browser, removing intermediate layers and frameworks wherever possible, using them when the web platform itself does not provide the capability.

Over the years, my preferred project setup has therefor changed as the web platform changed and as my own knowledge has grown. Improvements to the CSS Specification has made preprocessors unnecessary. CSS vars allowed for in-page theme changes simplify by swapping a class on the html element. TypeScript replaced JavaScript, Rollup replaced Webpack, web components more generally have replaced complex thick framework layers, Zod introduced run time type safety that can be used in the front end and back end code, ES Modules replaced CommonJS, and the list goes on.

So with a few new projects that came up in my spare time recently, I knew it was time to revisit these choices and come to a new consensus on the way that I like to make web apps. Therefor I ordered the most important things I wanted to see in these projects

1. TypeScript everywhere. It's built on the language I love, and can be compiled into runnable code that runs anywhere and everywhere: servers, browsers, cli tooling, build pipelines, etc.
2. Bare metal with Lit: Being close to the browser without a deep framework layer in between you and your run time system is critical. Lit is designed for exactly this; building web components that can be put together into anything from a single page application to a static site generation.
3. Zod for type safety: TypeScript is great, but it is critical to be able to have run time type safety along with compile time type safety in a way that types can be defined once and then imported in client code, server code, cli code, etc.
4. Express with NodeJS: It's standard and familiar and I have no reason at this moment to divert from it.

So rearranging the names gives us a nice literal acronym, and so the the Zelt Stack is born! Zod, Express Lit, Typescript. The full documentation is available at zelt.alexlockhart.me. It has a template repository and some setup instructions. I have used this so far to build two projects: Inklify and Spinder.

Overall this project setup feels like a big step forward, especially in terms of how the client and server communicate. The template needs some flexibility, and the stack as well, so that it can be more easily used to build different types of web apps such as those with no server, or ones that require a static site generation layer, and so on. However, defining that boundary of what can Zelt do, what should it not do, and what requires a different stack and a different template, is part of what I will do as new projects come up.

For now, try out Zelt!