YoffeeJS: Yet another Javascript framework. But this one's good, I think
Tags: javascript, webdev, react, webcomponents
Published: 2021-08-03 16:08:34

As I strive to refine my stack, one consideration becomes increasingly important - **Simplicity**. 

I want my main tool - the UI library - to do just one thing: help me create reactive components. While doing so, it has to be unopinionated, as close to the standards as possible, without imposing anything except for the data reactivity bit.

I didn't find anything that felt good enough, so I made one. Meet *YoffeeJS*.

{% github lefetmeofefet/yoffee no-readme %}

Yoffee doesn't invent a new syntax. It doesn't impose a cumbersome API. No build steps. No Virtual DOM to slowly depress your soul. All you need to know is HTML and Javascript, and you're set to go.

## Hello World

```html
<script type="module">
    import {html, createYoffeeElement} from "https://unpkg.com/yoffee@latest/dist/yoffee.min.js"
    createYoffeeElement("hello-world", () => html()`<div>Hello World!</div>`)
</script>
<hello-world></hello-world>
```
Try it on [JSFiddle](https://jsfiddle.net/Numbnut/xmu902Lq/)

In this example we used the two API functions of Yoffee: `createYoffeeElement` and `html`. 

The output is a legit web component - a brand new HTML tag.

## What about data?

Yoffee's features one-way data binding, much like React. Consider the counter button example:

```html
<script type="module">
    import {html, createYoffeeElement} from "https://unpkg.com/yoffee@latest/dist/yoffee.min.js"

    createYoffeeElement("counter-button", () => {
        const state = {
            clicks: 0
        }

        return html(state)`
            <button onclick=${() => state.clicks += 1}>
                I've been clicked ${() => state.clicks} times
            </button>
        `
    })
</script>
<counter-button></counter-button>
```
Try it on [JSFiddle](https://jsfiddle.net/Numbnut/6c7ovnuk/13/)

When `state.clicks` changes, Yoffee knows which expressions need to be rerun, and in turn which DOM Nodes need to be updated. No unnecessary expression evaluations, no DOM Diffing. You can read more about the mechanism and how it compares to other libraries in the [official docs](https://yoffee.netlify.app/).

## What about _everything else_?

Yoffee is just a thin wrapper for web components and reactive html. 
Things that usually require learning in other frameworks are elegant and obvious in Yoffee, like CSS, shared state, listening to events, passing data from component to component, calling callbacks passed from parent element, reacting to property changes, and more.

## I use it and so should everybody
Joking aside, some code style decisions were made, and I don't claim that they're objectively better. Some people may like the `useState` syntax better.
For me, this is the perfect framework. I use it in my projects.

My wildest hope is that other people will like it, and use it, and maybe even contribute to it.

In the future I plan to fill gaps that'll make it more accessible to everybody, like a components library and better documentation. 

Feel free to contact me, or add issues on [Github](https://github.com/lefetmeofefet/yoffee) or magically dive into the code and open a PR. 

I'd love to collaborate!