The BETH Stack: Build Hypermedia-Driven Web Apps with Great DX and Performance

An opinionated way to build web apps in 2023
-------------

Content Credits:

------------

This video is NOT sponsored in any way. I have zero relation with any of these projects. I choose the stack because I though each part was cool.

------------

VS Code:
Font - Fira Code
Theme - Material Theme Darker
Gear:
Microphone - Shure SM58
Headphones - Philips SHP9500
Interface - Focusrite Scarlett 2i2

Timestamps:
0:00 Intro
0:15 HTMX
2:07 HTML templating
3:25 JSX is pretty good
4:17 typed-html
4:51 Bun
5:20 Elysia
5:45 Lets start building
6:55 Add JSX
7:23 Add HTMX
7:53 Add Tailwind
8:32 Todo list time
9:00 Reading Todos
9:34 Updating Todos
10:39 Deleting Todos
11:15 Creating Todos
12:04 Using a 'real' db
12:22 Turso
12:50 Create db schema
13:59 Using the db client
14:56 Client Scripting
15:27 Hyperscript
16:08 Time to deploy
16:51 The BETH stack
17:06 Outro

[ethanniser]

CORRECTIONS:

8:04: Tailwind via script tag is "designed for development purposes only, and is not the best choice for production"
I HAVE UPDATED THE GITHUB REPO WITH A PROPER TAILWIND IMPLEMENTATION- basically uses the tailwind cli to generate a output css file and serves it for the main page to have a link tag to, also added a dev script for automatic rebuilding on changes

OTHER STYLING OPTIONS: Obviously there are lots of styling libraries out there. Feel free to pick whatever one works the best for you.
I have added examples using twind and uno (both do not require a cli step) as branches in the repo if your curious what that might look like.

[VictorMartins]

M: Moddable SDK
E: Elysia
T: Turso
H: Htmx

[snavesinned]

First, this is super cool and a very creative stack using these technologies, but we've basically come full circle back to full server-side rendering but with serverless. I don't see this being any simpler or more complicated than other options, it just makes it look like the data to html translation is getting cut out when it's really just being abstracted away. And yeah, wow, the speed of bun and these frameworks, I can definitely see the appeal of rendering on the backend for consistent page load speeds, especially with caching strategies (memcache) using a functional programming paradigm.
This will give us a lot to think about. I'm interested in seeing the pros/cons pan out on this one. At a minimum, I think this will lead to other innovations and trends for web development.

[hartvenus]

Good to see No Boilerplate inspired youtubers propping up <3

[woodmanmade]

Starts with "tired of all the chaos in frontend dev"

Proceeds to suggest using 4 super bleeding edge tools 😅

And here I thought I was an early adopter hipster programmer!

----

Jokes aside, some interesting things in here. Not really for me (I'm a SvelteKit groupie) but some cool approaches nonetheless.

[Gabriel-ejxv]

Maaaan! This is really awesome! I don't remember the last time I felt so exited about development like I'm now, this approach have much potential!

[tdotgg]

Wait no I’m the person who made a YouTube channel then a tech stack and got prime’s attention

[oscarljimenez]

I love how his almost writing React Server Componentes without writing React Server Components 😂

[andreas.soderlund]

It was an interesting look into the bleeding edge, and I want to like it, but in the end this is as complicated as installing most frameworks with most ORM:s and most databases.

I'm sure it will be fast, though speed issues, when disregarding bad coding, is a luxury problem that most sites won't have.

It's also amusing (in general, not just to this stack) that type safety seems so important on one hand, but on the other hand, inline string-based DSL:s are happily being used, with Tailwind and htmx/hyperscript, at best semi-statically type checked by VS Code extensions.

The most straightforward way I've found to develop web apps today is SvelteKit, which replaces most of the libraries in the first 12 minutes of the video with a single npm command. (It has an experimental bun adapter as well.)

[xcz]

That was incredibly cool! I'm going to build your demo this weekend. I keep wanting a off the React treadmill, and this felt really clean and full of potential.

[EudaderurScheiss]

i started with web dev 22 years, went into a the backend role for now and stopped frontend when react started going big. and as i can see nothing has changed lol. ive implemented my own htmx 20 years ago, always wanted purly functional clients with my own html elements.

my syntax looked like <div m-endpoint="/..." m-action="swap" m-data="post"> m stood for my.

you could also just define <input name=""> etc. i really believe every js programmer reinvents the wheel over and over again. back then it was considered bad practice to have your own html elements.

[magne]

Your videos are above and beyond! Exceptionally pedagogical, and always adressing the cutting edge! I hadn’t even thought about this unique stack before! Instant sub!

[FajarAndiPatappari]

Crazy good....! Keep produce content with BETH stack. I want to know more. Thank you

[axa]

We're going back to the old PHP days. I was there. It was hell.
Frameworks like Next, Remix, Astro etc. are popular for a reason and throwing out hydration and a JS UI library in a modern web app looks nice on paper but it's a very bad move that will cost you a lot down the road. Also, start thinking about extreme edge cases, large refactors, auth etc. It can get very painful very fast. It looks nice but it's not fitting for all use cases.
Don't trust the hype, the real tech stack you need is always different and will always depend on the specific requirements of the project.

Performance is cool, less JS is cool but in the end we should be focused on building things not overthinking them into existence.

BTW this is a nice video and it was extremely informative and easy to watch.

[rujmah]

Awesome intro to the... erm, BETH stack 😮 😄
Great use of bun.js and some of the other tools. Going to give these a try. Looking forward to your other videos.

[rucklerful]

thank you so much for the effort in making this video. I had a blast watching it.

[mrtnhwtt]

Amazing video! I’ve been wanting to test htmx, I’ll give it a try with the tools you mentionned!

[solarburster]

htmx is a great tool to go with when your goal is to show tons of data, like thousands of rows or cards and to avoid using react virtualisation. But, on the other side, doing some complex forms with dynamically added fields would be worse DX than react-hook-form. Anyway, thanks for sharing your stack.

[tylert]

Really love where the js ecosystem is headed. Its like waking up from a hangover from all the unneeded complexity and crap performance.

[mgan]

Been on the sidelines on tech news, this was a great overview of some of the new tech. Great to see how tailwind slots into htmx and the recent bun announcement — great content 💯