MVU The 28873rd most popular library on jsDelivr

It seems that few people have been interested by trying MVU :-)

In fact, as many of us I keep an eye on all the novelties in front end development, but the one I use because I feel comfortable with it, is MVU (derived from DML)

To give you an idea, of it's simplicity look at the following example and see what can be accomplished with only the following four functions included in MVU.

Those functions aren the following :

• m
• dom
• udom
• render

m function is a tag elements fabric.
dom create an element from where all successives elements are attached to.
udom release the attachement from the latest dom call.
render as it's name suggest render the view on the page

You can rename them as your will, for example you coud use 'begin' and 'end' for dom an udom.

The name m is a credit to Mithril which I mainly use before MVU.

Let's see how to use them.
You can paste all the following snippets on this page Flems

First, we import the functions from MVU.

const { m, dom, udom, render} = mvu.MVU;

Here is how we create a 'div' elements fabric.

const div = m("div") // return a function 

Calling the div function will result in the creation of a 'div' tag element.
(don't be intrigated by the syntax, we will see a better way later)

Example :

const { m, dom, udom, render } = mvu.MVU;

const div = m("div")

div("Hello")

If you run the previous example, you will see the word 'hello' displayed on the page.
By default, the elements are appended to the body of the page.

If you want to attached to a predifined element, simply pass a reference to it to the dom function;

<div id="app" style="border:1px solid red"> </div>

const { m, dom, udom, render } = mvu.MVU;

const div = m("div")

let app = document.querySelector("#app")

dom(app)
  div("Hello")
udom()

Here is the display :

Will you believe me if I say you, that with this in place you can build any complex UI you want ?

You are sceptic?

Let's create a very simple "colors slider" like this one :

Let's go :

The circle :

const { dom, udom, render, m } = mvu.MVU;

const div = m("div")

const mcircle = (size=40) => 
  div('', `width:${size}px;height:${size}px;background:red;border-radius:50%`);

Result :

Notice how we easily create a "function component' for the circle.

Let's add the 'slider component'

const { dom, udom, render, m } = mvu.MVU;

const div = m("div");
const input = m("input")

const mcircle = (size=40) => 
  div('', `width:${size}px;height:${size}px;background:red;border-radius:50%`);


const slider = (min, max, value) => 
  input("", {type : "range", style:"display:block", max, min, value});

mcircle()
slider(0, 255, 128)

Result:

Let's wrap our components in an App component, and we are done.

const { dom, udom, m } = mvu.MVU;

const div = m("div");
const input = m("input")

const mcircle = (size=40) => 
  div('', `width:${size}px;height:${size}px;background:red;border-radius:50%`);

const slider = (min, max, value) => 
  input("", {type : "range", style:"display:block", max, min, value});

function setColor(elt, R, G, B){ 
  elt.style.backgroundColor = `rgb(${R.value},${G.value},${B.value})`
}; 

function App () {
  const circle = mcircle ();
  const [R, G, B] = [slider(0, 255, 128), slider(0, 255, 23), slider(0, 255, 67)];
  [R, G, B].forEach((s) => {s.oninput = () => setColor(circle, R, G, B)});
  setColor(circle, R, G, B);
}

App()

Notice how we can use multiple sliders components and get a reference with all of them through the R, V and B variables.

You can test the code here Colors

We have created a simple component, it'up to you to create new ones, assemble them, and create great UI's.

Tips :

Tao, creator of the astounishing VanJS, got a very interesting idea in order to create elements.

Let's implement a very very simplified implementation for MVU

const { dom, udom, m } = mvu.MVU;

const handler = {
  get : function (target, name) {
    return m(name)
  }
}

let tags = new Proxy({}, handler)

const { h1 } = tags

h1("Hello", style='background:blue;color:yellow')

It'way better than :

const h1 = m("h1")

You can test it here : ProxyTags.