Using Node.js and express in a MEAN environment, I am looking for a simple and straightforward template engine, meeting these requirements:
does not dictate me to only use its own weird syntax but allows me to keep writing webpages using pure/plain html and js
supports conditional includes
works with express
operates on server-side (Node.js/Express)
executes freakin' fast ;)
Basically I just want to slice my webpage into several modules (e. g. header, footer, ...) and include those now and then based on simple conditions. I don't want to entirely (re-)rebuild all webpages using a proprietary template language but rather prepare a few html modules that I concatenate at runtime (comparable to PHP where I just use the include instruction to paste prepared html code).
I had a look at http://garann.github.io/template-chooser/ and https://github.com/nodejs/node-v0.x-archive/wiki/modules#templating but the sites seem outdated and according to them, there ain't no template engine available fully meeting my requirements!?
Suggestions anyone?
I think ejs is more natural for what you are looking for https://scotch.io/tutorials/use-ejs-to-template-your-node-application, but jade can work also. The example in the link uses partials, which you dont need to use if ur just rendering a single page
Related
In the frontend, React uses JSX to render the HTML of its components.
Is JSX (or similar) functionality available in a NodeJS backend, specifically to render (conditional) XML?
Currently we use template literals to build our XML, but in comparison to JSX our team agrees that this is a suboptimal way of building markup. Hence we are looking for a different solution.
JSX is a syntax extension for JavaScript and produces React elements, so I would say no. You are right that template literals are probably not the way to go either. We often use some kind of xml builders to make generating XML easier. Even if you were able to use JSX for this, I'd take a guess that it would have tons of overhead for no reason. Better to choose the right tool for the job.
If you really want to try to do it with JSX though, there's this: https://www.npmjs.com/package/jsx-xml
I'm looking for something like gulp-html-replace but instead of replacing what's in between the
Will be useful for modifying html documents.
I think you're asking the wrong question. If you have a consistent part (content) present in multiple html documents, you should be using a server side language to generate the html pages. That way you can create partials and modularize them to be included in multiple pages so when you change it once the change can be reflected.
If this is somehow not an option (for whatever reason) you should consider looking at something like handlebars
Also if the content is fairly static, most modern editors will allow you to search / replace in multiple files, there should be no reason to use gulp for what you are describing.
That being said try gulp-inject
From Cash Costello's Elgg 1.8 Social Networking page 287 under What template engine is used? he says, 'Elgg uses PHP as its template engine.'
What exactly is meant by a Template Engine?
Full extract:
What template engine is used?
Elgg uses PHP as its template engine. This results in a flexible view system since the full power of PHP is available. Developers also do not have to learn a new template language to use Elgg as they would with an engine like Smarty. On the downside, an expressive template language such as PHP is a temptation to mix controller code into the views.
A template (in this context) is an HTML file whose contents are dynamically filled in to produce the final page you're seeing. There are myriads of ways how this "dynamic filling in" can happen, from specialised XML transformation syntaxes to DOM manipulators. "PHP as a template engine" just means that they're using PHP as it was designed: embedded PHP snippets inside of HTML.
If you only know PHP, it may seem strange to you that this needs specific mention. Other languages are not designed to be embeddable inside other languages, so templating is a bit more of a complex task and usually calls for special "templating engines". Such things are becoming more popular in PHP as well though, mostly because their syntax can be simpler and more manageable and they enforce separation of concerns better.
For example, compare to Twig.
I come from a PHP background and I've used frameworks such as CakePHP and Laravel and it is quite easy to work with layouts and views in all of them.
And the possibility of using PHP inside those template engines provide a way to do things such as:
<?php for($i=0; $i<1000; $i++){ ?>
<td>demo</td>
<? } ?>
Now, starting with Node and express.js I found out template engines seems quite basic here. I've tried hjs, hogan, swig, mustache, handlebars... none of them offers both :
Layout support (templates and views)
A way to do loops like the one I named before.
Am I missing something? Am I asking for too much?
Which one would you recommend me?
A lot of the template engines for Javascript take the philosophical view that it's better to enforce a fairly strict separation between logic and presentation, meaning that the complexity of code/logic allowed in the template is deliberately limited. For a quick overview of this topic, see http://blog.startifact.com/posts/older/the-new-hot-thing-in-web-development-client-side-templating-languages.html (it's about client-side templating, but since it's Javascript, a lot of those same template languages are the ones popular in node.js / Express). This idea of logicless templates exists in the PHP world as well, it's just not as common.
For a more academic treatment of this subject, see this paper: http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf. (The author is also the author of a popular template engine for Java called StringTemplate.) The author makes a lot of good points, and in general I agree with the idea of logicless templates, but there are times when it can be inconvenient and I find myself more on the fence about it...see this link for some further considerations. Obviously there are also those who want to be able to anything from a template (as you can in PHP) and believe it's fine to rely on the self-restraint of the programmer not to put too much code in the view, which is where template engines like EJS come in.
Having said all that, it's important to note that what you want to achieve is possible in Handlebars (which is one of the "logicless" languages) and probably many of the others you tried as well. To do it in Handlebars, you'd need to create a custom helper. This might be what you're looking for:
https://www.npmjs.org/package/handlebars-helper-repeat
Example usage:
{{#repeat 10}}
{{> button }}
{{/repeat}}
You could also extend it to be able to support arguments to be able to control the starting number or increment, although that would probably be getting into logic that might be better done in the JS code (according to the Handlebars philosophy) while preparing the data for the template.
With regard to layouts, the closest thing in Handlebars (which is the template engine I'm most familiar with) is partials. This link provides a good introduction to those: http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers.
Personally I'm a big fan of the template language in an awesome framework (built on Express) called Derby. Its template language is similar to Handlebars, but comes with a couple of handy extensions - just enough to make it a bit more convenient to use without allowing too much logic to creep into the template. Unfortunately I don't think there's a standalone version of it (i.e. you have to use the full Derby framework), but you could create custom helpers in Handlebars to achieve a similar effect.
I wonder what would be the best way to implement multiple versions / languages of the same content in the same layout in express.
Should I just do this?
app.get("/", function(req, res) {
res.render(language + "/index");
});
Or is there a smarter / better way?
I would suggest to keep only one template, as if you use one template per language it will get out of hand very quickly, let alone duplicate much content (and the small amount of "logic" you would put in a template too). Many applications use a tool called gettext to do the internationalization thing. There is a node.js library for it at https://github.com/DanielBaulig/node-gettext
Alternatively there is also i18n-node. It appears to have a bit more integration with express js.
The i18n-node is the simplest and greatest module that you should use. You can use directly in Javascript code or with Jade/Handlebar templates with express js.
Why should you use i18n?
Auto detection of locale from the browser by header, cookie or query parameter depending on your setup.
It comes with examples as well.
It automatically generates a en.json by default inside ./locales/. This acts as a master file for you to start building new translations.
Supports Singular and plural forms
Support for parameters: __('Hello %s', 'Marcus') returns Hallo Marcus
i thought that we can define json objects in lang folder like , en.js , fr.js and this json files contains key value pairs than render to template according to user's language setting , lang settings can be into database.
And we can save this fr.js or anything else into res.locals for calling every template .
Is this suitable?