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

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);
}