Should we use any JS framework which makes HTML as scripting language [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 6 years ago.

Improve this question

After studying HTML 5, I learnt that HTML is purely for defining semantics of data. And it has provided various tag for each purpose. Although we can create our own tags, can provide styling and it will work still we use standard tags because they are known at global level. And all search engines can understand them.

JS frameworks like AngularJS provide the way of creating own directive/tags. Which are non-standard tags.

Moreover, I believe that programming logic should be kept apart from HTML :ng-if, ng-repeat etc. It makes HTML page very difficult to understand by a pure UI designer. I would say these frameworks make a HTML page developer friendly not designer friendly.

If we put all the logic on a HTML page, there would not be any difference between a server side page & a HTML page.

I believe there should not be any non-standard tag and no programming logic (like conditional or looping statements) presents on HTML page. Instead JS should handle/control HTML from outside.

Please tell me if I am incorrect somewhere. Or give me some positives views So I can think about using such frameworks.

Answer 1

Logic is often present in HTML templates on the client side because it makes sense to have it there. The logic contained within is not business logic, but simple conditionals and loops for controlling the output HTML, usually based on the data in question. There are couple of benefits to this.

First, including this logic in the view groups the structure of (part of) the page with logic which may augment it, creating a single point of change for the creation of the HTML output.

Secondly, including logic in the view makes the template generation easier to comprehend, as the generation logic is shown inline with the structure it is inserting elements in to. Take the following for example of structure and logic combined and compare it with the subsequent separated version. I think most developers would find the former much easier to comprehend.

In reference to the OPs point about the templates becoming difficult to understand for a "pure UI designer", I think the syntax of the average templating system is sufficiently English-like and readable that the average designer will be comfortable in at least reading the code and understanding it, if not modifying it. It's certainly more friendly for a designer than having separate code in a turing complete language they would need to maintain to update the templates.

Inline

<div id="myPagePart">
    <table>
        <thead>
            <tr><td>Header</td></tr>
        </thead>
        <tbody>
            {{ foreach item in collection }}
                <tr><td>{{item.name}}</td></tr>
            {{ endforeach}}
        </tbody>
</div>

Separated

<div id="myPagePart">
    <table>
        <thead>
            <tr><td>Header</td></tr>
        </thead>
        <tbody id="tablePart></tbody>
    </table>
</div>

var tableBody = document.getElementById("tablePart");
for(var i = 0; i <= data.length-1; i++){
    var item = data[i];
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    td.innerText = item.name;
    tr.appendChild(td);
    tableBody.appendChild(tr);
}