I'm not interested in top level frameworks. They do more than I want and it's always a fight if you try to use other tools with them. For a simple blog like this, the value they provide isn't worth the cost.
What I _am__ interested in is libraries. Things I can drop into individual pages to add functionality where it makes sense.
I've played with Alpine.js^alpine^^. I like it's approach, but I'm not a huge fan of the syntax. I also looked at htmx^htmx^^ but didn't like the way it worked in general.
Now, I'm looking at a library called Reef. It's what this page is about. Reef's site describes it as "a tiny utility library for building reactive state-based UI". Below is a Hello World test.
Printing "Hello, World" to the console doesn't demonstrate much. Instead, here's two buttons wired up to change a piece of text. This represents most of what I need from a library. Specifically, the ability to click on things and have something on the page change as a result.
Here's the buttons with the HTML that renders them undreneath.
Here's the code that powers the buttons. It uses Reef's "signal" and "component" functionalty to wire up the buttons to output a value into the `
The basic breakdown is:
Define an output template in a function
Add whatever functionality you want (e.g. button click events) to change the values in the datastore which then re-renders the template in the bound element
The output templates are re-rendered every time the values in the datastore change. So, clicking the buttons changes the text.
I'm impressed. This looks like a perfect little library for me. I can call it on pages that need it without having to wrap my site in a complete framework.
I'd started making my own colleciton of Vanilla JS tools. The number just went way down. Reef is gonna cover most of what I need.
Reef doesn't have a build step. So, adding it to a page is as easy as calling it with a `