I was wondering if I could replace Vue.js in one of my projects by something smaller in 15 minutes.

After 2 days, I have a small MVP that supports most of the things I need.

You might not need a frontend library

The problem that most modern JS libraries are solving is binding data to variables in a state.

These libraries are often huge and difficult to debug, since a lot of their magic is abstracted.

This project aims to create a very small function that allows bidirectional data binding with the DOM.

Extend and modify as you wish, this is only a starting point.

This implementation brings no additional render step and builds upon functionnality that already exists in the DOM. No shadow DOM is used.

Copy paste the bindStateToDom in your code (or in a file) and use it like this:

const state = { meal: { vegetable: "Potato", vegetableCount: 42, fruits: [ "apple", "tomato", "orange" ] }, lines_of_code: '?'
}; bindStateToDom(state, document.body, {extraComponents: extraComponents}); // To change an element programmatically
// To add an element to an array
// To add an element somewhere in the middle of an array
state.meal.fruits._append(2, "Pineapple"); 
  • Coded in one day
  • Arrays not mutable (yet) - Day 2 update: You can append to arrays
  • You have to set state with myparameter._set(), since __defineSetter__ is not used
  • No if clause yet, but it could easily be done with a custom component
  • Low level, prioritizes speed for end user over developer convenience.
  • "if"/"else" component
  • Hints for templates and single file components
  • Data serialization (A method to conveniently filter generated parameters starting with '_')
  • More components (like checkbox, radio)

Sometimes, you don't need all of vue or React's functionnality to create simple forms and applications. Using smaller libraries in this case could help speed up the web.

The next content shows everything that works

state = { meal: { vegetable: , vegetableCount: , fruits: , }

Implemeting data binding with dynamic arrays is difficult. But I think I got it right.

This is just a proof of concept that you don't need all the slugginess some libraries bring to get the benefits of bidirectional data binding

Things that are already optimized in the browser, such as querySelectorAll with attribute selectors, can be leveraged to make low-overhead and low-memory footprint data binding.

For more advanced alternatives, see

Moon Preact

You don't need React

As developers, we have the responsibility to save energy and people's CPU. Start by only including the minimal amount of dependencies! Try living with an old chromebook sometimes. Slow apps generate need for more new faster computers.

Keep your apps working on old hardware, reduce power consumption and computer waste.

Have a nice day