Aishikaty's blog

World's smallest reactive view library

In a couple of last weeks I've been wondering how reactive view libraries work under the hood. Beacause it's easier to learn from simple examples I found a few really tiny ones.

As I was going through all the code I started to see patterns and things that could be simplified. I soon wrote dozens of snippets and several versions of proof-of-concept libraries.

And I found out when you write a library and you're trying hard to make it as simple as possible, you have to choose between functionality/usefulness and small amount of lines.

It made me wonder: How small the library really could be to make a sense? And after some code-golfing it seems to me like it can be really really tiny. In fact it can be so tiny that you can fit it in a tweet!

Here's the code I came up with:

const render = () => document.querySelectorAll('[onload]').forEach(el => el.onload())

I know what you are thinking: That's a joke. How this could be useful at all?

Let me show you on a simple binding demo from Vue.js website:

<div id="app">
  <input v-model="message">
  <span>{{ message }}</span>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello world!'
    }
  })
</script>

With our tweet-size library, we can do the same thing, look:

<input
  oninput="message = this.value, render()"
  onload="this.value = message"
>
<span onload="this.textContent = message"></span>
<script>
  let message = 'Hello world!' 
  render()
</script>