Introduction to the Document Makeup Library (DML)

The web has evolved a lot since the days of Tim Berners-Lee, but we are still using some of the initial concepts. From a technical view, HTML is superfuous: We can access the HTML-DOM-API directly to build the DOM. From a programmers view, there are good reasons to rethink the whole concept.

The Document Makeup Library (DML) is a new Javascript library that has just been released as Open Source. DML makes it increadibly easy to build complex web applications using just vanilla javascript (one language to rule them all...). It let´s you create DOM elements using the tags you are used to - not in html, but from within Javascript. h1() creates an <h1>-element, p() a <p> and so on. This makes it possible to "bypass" the traditional HTML-approach completely.

What´s the advantage? Much more than you would think:

Element creation gains some programmatical "intelligence": You can create new elements on the fly using conditions If -> create element A, else -> create element B.

Most Elements have been "pimped" a bit to be more accessible: Simply apply an array to a list using ul(["Milk","Butter","Tea"]) to create a populated list.

DML functions return references to DOM elements, so there is no need to use "getElementById" anymore. It is even not neccessary to use ID´s and Classes at all (though you can still use them if you want). Because elements are created from within Javascript, DOM elements become part of Javascript objects giving direct access to the object state.

No need to use a virtual DOM, direct access is blazing fast on current browswers.

No need to use a Shadow DOM, as CSS properties can be fully encapsulated to prevent side effects.

You will find more useful aspects using the DML-approach. After a few days you will ask yourself how you did it before?

Scope of use

Build complete web applications with DML from sratch (Which is prooved by the DML homepage and other applications). This is easier if you have some experience to use object oriented design patterns.

Use Javascript functions and classes instead of templates and components. It is easy to create your own module libraries that provide reusable components

DML also integrates seamlessly with other frameworks, as it does not presuppose a certain workflow.

If you like them: DML is ideal to create webcomponents

DML can also integrate existing webcomponent libraries into your workflow. Just write some short wrappers.

The core of the DML-libary is free (Open Source under the CC0-1.0 License), a complete introduction and reference can be found here. There are some more advanced modules available for professional use (e.g a charting library with an unlimited number of axis on each side of a diagram).

The homepage itself was created using DML too. It provides lot´s of "living" examples that can be changed to immediately see the effects. Please try out yourself!

What about SEO?

It is true: DML creates dynamic websites, bypassing the traditional HTML-part (though you can still use HTML). Some search engines will not be able to read the content of your site then (beside Google, that can render and index dynamic pages too). But this is not different from React or Vue, that have a similar approach. DML is still a very young project, so server side rendering is not yet implemented.