4 ms·
How do you mean, "templates for non-programmers"? I see Angular's directives as a pure convenience compared to most every templating engine I've used across la
by g00gler 10y ago
How do you mean, "templates for non-programmers"?
I see Angular's directives as a pure convenience compared to most every templating engine I've used across languages, never considered it something that makes it accessible to non-programmers. I'd actually think someone who only knows html/css would be more thrown off from a page with random, unsanctioned (by W3C), tags and attributes that may or may not reveal what they actually do.
As a programmer I don't want to write long templates, I seriously prefer Jade/Pug for that reason. When I can't use them for a client I typically use them to do all initial work, compile them to HTML, then make whatever minor changes from there.
Consider ng-for:
<div data-ng-for="y in x">
<h1>{{y.title}}</h1>
</div>
The ASP.Net solution is a pain, a function with HTML string template to dynamically add elements to a "runat" div.
This PHP example seems more idiomatic, at least to me, yet takes more to write
<?php foreach($x as $y){ ?>
<h1> <? echo $y->title; ?> </h1>
<? } ?>
The JSP style is kinda similar to Angular, again maybe more idiomatic at first glance but still not as quick/simple to write
<c:forEach items="${x}" var="y">
<h1>${y.title}</h1>
</c:forEach>
The jQuery/plain JS solution, especially before ES6 is not preferable by any means, especially beyond this simple example.
var body = document.getElementsByTagName("body")[0];
[...].map(function(y){
body.innerHTML +=
"<div>"+
"<h1>"+y.title+"</h1>"+
"</div>";
});
Unlike all the other solutions, angular has 2 way data binding so when you programmatically add elements to the array in ng-for, they are added to the DOM without a reload.
So, is the goal of a programmer to simply write more code? If so, then Angular is definitely not for programmers.
Is the goal of a programmer to solve problems? If so, Angular is definitely a tool for programmers.
- michaelcampbell 10y agoUnrelated question: was there a reason you swapped the iterator and container (x and y) in your angular example compared to the others? Just to keep 'x' before 'y'? It confused me a bit.
- g00gler 10y agoNo, I wrote it on my phone and didn't double check the angular example. I noticed another little mistake so I'll edit it
- raboukhalil 10y agoPHP also offers a nice way to write templates without even having to use echo and without braces: <?php foreach($x as $y): ?> <h1><?= $y->title ?></h1> <?php endforeach; ?>
- bluejekyll 10y agoPHP can only be used serverside, no? Can't write single page apps.
- goatlover 10y agoYou can't do SPAs with ajax calls?
- bluejekyll 10y agoHuh? I'm asking how with PHP. You would write a 100% client side app.
- g00gler 10y agoYou can't use JSP to make a SPA, either. I was replying to the statement "Angular is for n00bz"
- combatentropy 10y agoYes, that's what I do. I also think it's fine to use omit trailing semicolons and to use short-open tags (I already labelled the file .php --- why do I have to keep saying "php" all over it? And I'm not usually outputting XML.) <? foreach($x as $y): ?> <h1><?= h($y->title) ?></h1> <? endforeach ?> You just want to make sure to escape all output with htmlspecialchars, or define a shorter function like I did ("h").
- raboukhalil 10y agoI agree!
- justinsaccount 10y ago<h1> <? echo $y->title; ?> </h1> You forgot htmlspecialchars and now you have XSS. Which is why facebook built XHP originally: https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/ https://www.facebook.com/notes/facebook-engineering/xhp-a-ne...
- g00gler 10y agoCould've sanatized the input before saving it to the database :p
- pluma 10y agoJSX: {x.map((y) => ( <div key={y.id}> <h1>{y.title}</h1> </div> ))} Aside from the HTML-like syntax this is vanilla JS. And "y.title" is already auto-sanitized so you don't have the XSS vulnerability as in your jQuery solution. Need to output trusted HTML? <h1 dangerouslySetInnerHTML={{__html: y.titleHtml}} /> Yes, that's intentionally verbose, making you aware that this is a potentially dangerous. But to paraphrase the old saying: make the safe things easy and the unsafe things possible. Angular and friends require context switching. Good luck if you're using non-standard data structures or need slightly more complex filter or iteration logic. And especially in Angular (1 more than 2) you also need to keep in mind the variable scope within the DOM tree and which variables, directives and components you can use where. With JSX it's just JavaScript and the scope is just your local JavaScript scope. Instead of having to remember all the idiosyncracies of the framework's own implementation of a for-loop[0] you just have to know JS. I'm not saying Angular is not for programmers. I'm saying the design goal of Angular1 was to make it easier for non-programmers to write views/templates. It's even in the name: as much fun as controllers, components, directives and two-way bindings may be, the raison d'etre of AngularJS resides between the angle brackets. [0]: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html https://angular.io/docs/ts/latest/api/common/index/NgFor-dir...