HTML markup vs programmatic JS

Question

I've been thinking about the consequences of using programmatic JavaScript components versus HTML markup. For example I looked into the Enyo Framework, which has its power in composition. One can build components composed of simpler components, and at the end they may be built from tags, but one doesn't write HTML Markup with it.

I also thought that it would be possible to develop a swing-like UI library which renders itself on an HTML5 canvas. There also would be no need for any markup.

But is there a need for this? Isn't HTML5 capable enough for these goals? I did some brain storming on a webapp similar to draw.io where there would be many Items which need to be resizable and draggable. They would need to be connected, transformed, rotated, etc., and all of that needs to be obvious from varying the borders of items, and other UI clues.

Is it possible to achieve this with HTML5, or since I have to code a lot anyway, would there be any harm to use only Javascript components without HTML markup? What are the trade-offs and what yields more pain?

Answer 1

Frameworks are all about managing the level of abstraction that you work in.

This Fiddle, for example, shows how you can use a few lines of Javascript to create an HTML5 toolbar.

enyo.kind({
    name: "MySample",
    components: [
        {kind: "onyx.Toolbar", content: "Your sample here"}
    ]
});

new MySample({fit:true}).write();

The question becomes, "How much HTML5 and CSS3 would I have to write by hand to accomplish the same thing?"

Like all good software abstractions, frameworks like Enyo allow you to create something once, and then reuse that thing in new applications without having to write it again.

See Also
Enyo Showcase
Enyo Demo