oof
oof copied to clipboard
😤 Tiny JS framework for creating frontend components
😤 oof
Usage | Documentation
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 😤