The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Hello, World With Reef

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)

TODO: Pull subtitle into page object

some stuff

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 `

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.

Notes

References

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Hello, World With Reef

-- p
-- class

some stuff

-- tldr/

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)

-- /tldr

-- h2

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.

-- h2

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.

-- h2

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. 

-- html
-- class: htmlBlockPre
-- type: showbelow

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

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


-- html

<script src="https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.min.js"></script>

-- h2

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

-- script
-- type: show

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)

-- h2

Some Details

The basic breakdown is:

-- list

- 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


-- p

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

-- h2

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
-- title: 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


-- h2

References

-- ref
-- id: reef
-- title: Reef
-- url: https://reefjs.com

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

-- ref
-- title: Reef API Docs
-- url: https://reefjs.com/api/

The place to go to see how things work

-- ref
-- title: Reef Advanced Techniques
-- url: https://reefjs.com/advanced/#stores

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

-- ref
-- id: alpine
-- title: Alpine.js
-- url: https://alpinejs.dev

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

-- ref
-- id: htm
-- title: htmx
-- url: https://htmx.org

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

-- categories
-- JavaScript 

-- metadata
-- date: 2023-10-16 23:01:25
-- id: 2wsc1ui4
-- site: aws
-- type: post
-- status: draft