Building a TodoList in Javascript - Part 1/n

Welcome on board.

English is not my native language, so I hope you will be a little indulgent.

Before we start, I have to really thank Eckehard Fiedler the author of DML 'The Document Makeup Library'.

I whished I discovered his library sooner, I would have spent more time in coding than learning how to use some hyped frameworks.

The scope of DML is to build web apps using Javascript and only Javascript. If that fits your brain, you will enjoy.

So let'start by presenting three functions that make part of the DML library :

make:

// ----------------------------------------------------------------------------
// make: create element with content and appendBase at current base
// attributes is an JSON-object {"id":"test", "class": myclass}
// ----------------------------------------------------------------------------
function make(typ, attrib, c) {
  return appendBase(create(typ, attrib, c))
}

We can see it as a wrapper of document.createElement.

Here is an example of it'use : make

import {make} from "./dml";

let h1 = (content, attribs) => make("h1", attribs, content);
let button = (content, attribs) => make("button",attribs, content)


h1("Hello")
h1("Styled Hello", {style:"color:red"});

button("click me").onclick = () => alert("Hy dear Dev's");

Another examples : make

import {make} from "./dml";

function createGF (type, content, attribs) {
  return (content, attribs) => make(type, attribs, content);
}

// See DML doc to see what is already implemented
let div = createGF("div");
let span = createGF("span");
let button  = createGF("button");

/* counter component */
function Counter () {
  let value = div("0", {style:"display:inline"});
  button("inc").onclick = () =>value.innerText = Number(value.innerText)+1
  button("dec").onclick = () => value.innerText = Number(value.innerText)-1
}

Counter();

make allows to create what Eckehard calls generator functions. Those are functions that generate new UI elements or group of elements.

If the above examle Counter is generator function, a component in traditional term.
You can see how easy it is to update the counter value.
No hooks, no dynamic variables, only direct DOM manipulations.

Working like this may seem a little strange at first sight, but I can assure you, it's very productive and addictive.

You can see how all is 'self-contained', nothing 'leaks' outside of the component.
We can create an event handler, whithout the need to attach it the window.

Here is the equivalent using template string template:

window.inc = function () {
  let counter =document.getElementById("counter");
  counter.innerText = parseInt(counter.innerText) + 1 
}

let Counter = function () {
  let template = `
    <h1>Counter : <span id="counter">0</span>
    <button onclick="inc()">INC</button>`

  return template
}

document.body.innerHTML = (Counter())

You can see here, that we must make 'inc()' global.
And we must get a reference to the counter through it's 'id' which is also global.
Furthermore, template strings are not Javascript, so not debuggable.

In fact, the most remarkable difference is that in first case, Counter returns a real UI element that you can reuse.
In the last case, Counter returns just a string.

And there resides the secret sauce :-)

But of course, you can make use of framework like Preact, if you really want to use template strings and components.
But that is not the subject of this post :-).

You have now a good idea of the 'make' function, and you can easily imagine how the TodoList app will be implemented.

make is a powerfull function, I let you play with it.

Be prepared for the next part.

Thank you