Using TypeScript and Web Components without bundling, with Deno

My simple Deno website boilerplate now includes client-side bundle-less Web Components with TypeScript.

tl;dr; You can see an example of using a Web Component in my simple Deno website boilerplate. You can also see the code for it.

Why Deno?

It's no surprise I've been quite enamored with Deno and the old-school techniques of building apps and websites, especially the idea of not bundling and not using frameworks.

There's a lot to like, from the lack of large dependencies (in number and size), to the speed of deployment (it's literally up and available in production in a few seconds, as there's no build step!). It's also incredibly easier to maintain.

Why TypeScript?

Budget Zen and Loggit are currently built with Deno and both started off from my simple Deno website boilerplate, but as I converted the apps from Next.js to Deno and vanilla JavaScript, I did lose the benefits from TypeScript, which meant I wanted to eventually bring back those benefits to the client-side code.

Still, I didn't want to introduce a build or bundling step, and since Deno is always server-rendered, I just needed to transpile the TypeScript into JavaScript once the browser requested those files. Luckily, such a project already existed, and while I ended up building a simplified version, it was helpful in getting me what I needed.

Why Web Components?

Then, one arguable benefit from React and other user interface libraries (or frameworks), is that you can build reusable components, but I've found React to quickly lose performance on more complicated UIs, and I don't like all the boilerplate and client-side code it requires, so, as expected, I looked into Web Standards, and that's where Web Components are helpful and beautiful!

Web Components are perfect... web components! You can easily extend an HTML element which modern browsers will interpret without problems, potentially and easily add shadow DOM styles (so they don't clash with global styles), and also local JavaScript.

If you give it a try, you'll see you can get a lot of the benefits people generally associate with React or Vue, without any library!

By allowing Just-In-Time (JIT) TypeScript transpile, we can then build a really nice Web Component, like what I have in my simple Deno website boilerplate, (and this is how it's loaded).

Easy, right?

I hope you enjoy it.

Thank you for your attention and kindness. I really appreciate it!