DEV Community

Discussion on: What would the ideal web framework look like?

View post
Collapse
 
efpage profile image
Eckehard •

Could you imagine a web without HTML? A framework that works on the DOM directly could be much smarter than what we see today. The Document Makeup Library (DML) is one first step in this direction.

Collapse
 
siddharthshyniben profile image
Siddharth •

DML sounds interesting, but writing a whole lot of JavaScript would feel weird.

Collapse
 
efpage profile image
Eckehard • • Edited

No, DML is VERY different.

You do not write too much Javascript. As an example, the DML-homepage was set up using only two short HTML-pages. Each page contains about 100 lines of project specific Javascript-code, no HTML, only very few CSS. Behind the scenes you can use some libraries that do the work for you. So, the whole site with numerous pages was created using markdowns, the content is build dynamically after page load. All the routing is done dynamically while the page content is loaded.

Why do I call this a "framework"? Because it contains everything you need to build a web page or a SPA.

There are lot´s of examples on dev.to that show, that sources usually are very short.

This may server as an example:

HTML

<ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

DML

ul(["Coffee","Tea","Milk"]);
Enter fullscreen mode Exit fullscreen mode

But the approach is far more powerful than you can see from this few lines. Instead of building pages "by hand", you let Javascript do the work. Want to create 10000 buttons? Just write a loop to do the work:

for (let i=0; i<10000; i++)
    button("I am button Nr. "+i).onclick = () => alert("This was button Nr. "+i)
Enter fullscreen mode Exit fullscreen mode

Voila! with only two lines

  • you created 10000 buttons
  • you added some individual text *"I am button Nr. ..."
  • you created 10.000 individual event functions that display, which button was pressed

One library and a text editor is really all you need.

You think, 10000 functions may be too much, can we save some memory?

function doAlert(e){ alert(e.srcElement.textContent) }
for (let i=0; i<10000; i++)
   button("I am button Nr. "+i).onclick = doAlert
Enter fullscreen mode Exit fullscreen mode

ok, this was three lines of code, but only one alert function for all buttons.

You will need to learn Javascript, but it is the only tool you will need. This pays back very soon!