😤 Tiny JS framework for creating frontend components
oof is a tiny, simple, reactive UI framework for JavaScript.
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')
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.
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.
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.
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.
I don't know - it was quickly made for Decent after we realised that we should probably roll our own UI framework 😤