React on a Budget with Lit-html and Haunted

17 November 2020

I love using React.

I love not having to query the dom every time I have to show or hide a modal. I love being able to know where the source of truth lives in an application. And I love hooks! A bunch of useful closures with escape hatches to the imperative world? Sounds good!

React is based on a state-driven UI concept. This concept is powerful enough that React has been inching ahead in the front-end framework wars - even after the drama about JSX in 2013.

But I'll tell you what I don't love:

I don't love 2 megabyte "hello world" apps. I don't love having to buy into a build step to get code to run on a browser. I don't like having to download hundreds of webpack dependencies to get a little interaction happening on a website. I guess this isn't really the use case for React. But some sure treat it like it is!

What if we could get some of the goodness without the bad?

This is what lit-html gives us. It's a new UI Library from the folks over at google's Polymer Project.

It's a LOT smaller than React, and can be used without a build step. How does it manage this? It uses native web components. These are basically a way to wrap HTML templates into a custom angle brackets tab NATIVELY - using functionality which is built into the browser. It also leverages JavaScript template literals (those are the strings with the back-ticks).

You can find lit-html compared to a number of other components on the Web Components Dev Website.

Now it's kind of could be a barrier how different the lit-html API is from React. But if you take a look at the list of web components libraries in that link, you might find one called 'haunted'.

Hooks in Lit-HTML with Haunted #

An awesome way to leverage lit-HTML is with Haunted. This is a wrapper library around lit-HTML which uses the React hooks API. This means that you can utilise all of your favourite React Hooks patterns, but without having to pull in the entire size of React.

I haven't had a lot of chances to experiment with Haunted but here's a cheeky little Codepen to check out how to get from zero to interactivity with Haunted.

I'm excited to continue using Haunted in future projects.