How do people like to generate the ever-changing structure of their web applications these days?
I ask because I was recently considering and trying out AngularJS, since it’s billed as one of the most modern ways to make single-page-as-whole-application web apps. However, I ended up tentatively deciding that it was too messy to use.
The approaches, frameworks, libraries, and tools that come to the top of my mind immediately are these:
[LIST]
[]Generate raw HTML strings with vanilla JS.
[][w]XSLT[/w] (pretty old).
[]AngularJS (JS + mustache-style templating)
[]jQuery (or similar. Library sugar for generating DOM elements.)
[/LIST]
Personally, I particularly don’t like templating systems that don’t stray much from being simple string concatenation. This is especially troublesome in a JS app, because JS doesn’t have multiline string literals. Take this example from the main landing page for AngularJS:
angular.module('components', []).
directive('tabs', function() {
return {
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
};
})
})
Maybe the most obviously annoying thing is the trailing pluses and unhighlighted HTML hidden in string literals. But there are also some handlebar/mustache/whatever brackets that do more concatenation. Then there’s some weird invented syntax for declaring a variable during iteration. And the pseudo-namespace.
Other approaches have different pitfalls, though I can’t list them all.
Anyway, I haven’t found an approach that I’m particularly happy with, and want to know what you favor when building your own stuff.
