Reef JavaScript Library Hello World Example

The Simple Life

I'm not interested in top level frameworks like react. They do more that I want and if you want to do something in a different way then they are designed it's a fight.

What I _am__ interested in is libraries. Things I can add to indivudal pages to add functionality when it makes sense.

I've played with Alpine.js^alpine^^ a little and like it's approach. I've also looked at htmx^htmx^^ but I didn't like the general way it worked.

Introducting Reef

I just discovered another one called Reef^reef^^ which is what this page is about. It's a hello world scratchpad to kick the tires a bit.


This is the HTML that on the page that displays the buttons and sets up the location for the output display along with the buttons themselves

The JavaScript

This is the code that's sitting in a script tag at the `<head>`html` of this document. It uses Reef's "signal" and "component" functionalty to wire up the buttons to output a value into the `<span>`html` tag.

First Attempt That Didn't Work

The first thing I tried was using "store" instead of "signal". The docs introduce "store" as a signal that you can only update via function calls that are defined when you make it. I couldn't get it to work with the button clicks.

I'm not entirely sure what was going on. While I like the idea of issolating things a little via the funcitons none of the work I'm doing requires that. So, signals it is.



A lightweight JavaScript Framework



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



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