😤 oof

oof is a tiny, simple, reactive UI framework for JavaScript.

What does it look like?

class Countdown extends oof.El {
  init() {
    this.count = new oof.Value(10) // Observable value

    const interval = setInterval(() => {
      
      // Every second, update the count
      this.count.set(this.count.value - 1)

      // Count down to 0
      if (this.count.value === 0) {
        this.count.set('Liftoff!')
        clearInterval(interval)
      }

    }, 1000)

    return [ this.count ]
  }

  render(count) {
    const span = document.createElement('span')

    span.appendChild(document.createTextNode(count)

    return span
  }

  destroy() {
    clearInterval(this.interval)
  }
}

// 10, 9, 8, 7...
new Countdown('#my-countdown')

Using oof

Simply include oof.js in your page. You may want to include more - see tradeoffs.

<script src='oof.js'></script>

You can find documentation on the wiki.

Tradeoffs

oof is small. This means it doesn't have features that you might want, so oof allows you to optionally include extra libraries in your page, and it will use them.

morphdom

If you want to tradeoff size for speed, include morphdom in your page, too. oof will then smartly morph elements rather than re-rendering the entire thing when state changes.

Beware: morphdom might eat your event listeners. See the morphdom example.

justel

It is recommended that you use something like justel to write your component render functions.

class Component extends oof.El {
  // ...

  render(name) {
    return el('div', `Hi, ${name}!`)
  }
}

If you want to use something more JSX-like, check out bel.

Why should I use oof?

I don't know - it was quickly made for Decent after we realised that we should probably roll our own UI framework 😤