Hello, World With Reef

some stuff

TL;DR

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.

<div id="theWord"></div>

<div id="theButtons">
  <button class="clicker" data-word="Hello">Hello</button>
  <button class="clicker" data-word="World">World</button>
</div>

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

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()`javascript` 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()`javascript` 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 `<script>`html` 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

Reference

Reef

The JavaScript library that's the subjet of of this post

Reference

Reef API Docs

The place to go to see how things work

Reference

Reef Advanced Techniques

I spent an hour or two on the Reef site and totally missed this page even though it's in the top nav. Definitly worth a look

Reference

Alpine.js

I've used this a little, but the syntax feels a little weird to me

Reference

htmx

From the marketing page: htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

I didn't like the way it worked. I don't remember specifically why, but I think it had something to do with a bunch of back and forth to the server