/    Sign up×
Community /Pin to ProfileBookmark

The advantage of a JavaScript templating engine

Hello,

I’m building a single page webapplication. The data is sending back and forward with AJAX and JSON. I’m considering to use a templating engine like mustache.js or John Resig micro templating engine, … but what is the advantage of a templating engine? As far as I understand … it only changes variables in other variables and add more complexibility and syntax to your code?

Why not use the following syntax?

[CODE]
// lang = language object
GLOBAL.accountTemplate = function(data, lang) {
return ‘<h1>Welcome, ‘ + data.username + ‘</h1>’;
}
$.ajax(‘/account.php’, {‘username’:username, ‘password’:password}, function(data) {
var template = GLOBAL.accountTemplate(data, lang)
$(‘body’).append(template);
},’json’);[/CODE]

I find this much easier than the indistinct syntax of mustache.js

What am I missing here?

Thanks for any help!!!

Christophe

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@rnd_meMar 01.2012 — go with what comes easy to you. there's a lot of way to do things in javascript, and what you crown "the best" can vary on lots of factors from performance, maintenance, scalability, RAD, etc.

Having coded js web apps for 5 years now (yikes), i can offer that (to me) templates are easier to maintain, more re-usable, and behave more robustly than string building.

maintain:

Templates are good for teams because you can embed the template in the served page's HTML. Then designers can style around known markup, non-coders can adjust the HTML, and you don't have to worry about the normal string escaping that muddies HTML stored in javascript. If you've ever has to use js to store html that had attrib with quotes (*cough flash embeds *cough), the no escaping part alone of templates makes it worthwhile.

re-usable:

Consider that string-building marries the view and data (html and json) in javascript. If you want to translate your templates into french, you can do that to the html templates, but it could break the syntax of javascript (document.write > document.&#233;crire). Often I need to generate the template from data that is difficult to get to from js, like from a CMS that itself uses page templates. HTML is a universal output that all CMSs can spit out. By altering the HTML output in the CMS, i can re-work the template output without getting my hands dirty in JS, or having to scrape HTML in JS.


robust:

If your data object is missing a branch, obj.missing.branch will thrown an exception whereas "hello {{missing.branch}}" would typically return "hello ", or perhaps "hello (ERROR: <i>missing.branch</i> is undefined)" if you were debugging. on systems without consoles, visual error output can be a lifesaver, and it's not included functionality with string building.


i guess another reason is that it's just simpler and quicker to build tempaltes than string-building code. we could skip html and just serve js that sets document.title, then appendChild(document.createElement(tag))'d every tag in an html document manually. but folks like using .htm files better for some reason. think about why.
Copy linkTweet thisAlerts:
@Christophe27authorMar 02.2012 — Hi,

Thank you for this good answer. I think I'm going for a templating engine, more specifically: http://handlebarsjs.com/

Grtz!

Christophe
Copy linkTweet thisAlerts:
@chrisranjanaMar 02.2012 — Just out of curiosity how would these js templating engines compare with frameworks like jQuery particularly in terms of RAD ?
×

Success!

Help @Christophe27 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...