At work someone mentioned a legacy code base used XSLT to transform XML. This caused me to recoil in horror: the fierce restrictions XSTL imposes (variables can't actually very, and they are super-tightly scoped, so sometimes you have jump through hoops and restructure to do the same thing with different inputs) made my developer life miserable for a number of months at a consulting gig.
But another engineer said he liked XSTL; in particular he couldn't think of many template things that allowed step by step debugging.
Thinking of other examples of debuggable templating, I remembered old school JSPs - the first generation, where you would jump back into java for your loops and conditionals and what not:
<div class="holder">
<!-- actually this might have been before CSS being widely used... -->
<% if(someCondition) { %>
<b>IT IS SO TRUE!!!!</b>
<% } %>
</div>
Obviously that's a bit ugly, the mix and match of those code snippets, where the first one kind of leaves the open curly brace hanging...
But one cool aspect is the JSP would be converted into the .java code of a servlet (basically all the html got stuffed into println() statements) and you could inspect it, and I suppose throw a debugger up in there.
Later, you got the JSTL. Here, the concept of "we can build fancy tags and stop having to duck into nasty old Java, so you ended up with code like
<c:if test = "${salary > 2000}">
<p>My salary is: <c:out value = "${salary}"/><p>
</c:if>
There's a kind of engineer would would say this a big improvement. I am not that kind of engineer. Where as that kind of engineer might see it as beautiful to be able to keep everything in the same mode of tags, I saw it as A. another syntax to learn (to use the tags) and B. another complicated API to use (when you wanted to write your own tags.)
Anyway, fast forward a decade, when more and more stuff is moving into the browsers... and you see Angular going down that JSTL path... with slogans like "what html5 would look like if it were designed for making apps" (well, some slogan along those lines.) But it had the same two fisted problem of how every tag you make introduces its own syntax, and then the API to make those new tags was, again, very complicated.
And then React came into ascendency. As always, the whole trick to these things is "how do we mix in our DOM and our logic", and the preferred way with React is JSX, just letting the tags sit there (frankly, with later ECMASscript ` ${coolstyle}` quotes, I don't think JSX is as important as it was at first, but maybe I'm just a heretic. But still, I see a positive similarity in this kind of React and early Servlets - with the exception that React encourages component based thinking, while servlets were page-based, and so each servlet would tend to carry its over head to display the header and wrapping code one way or another.
I guess overall I think it's odd to have one mode, "tags", both for conditional logic and stuff parsed serverside or in js space (as with Angular) and other stuff with visual or semantic meaning that stays in the DOM. I don't mind lerping things as tags quite as much in React, because it is pretty steady where tags are nouns (i.e. DOM objects or things that become DOM objects) and not verbs (loops and conditionals)
