Introduction

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.

bindStateToDom usage

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
state.meal.vegetable._set("Carrot");
// To add an element to an array
state.meal.fruits._append("Pineapple");
// To add an element somewhere in the middle of an array
state.meal.fruits._append(2, "Pineapple");

Caveats

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.

Todo

"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)

Why use something like this then?

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.

Demo

The next content shows everything that works

Array

Array element -

Delete this element

Delete

Add element

Form -

<potatoout> A user defined output component

Number

Number (Mirror) -

The state

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

The code - lines, with comments

Conclusion

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

Simulacra 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.