DML is to Javascript what Tailwind is to CSS.
Tags: dml, javascript
Published: 2021-07-30 07:36:55

I am still impressed by the way it works.
Look at this piece of code :

```js
function topBar (appName) {
  let _styleTopBar = {style :`
      background:orange;
      line-height:50px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
      padding-left:10px;
      padding-right:10px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.13);           
  `}
  let topBar = selectBase(div("", _styleTopBar )); 
  let _styleItems = {style:"cursor:pointer"}
  let brand = div("brand", _styleItems); 
  let title = div(appName, _styleItems); 
  let help = div("Help", _styleItems);        
  unselectBase(); // topBar
  for (let item of [brand, title, help]) {
    item.onclick = () => alert(item.innerText);
  }
  return topBar;
}

let topbar = topBar("DML Demo");

console.log(topbar);
```
Here is the result of the output:

```code
<div style="background: orange none repeat scroll 0% 0%; line-height: 50px; display: flex; justify-content: space-between; margin-bottom: 50px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.13) 0px 5px 5px;">...</div>
```

As Eckehard says, the author of DML, topBar acts as a function generator, it generates a real UI Element.

And to prove it, you can use your favorite framework to render it on a page (but you don't have to :-))

Here is how to render a topbar with Preact

You can test it here [Topbar/Preact](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAzAOgGwE4A0IAzvAgMYAu8UyIGAFuWLCAYaQE4D2szSA2gAY8AgLoEAZhASFkfUADsAhmERJaDJixClO8ynpoAdeQB4NsAASxF8gOYBeQyCjwnAPmMWz8RVA-yLQK8VckULUjpFdmJyRxAAV3JxAFoADndPIJNyCHIENxy8+BMAekL8zMCTELClFTiANwh4AHcAB052cidw3X1Ypxbocjp7FybSeGShqBG8Cwh5XIhFWGS2Vfh7AEYMAQyArLZ2CDbyC0J2UjiGcjbCJBKS+HE2xVt4DBcSgBEAWQAMr9AQB9OicFRvD4lWAQABGwIByUg8gwACtCO5SsdTuR-EELJ5SnQfH4iXDOFAAJ74o4cXH+Yw6eSEc7ACzseDyFzsCwAX0C9kCbU5igoAG5jMZxPF5BQILoLOROG0AEJRCwACkUbTaADllPAAJQWYCZBDnEGsqkIAAqKvVvKFwGtCAsSAABpUgnCxQBrWxcWVQJCdGwfSWHAmw+RTEkQWwMVACNoAD0jBMCUAghDa1ipSAs4gQ6e9gTR8VZEHEVOSzP6hdzYqmcPg5Ba8C5GczYCitkWyQp5GVYELKBTpajQTeMEWtmSCHE5CQ2wn3YJM+zdmSJ0Ty9XafXPs4qfWkSgnBahYEFhQadv9-Ytl9mqEb+EGG2aCN4szf8yHp8uabZKg6GpCsQZDkOqxCatmDSak4TjzFa5A2vA9pqhqRo-oShwWhYqHoQAkpQYCEBYzquvASBOKQ8TRJ0SAdIslDsE4QH4SBcLsDYUCURY8GISAPF8chhHUaR8DkbhwHnOU8ACUJOr6oaKGSWRhCyVx5wkrAbRKRACFOAAEiQbTiURCBSTJv5-nhgSypB8AUDB8CarhTygVh7GHOInRagRuTSRYnDiBYfCidy8wKfMeltCIJpmlOwVgBguikLCpB+gJHmUW4FibF0mqpRgiyxuwtrwKm5A-pknGBJy5AMQEyo+ZGnHGJy3LwOwmptY6wk-NJnAWP8AJOEa8wXvRKh6BgFLUnV8jeti9JnAVRIlItNLGMSjCwP4WjOfKugyGoaAoCuIB8ngCiGjQ6IyAQ9ZcuQNA3XdIB1KotCkIQz3aH0b00DtpqZL2T6LO6FgCN2m5zjDcPGJxGCpuDhwUuwPKFge6OENw0AclQHXHSQLk5GdNBXQATCgN1iCAMZ+udcjfQ9ahwgDWgMbwIC3PcjwlLKbQBhgOhgNt3MEGhbS-TiZyffdKg0CKPgUDz7B8wLDxPCLYsSyUatiuQAACq4YCgn4ACwlNmrJG6KFAYCiT1aLL8vre9fKMz9NBtb67A3UAA)

```js
const { render }  =  preact;

function topBar (appName) {
  let _styleTopBar = {style :`
      background:orange;
      line-height:50px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
      padding-left:10px;
      padding-right:10px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.13);           
  `}
  let topBar = selectBase(div("", _styleTopBar )); 
  let _styleItems = {style:"cursor:pointer"}
  let brand = div("brand", _styleItems); 
  let title = div(appName, _styleItems); 
  let help = div("Help", _styleItems);        
  unselectBase(); // topBar
  for (let item of [brand, title, help]) {
    item.onclick = () => alert(item.innerText);
  }
  return topBar;
}

render(topBar("Demo DML"), document.body);
```
But you can simply render topBar natively [TopBar](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAzAOgGwE4A0IAzvAgMYAu8UyIGAFuWLCAYaQE4D2szSA2gAY8AgLoEAZhASFkfUADsAhmERJaDJixClO8ynpoAdeQB4NsAASxF8gOYBeQyCjwnAPmMWz8RVA-yLQK8VckULUjpFdmJyRxAAV3JxAFoADndPIJNyCHIENxy8+BMAekL8zMCTELClFTiANwh4AHcAB052cidw3X1Ypxbocjp7FybSeGShqBG8Cwh5XIhFWGS2Vfh7AEYMAQyArLZ2CDbyC0J2UjiGcjbCJBKS+HE2xVt4DBcSgBEAWQAMr9AQB9OicFRvD4lWAQABGwIByUg8gwACtCO5SsdTuR-EELJ5SnQfH4iXDOFAAJ74o4cXH+YzGcTxeQUCC6CzkThtABCUQsAApFG02gA5ZTwACUFmAmQQ5xBhHIVIQABUefz2BZ7LLlar4BYkAADSpBOGKUgAa1sXFZUCQnRsHwA3GbArD5FMSRBbAxUAI2gAPN2HAlQCCENrWKlICziBAh90WNHxZUQcRU5I6PTwPRxqOWqZw+DkFrwPOhgmBMBRWyLZIU8jcsBxlCBpNhoJvGCLWzJBDichIbYdqvVnsRuzJE5+4ej4PjgkUoPrSJQTgtOMCCwoYO7-fsWwWwVCM-CDDbNBSl3Vu+ZY0AX3lpa5moFuuIZHI-OIgojDSCk4TjzEqKrqu+2pSjehKHAqFhgQaACSlBgIQOp6uB8BIE4pDxNEnRIB0iyUOwTjPnBr5wuwNhQBhAFASA1G0SBCH6ggKHwGhMEvuc5SGrqDEiuKkqgex8Ccdxt68RYJKwG09EQIBTgABIkG0rGIRxqGEDBd6wYErJfvAFC-vAgowU8b58lEmTiJ0QrwbkXEWJw4gWHwzHyFA8z8fMcltCIMpyl2zlgBguikLC1oYRZOpuBYmxdIKYUYIsXrsGq8BBuQN6ZBRgTsKW+EBNyNnsKGFGeGVWqMT8XGcBY-wAk4UrVZBdUNU1gLJAATK1TJdti9JnAlRIlBS1L+MSjCwP4WjGeyugyGo2y9UgAggI+eAKJKNDojIBA5v0NBbTtIB1KotCkIQh3aH0ebkDQk1UrKmS1keixGhYAjjpOfbfb9xgURgQZvYcFLsC47BxguYOENw0AWEVUCVQtJAmTky00CgSC9SgW1iCAnpWitcgXXtahwrdWj4bwIC3PcjwlKybQ2hgOhgBNNMECqbRXTiZxnbtKg0G0RWWk9BB0zQjMPE8rPs5zJTiz4FAAAKjhgKCXgALCUEbKirEsUBgKIHVofMCyNT2PkTl00GVFrsFtQA) :

```js
 topBar("Demo DML")
 topBar("Demo DML-2")
```
Amazing :-)