Introduction to DML - part 4: The power of simplicity

#webdev #programming #javascript #productivity

The Document Makeup Library DML was created with one target in mind: Simplicity! One library to rule them all (Lord of the rings...). Is it worth trying and does this work at all?

There is an ever growing ecosystem of tools out there to make the life of a web developer easier or more efficient. Now and then we read in the headlines: "10 productivity tools every successful web developer relies on". Just - this comes at a price. There is very little common sense between the tools, most have their very unique approach, their own ecosystem, even a special syntax, semantics, keywoards etc.. Frameworks like React or Angular have a long and steep learning curve, but what you learn does not help you to use any other tool. It is like needing a different driver licence for every car you use.

This was a principle of the web all the time: HTML, CSS, Javascript and PHP have a totally different syntax. If you learn Javascript, it does not help you with PHP at all. Even the naming rules for variables are different.

All the important tools like SQL, Python, NodeJS, React, Vue, Angular, Svelte, Bootstrap or Tailwind (just to name the most common) are islands: they bring their own and very individual concepts, like JSX, XML, JSON, that have nothing in common. And tools like JQuery are simply overwhelming from the sheer number of options they provide.

Just: Does all this pay back?

Maybe for large projects and professional teams. But not every project is that big.

DML is a library, that tries to reduce the number of tools you need. It started as an experiment, but came out to work pretty well. And it brings a new twist to the game. You can find the sources on github and you are invited to contribute and to share the team. The DML project is not very well known, though it earned already some stars on github. There are some good examples on dev.to 1 2 3 4 and a reference page, that doubles as a playground too.

Here is an example of the traditional way to create a button:

<body>
  <button id="button1">Click me</button>
  <script>
      let button1 = document.getElementById("button1");
      button1.onclick = () => alert("Button pressed")
  </script>
</body>

This is common style, just it contains a lot of superfluous things. For example:

Why do you need to search for an element with "getElementById", that you just have created?
Why do you need a name? It is only used to find the element is not used for anything useful after that. What a waste of namespace!
As the name is globally defined, it pollutes the global namespace and may cause conflicts

DML skips all this ballast and creates the HTML-Elements - thanks to the HTML-DOM-API - directly. Because you get access to the element reference, you do not need to search in the DOM tree. You can skip all the "getElementBy"-stuff and do not even need an ID. This is shorter to write, makes less trouble and - as it skips numerous DOM operations like seaching for elements and Id´s - should also be faster. And it works simply fine:

<body>
  <script>
    button("Click me").onclick = () => alert("Button pressed")
  </script>
</body>

In DML the most common HTML-tags are implemented as Javascript functions. Currently the core library is only 25kB minified, and it contains still a lot of things for convenience, that possibly could be moved out of the core in the future. But compared to other tools, this is still pretty lightweight.

You are not bound to what DML provides out of the box. If something is missing: Just use "make" to create a any type of Element that the browser API provides. You can use "make" directly or wrap it in a function body and - voila - a new DML command is born (like shown in the following example):

<body>
  <script>
    // use "make" to create any possible HTML element
    make("button","","Click me").onclick = () => alert("Button pressed")

   // The same as a "wrapper" to use the HTML-name directly
   function button(name, attributes){
      return make("button",attributes,name)
   } 

   button("Click me").onclick = () => alert("Button pressed")
   // Same call like in the previous example
  </script>
</body>

As you might see: The concept is fairly simple, but plays very well. There are some things you should know about DML:

it integrates with EVERY other framework. As long as you can execute some Javascript, you can use DML to comfortably generate dynamic content somewhere in your DOM tree
Elements created with DML do not behave any different from elements, generated with HTML. You can easily mix both approaches.
CSS works exactly the same as you are used to. So, if you create new elements with DML, all CSS rules are applied in the same way as they would be with the common approach.
DML makes it easy to add CSS-classes or inline styles to your newly created elements. Most functions have a second parameter, that can contain a property h1("Headline",{class: "myclass"}) or an inline-Style h1("Headline","background-color: red;"}). Using inline styles is not encouraged, but can be handy, if you want to apply styles to a single element only.
You can easily create Webcomponents with DML (as shown in the reference page), but it is recommended to use Javascript classes with DML. Class objects behave very similar to Webcomponents, but gain all the merits of inheritance.

There is a great number of tasks, that are easily solved with DML. You want a responsive design? Just create a different layout depending on the screen size. No sophisticated CSS definitions needed.

Javascript knows about 48 keywoards only. That could probably be enough for 98 Percent of your tasks!