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 `

`html`.

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:

Use `reef.signal() [TODO: Code shorthand span ] to create a datastore with an object in it that contains the keys you want to use
Define an output template in a function
Use `reef.component() [TODO: Code shorthand span ] to bind the output template to an HTML element with a specifc ID
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.

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.

Notes

Reef doesn't have a build step. So, adding it to a page is as easy as calling it with a `