BETH: A Modern Stack for the Modern Web
There have been countless stacks in web development, each one based on one or two main frameworks.
Some of the most popular web stacks currently are MERN (MongoDB, Express, React, Node), MEVN, PERN and so on.
But with the recent introduction of some exciting new tools and frameworks, a new web stack has emerged: BETH.
Frameworks
The BETH stack consists of 4 main frameworks:
We will cover each one individually.
Bun
Bun is an all-in-one JavaScript/TypeScript toolkit that includes:
- A runtime that supports TypeScript and JSX out of the box, it’s incredibly fast because it extends JavaScriptCore instead of using V8 like Node.js.
- A package manager that is compatible with npm, and -of course- a lot faster.
- An incredibly fast test runner with Jest compatible syntax and ability to simulate the DOM using happy-dom.
- A modern JavaScript bundler (still in beta at the moment).
Bun focuses on performance and developer experience, and it’s a drop-in replacement for Node.js, making migration very straightforward.
Elysia
Elysia is a Bun TypeScript server framework with great performance and developer experience.
Some of its powerful features include:
- Incredible performance, reaching speeds up to 18x faster than Express.
- Super simple development, allowing you to create API endpoints by just returning the desired response data, no unnecessary methods or boilerplate.
- Strict-typing -powered by TypeBox- enforces type-strict validation to ensure type integrity by default.
- OpenAPI compliance, allowing Elysia to automatically generate OpenAPI 3.0 specs with the Swagger plugin.
- End-to-end type safety synchronizing types across all applications.
- An active ecosystem of plugins to help integrate your Elysia server with multiple tools and frameworks, including: Swagger, GraphQL Yoga, tRPC, Vite, Web Socket, and more.
Turso
Turso is an edge-hosted, distributed database based on libSQL, an open-source and open-contribution fork of SQLite.
Developers love Turso for its simplicity and performance around the globe, and it offers integrations with multiple popular platforms like Vercel, Cloudflare, Netlify, and more.
HTMX
HTMX is a small and powerful library that gives you access to AJAX, CSS Transitions, WebSockets, and Server Sent Events, directly from HTML, eliminating the need to write unnecessary JavaScript code.
I’ve talked about HTMX in more detail in this article: HTMX: Hypertext for the Modern Web.
Additional
Some additional libraries for the BETH stack:
- typed-html: Type-safe HTML templating with plain TypeScript.
- Tailwindcss: A utility-first CSS framework for rapidly building beautiful UIs.
- Drizzle: Type-safe ORM for database handling (Personally I prefer Prisma, Drizzle is more lightweight, performat, and SQL-focused, while Prisma provides automated migrations, more human-readable syntax, and a larger ecosystem, but the choice is ultimately yours).
- Hyperscript: An easy and approachable language for enhancing HTML with concise DOM, event and sync features.
- Fly.io: Simple deployment in 30+ regions across 6 continents.
How to use the BETH stack
The BETH stack revolves around using JSX with HTMX and Hyperscript for interactivity in a Bun & Elysia server, building a light and fast website.
Get more information from the-beth-stack GitHub repository.
Benifits
Some of the main benefits of the BETH stack include:
- High performance: Using some of the fastest web technologies available like Bun and Elysia, the BETH stack is extremely performant.
- Simplicity: Aiming to reduce the amount of JavaScript written in the frontend to the minimum by using HTMX and Hyperscript, and tools known for their good developer experience like Elysia and Turso, the BETH stack is very simple and easy to use.
- Flexibility: The BETH stack is extremely flexible and can be modified and integrated with a wide variety of tools, enabling it to adapt to the nature and requirements of your project.
Drawbacks
It’s hard to pin down a set of specific drawbacks for the BETH stack because of its extreme flexibility, but we can notice two issues:
- Immaturity: While the technologies used in the BETH stack are known for being modern, they are still relatively new, causing some of them to lack some features or a large ecosystem around them.
- Low-level development: The flexibility of the BETH stack can also be considered an issue to some extent, it gives the job of choosing how to handle common requirements and concerns like state management and project architecture completely to the developer, which might be preferable to some, but a problem to others.
Conclusion
I think that using the BETH stack largely depends on your personal preferences, whether you would like a fast and simple stack where you have full control over the technologies and techniques you are using, or you want to build your project with established and opinionated frameworks that don’t require as much low-level control at the cost of performance and simplicity.
Stackademic
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us on Twitter(X), LinkedIn, and YouTube.
- Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.
