For loops and layout support in express.js template engine - node.js

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.

Related

Node.js & Express: template engine for plain html code

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

What exactly is meant by a Template Engine in computing?

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.

Can angular-ui-grid be used with angular material design?

The title pretty much says it all: Can angular ui-grid be used with angular material design in a way that follows the material design principles?
It can, but only at a look and feel level. Basically most of the visual elements in ui-grid are over-rideable with templates (cellTemplate, rowTemplate etc). You can also override a lot of the css. So if you're prepared to work through it there's no reason why most of it cannot be tailored.
Be aware that the customize style option on the ui-grid site does not give you the ability to change most of the classes that you will eventually need to in order to make it conform to the material design spec. Additionally it lacks responsive features or the ability to create the kinds of animations/transitions that are a signature of material design.
I really like both projects, its just hard to try and build an app on two frameworks that are currently under active development. I am using ui-grid in my Angular-Material app, but I don't think I would if I had to do it over again

Jade to Dust Parser?

I recently wrote using Jade Template for NodeJS. When talking with my manager.. I found that we use Dust within company. Thus I was required to switch over to dust.
While following the DRY principle.. I don't want to do this manually.
Is there good translator/parser to parse existing Jade template to Dust? I searched online but didn't found.
Additionally, if there's no such template, what about I go and implement one myself? I took compiler course before and thinking this would probably be not-to-hard to implement. But I never tried... and don't really understand the Dust template yet. how do you think of the difficulty of doing one parser myself?

Sass+Compass+Susy in Divshot

I'm looking for adequate tool to help with responsive design and, so far, Divshot looks as the best one.
Considering that I plan to use Sass+Compass with Susy grid, I wonder if it's possible to use it in Divshot?
As far as I can see, only {Bootstrap, Foundation, Ratchet} are supported, but I'm asking seeing the following quote:
Here at Divshot we’re huge fans of Sass, a powerful CSS3 preprocessor with attitude. To quickly build our new landing page I took advantage of some nifty mixins I collected from around the web in addition to the myriad of mixins available in Compass.
in this post?
At the moment Divshot supports Compass but not Susy. You can include Compass in your custom stylesheet like you normally would:
#import "compass"
Your CSS is sent over to Alloy, our web API for CSS preprocessors. You can take a look at the gems we're using here: https://github.com/divshot/alloy/blob/master/Gemfile. We'll consider adding Susy in the near future!

Resources