Home
Head's Up: I'm in the middle of upgrading my site. Most things are in place, but there are something missing and/or broken including image alt text. Please bear with me while I'm getting things fixed.

Hello, World With Reef

some stuff

Reef reef is a little 2.6kb JavaScript library for adding functionality to pages. It looks really good. It didn't take much to figure out how to get the basics going. And, it doesn't take more than a few lines to get things moving on a page (see the example below)

The Simple Life

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.

Introducing Reef

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.

The Example

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.

The JavaScript

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 ` < div > ` html ` .

JavaScript

function init() {
  let datastore = reef.signal({word: "---"})

  function output_template () {
    return `<strong>${datastore.word}</strong>`;
  }

  reef.component('#theWord', output_template);

  let buttons = document.getElementById('theButtons')

  buttons.addEventListener("click", (event) => {
      if (event.target.dataset.word) {
        datastore['word'] = event.target.dataset.word
      }
    }
  )
}

document.addEventListener("DOMContentLoaded", init)

Some Details

The basic breakdown is :

The output templates are re - rendered every time the values in the datastore change. So, clicking the buttons changes the text.

Wrapping Up

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 ` < script > [TODO: Code shorthand span ] tag or an ES import

- There's a bunch of other features I haven't looked at yet like Native Web Components. Looking at them is the next step to see what else the library can do

- One other feature is a ` reef.store() ` javascript ` that's used in place of ` reef.signal() ` javascript ` . It does more encapsulation. I started out with it, but couldn't get it to work with the button click event listeners

- Updates are made by diffing the DOM. I'm not exactly sure what that means, but my understanding is that it's the better way to do stuff

References

Footnotes And References