DEV Community

Do we really need HTML?

Eckehard on February 11, 2023

Recently i read the VUE-documentation about client side rendering, which is considered to be slower than server side renedering: ...because the b...

Read full post

Diona Rodrigues • Mar 1 '23

What a great discussion here in the comments. It's always good to know how things work behind the scenes and have the insights to try different approaches using JS, especially now that search engines are able to index it.

Niels Abildgaard • Feb 14 '23 • Edited

if the page needs a complete page reload to jump from one content to another, it is nothing users would accept today.

This is baffling to me. Unless you do something really weird, a page should load in < 300 ms, which I've never heard of anyone complaining about.

There are some issues with your notes on performance. For example, a page rendering with DML will not be able to take advantage of the same browser caching as regular HTML pages. The same goes for caching of external resources like CSS files with styling reused across pages. Packaging it all up as Javascript has significant performance costs.

Your general approach (and your work on DML) also seems to ignore a lot of the benefits of CSS and HTML: a lot of work has been done to make complex code relatively maintainable and easy to reason about.

Styling elements individually, which DML seems to encourage, requires a lot of discipline in extracting and reusing small functions -- without necessarily encouraging that practice. CSS encourages exactly this by providing reusable classes as the most basic abstraction.

On the other hand, you're not alone in this. CSS frameworks like Tailwind are very similar in being close to styling for every element.

Eckehard • Feb 14 '23

Hy Niels,

thank you for checking out DML so thoroughly. Let say: this is just an experiment, but in some cases it works pretty well.

Maybe I have to clarify some points:

The target of DML is not performance, but simplicity (and a reduction of tools you need). DML just uses JS and some CSS, nothing else. Finally, it works good enough in my projects, but I´m sure, the HTML rendering engine does a better job. That´s ok, as long as my approach is fast enough.

If you check out the DML-homepage, you will find a lot of "living" examples with interactive code. I developed this page without any external tools within some days only. I´m pretty sure this was not possible with any other framework i kow.

You can use CSS and DML without any limitations, even with Tailwind or any other tools you like. I used shoelace on my demonstation page, which integrates pretty well. There is absolutely no difference if an element was created fromHTML or with DML, it just behaves the same.
Using inline styles is not encouraged as a general approach. But if you need some styling for a single element only, you can do so without creating a separate CSS definition, you do not even need an ID for that. But if you want some general styling, you better go with an external CSS file.

I found, that the CSS files I use with DML are much smaller than things I usually see. This is, because I only need the general styles, nothing that applies to a single element only.

You have all the benefits of caching for external files, there is absolutely no difference if you use DML. You can also use lazy loading if you like. Just, you do not need to cache any HTML, as there is none.
The browser is very efficient to optimize DOM interactions. Even if you rely on heavy DOM manipulations, you will hardly see any flicker at all. As long as your code is not too stupid, the result will be very smooth.

So, currently all projects I started with DML came out pretty well, just using Javascript. If it comes to reusable code, this is truely an advantage to go just with JS-classes instead of webcomponents. But this is only possible, if you do not use any HTML at all.

Niels Abildgaard • Feb 15 '23

I see that using external CSS files is possible. I think my confusion stems from your continued uses of phrases like "just using Javascript"---even in the response above you phrase it like that. If you are using CSS, then all your code isn't in Javascript.

Am I correct in understanding that the goal of DML is limited to replace HTML with Javascript? If so, how is it different in its aim from e.g. React or Vue that replace HTML with their own templating?

Finally, on your note about the site you built:

I developed this page without any external tools within some days only. I´m pretty sure this was not possible with any other framework i kow.

I think your site looks like a great case for a static-site generator like Eleventy, with some vanilla Javascript to run the code examples. I think a few days sounds reasonable. The output would be more cacheable HTML.

I think there's a fundamental thing I'm not understanding with DML. You are largely reproducing the logic of HTML while replacing the syntax with something that is valid Javascript. I understand that you get easier references to elements in this way, but other than the syntax it doesn't really differ from many other templating languages... I feel like I'm missing what it does differently and better on a fundamental level?

Eckehard • Feb 15 '23 • Edited

There are some fundamental differences between a "markup language" and a programming language: You cannot use any "logic" in HTML beside some very simple, predefined tasks.

Assume, you want to have a "responsive design", which generates a different page depending on the screen width. This is just simple with the DML approach, you implement the decision with one line of code.

In the "classic" approach, there is a special tooling in CSS for just that case. But what, if you want to create the site differently based on sceen orientation, or based on the daytime? Everything easy done with Javascript, but you will possibly find no tool that does exactly this. This is the reason, tools like Angular or JQuery have such a overwhelming number of options: They need to provide a tool for every possible situation.

If you need to create a list of numbers from 1 to 100, this is just one line in DML:

   for (let i = 1; i<100; i++) p(i+")")

result

1)
2)
3)
4)
5)
....

What options you have with just HTML? Learn Angular and use ng-for? So, you alway have to jump out and get more complexity in your setup. And you probably will be limited to what this external tools provide.

As you may see, with a programming language you are prepared for every possible situation with some lines of code and with the tool you already know. With the "declarative" approach, you need a new tool for every possible situation. Maybe you have seen the "interactive editors" on the DML homepage. That have been created also with JS only and without any new tools to learn. It is just plain Javascript.

There is another important difference: Names in HTML are always globally scoped. So, for every element you need to access, you need to create a separate name or "ID". With DML, you get the DOM refecence directly, so you can encapsulate the process. See this example, that is also on dev.to compared to a "classic build":

There is some code to create a small working clock with DML, all elements included. Here is the complete code you need to create a nice group of colored clocks. No React, no Angular, now Webcomponents:

 <script>  
   let c = ["red", "green", "blue", "yellow", "orange"]
    let k=0
    for (let i = 200; i>30; i*=0.75)
         myClock(i, "background-color: "+c[k++]+"; margin: 10px; border-radius: 25%;")
  </script>

This is the result:

See the full code here

Niels Abildgaard • Feb 15 '23

I understand the advantage of having a programming language, and how that gives you more flexibility. But at the end of the day, e.g. React is also just Javascript - with a little bit of HTML-like syntax in JSX files. Both React and DML requires adopting a framework and learning its conventions.

For the example of the clock, there is no need for DML - the same could be achieved with plain HTML and Javascript. It's a neat example of how a very simple and general programming language can be really powerful, compared to a large, opinionated framework. And I agree! Plain Javascript should be used more often, and is more powerful than what people give it credit for!

Given some function myClock that returns an element, you could do this in plain Javascript:

<div id="clockspace"></div>
<script>
    const clockspace = document.getElementById("clockspace");
    const c = ["red", "green", "blue", "yellow", "orange"];
    let k=0;
    for (let i = 200; i>30; i*=0.75) {
         clockspace.append(myClock(i, "background-color: "+c[k++]+"; margin: 10px; border-radius: 25%;"));
    }
</script>

It's only slightly more verbose, and leads me to my previous question: is DML mostly about the new syntax? In which case that's cool, but for most of what I do I'd want more granular control than always appending new elements to the document per default.

I think it's absolutely fine and good that you are experimenting and finding different ways of doing things! And your approach definitely works.

I think what I'm reacting to, and trying to suss out now, is based on your claims of better performance than e.g. using classic static pages... it's an interesting experiment, but there's a lot of things DML doesn't consider in its approach.

If you prefer and enjoy it, that's absolutely fine by me!

But it also seems less unique in the space of frontend web technologies to me than how you present it.

Eckehard • Feb 15 '23

Thank you anyway for the in-depth discussion!

Niels Abildgaard • Feb 18 '23

Likewise! I always think it's really cool when people try completely unexpected things. And DML has definitely made me think through a lot of things in order to evaluate it :-)

Eckehard • Mar 19 '23 • Edited

Hy Niels,

looking to you example above, did you recognize that you did exactly the same what my code does?

Every DML-component uses _base.append(... internally. So you could write:

selectBase("clockspace") // select the div named "clockspace" as a base point
myClock(i, ...                    // append elements to the base

This is precisely the same what you did, you just do not need to do it manually.

But the main value of the concept is different:

myClock() creates a complex group of DOM elements attached to a JS object, containing all the nut´s and bolds necessary to show the current time in a beautiful clock. This even contains some CSS, some Javascript and all the dom elements needed. But in fact, it is plain JS, that act´s like a webcomponent. This is the real power, to contain all this in a simple function call.
You can get a dom reference or an object reference from the clock you just created. This allows you to acess this clock from JS, without using ID´s or names. So the clock is far more integrated into your program flow as it was, if you created it as a webcomponent.

Luke LaValva • Feb 14 '23 • Edited

I like the message that you are trying to communicate about web development being fragmented, with three (or more) languages to learn instead of one, but I am not confident that a convergence on JavaScript is the solution.

DML library is intriguing, but it doesn't seem very beginner friendly. The simplicity of HTML is one of the reasons the web is so approachable. I think web frameworks that focus on building on top of HTML like Marko and Svelte have the potential to achieve your goal of unification without taking away the approachability of the web.

Eckehard • Feb 15 '23

React is also not very beginner friendly. After about 2000 pages of documentation I gave up.

DML is not as complicated as it may seem, but it requires some programming skills. If you now how to write code, the learning curve is pretty flat. All DML functions that create HTML elements use just the same names, so h1("text") creates a headline, ul(["This","is","a","list"]) creates a list.

You will need to learn CSS usage, but the style sheets I used have been pretty short compared to what I find on other projects. And the overall number of files included in your project is pretty low. If you check out the DML-homepage, this uses just a small number of tools:

1 CSS file
2 html files, that do not contain any HTML at all
8 js files including DML.js
1 markdown file for every page you can navigate on the site. So, in total there are 8 content files for the whole domain
some images to fill the pages

This is pretty much all you need to compose the page. No framework, no database, no CMS, no extensive tooling. And not much more to learn than some Javascript and CSS.

Luke LaValva • Feb 15 '23 • Edited

I agree with you about the beginner friendliness of React (so much that I wrote a post about it), but even the DML homepage states that it is "easy to learn if you speak 'javascript' and know HTML and CSS already [emphasis added]." That said, for the target audience of people who already know programming it is an excellent tool.