currently i am playing around with NodeJS (+ ExpressJS) and BackboneJS.
The Backbone pages told me (including the Todo Example) that it's better to use a template engine such as EJS or MustacheJS. But i am already using Jade which comes with ExpressJS.
Are Front-End (e.g. Mustache) and Back-End (e.g. Jade) template engines completely different or is it possible to use one for both ?
Or did I not understand something right?
You can use the same template engine for both frontend and backend (we are using it in a project for both sides). Also with care, its easy to switch some forms across as well. To compile jade to client, see
https://github.com/visionmedia/jade#browser-support
very easily this could be incorporated as grunt task, i have put the code in
https://gist.github.com/2877717
Jade works on the front and back-end. You still need to create client-side and server-side templates though.
Generally, if you are already are already using Node.js and Express.js, there is little need to do front-end templating, since you can already control everything server-side. Mixing both is usually unnecessary and very tricky.
As an aside, I would recommend using EJS for back-end templating.
EDIT: Apologies, I think I skirted the complexity of the question a bit. Yes, you can definitely use both, and in the cases of large complex data sets you definitely should use at least a front-end templating engine like Mustache. If you are just getting started with ExpressJS, it's best to stick with just a back-end templating engine like Jade or EJS until you are more comfortable with how back-end templating works—then move to using both if you see it fit.
Thanks to Pickels for calling me out on that!
Related
I did a course on full-stack on web and afterwards I applied for internship.
In the internship the interviewer asked me a question related to templating engine in NodeJS and the terms sounded totally alien to me.
So I came home and was only able to figure out npm modules like moustache..
So can someone explain me what is templating/template engine in NodeJS.
Templating Engines are to split code for example you got a web application you can split the footer, header, body, layout and more to use it on other pages.
You can also use the templating engines to connect them to your modules and functions for example:
You can have a button in ejs or pug and if you click it you can run an acction from your app.js. I personally use templating engines with combination of frameworks like express.js.
In the next interview you can say:
Templating engines in nodejs can be used to split the nodejs application code from the frontend layout and the frontend elements can be used dynamically with the node application for example if you click a button it can run a action from your node app.js. This can be used for any type of application and it can have user input interactions like a form field that the user can fill up and that the input gets saved to a database like MongoDB. With the templating engine, you can have the frontend interact with the nodejs application.
Templating engines are also used to split elements into multiple components like:
footer, header, head, layout and more. So you don't need to rewrite those elements for other pages and that way your application can scale easily.
Templating engines are mostly used in combination with nodejs frameworks like express.js for example.
I can also recommend you this tutorial it's a good explanation of templating in nodejs using ejs and express.js. They are way more templating engines but ejs is widely used and very popular so I would recommend learning this first.
In Nodejs the most used templating engines are pug and ejs
Please let me know if you got question and I really hope I could help you.
greetings,
Karim
Simply said 'Templating' engine is an engine that can manipulate your HTML code from the server side using the server side code you use. By it's very authentic built in syntaxes you can loop, change content dynamically, alert messages to user and etc.
there are tons of templating engines out there
Laravel - blade templating engine
ASP.NET - Razor blade templating engine
Node.js - handlebars, Pug and few others
i am beginner in java script and familiar with client developing in low level.
my question is this that what main diff between jade template engine and mustache template?
both of them is for nodejs server side or use in client side?
what advantage of each in their scope ?
if i want to write small single page app in MEAN stack structure in this case choose of which template syntax is best ? html 5? jade? mustache?
Personally, I like to use Jade especially for the NodeJS apps on the backend side given it integrates well with Node.js and provides a light syntax.
and I use MustacheJS for when I want to use templating within html.
Here is more information on Jade and MustacheJS.
https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/
http://jster.net/blog/templating-javascript-mustache-jade-transparency#.V0mrXZN96Rs
http://vschart.com/compare/mustache-template-language/vs/jade-template-engin
I'm writing some example code using node and express, that is targeted at beginner to intermediate front end developers (not node.js or express developers). Basically some plug and play code that allows a beginner dev to get right to the HTML, CSS and behavioral JavaScript, and host it on a simple hosting solution like Heroku.
I need a recommendation for a an express compatible templating language that is very light and simple to understand.
I need:
Variables embedded in the template.
Loops and if statements embedded in the template.
I want to avoid:
Unusual syntax (Jade).
Files that are not named .html (like
mustache).
Unusual looking configuration (for example to force mustache to use .html as an extension).
I need something really basic. Should I role my own, or is there a lightweight, well support third party solution I should be aware of?
I would check out EJS. It is pretty decent and fairly easy to use. It is also compatible with Angular. I go back and forth using EJS and Dust.
EJS is very forgiving and easy to get started.
Express JS uses templates for generating HTML and then server sends them to client in response. There may be several other templates from which HTML can be generated. The ones I was able to discover are:
Jade (http://jade-lang.com/)
EJS (http://embeddedjs.com/)
In my app, I need to use both ExpressJS and AngularJs. I am new to both technologies. While learning angular, I had to use it in pure HTML. After learning ExpressJs, I realized, in order to use angularjs, I need to use them in any of the above templates which will be converted to HTML while sending to client.
Now, I want to use expressjs as my server and angularjs as my client side app. For this, I think I have two options.
Option 1
I can stop using templates altogether and use our NodeJS server to respond by sending simple HTML files. These HTML files will then contain AngularJS coding within them. AngularJS then, on client side, will act as our application. It will demand other HTML documents from the server. Or it can also be used like AJAX, where we can only request the piece of information to update just part of the page rather refreshing the whole page for a minor change.
Option 2
I can use angularjs inside expressjs templates (jade or ejs).
Kindly, help me in understanding the pros and cons of both options. Which one will be your choice in such case.
This is very much an opinion question and Stack Overflow admins hate anything that smacks of opinion, but here's my experience and opinion nevertheless.
I've done a couple of apps now using purely static files (HTML, CSS, and JavaScript) with those calling a service on the back-end to deliver the data. It reduces the back-end, whatever it is (I've used both Java and Node.js), to just being a set of service URLs but it works very very well.
You've got a fantastic hard line between the responsibilities of the
two systems
It's very easy to work on and test each one independently
Bugs are usually very clearly in the front-end or the back-end (all
you have to do is look at the data transferred to know)
The back-end services are ready to be reused to support alternative UIs from the
command line or something mobile specific if you want
You can use one technology for the back-end to start with (say Node.js or Ruby on Rails) and then switch to something else later if you need to. As long as the API stays the same the front-end never knows.
I personally use AngularJS with Express/Jade. The setup is actually pretty simple and I find writing Jade much more enjoyable than writing HTML. I've also adopted writing my Angular code in CoffeeScript as, again, it makes for quicker development. If you are looking to save keystrokes then Jade is a great solution and its integration with Express makes it a no brainer. If you aren't worried about producing code more quickly then there is absolutely no problem with using HTML.
I will point out that one of the greatest benefits I have found to using Jade over HTML is the ability to develop a single page in multiple files, then use include to have them concated before compiling into HTML. This allows you to take larger pages and break them into more manageable chunks. Together with Angular's templating, this can relieve much frustration.
Really it is all a matter of opinion, but since I decided to give Jade a shot, I have not regretted it and I have never ran into a situation where my HTML was rendered incorrectly when using Angular.
I went with option 1 because I didn't want to deal with any potential issues with jade or ejs converting the template incorrectly and interfering with Angular. My app essentially has the index page (which is really just the basic page template with my css and js includes) come out of Express as jade and then angular takes it come there and all my angular templates are in a separate location than my jade template.
I'm new into Node.js and trying to learn. From what I have understood it's common to use a template engine (eg. Jade), even for CSS (eg. Stylus). To be honest, all the tutorials I have seen out there involve a template engine when it comes to the layout.
The thing is that I don't want to use a template engine because I think it's unnecessarily complex.
Here is a link to a boilerplate for Node (unfortunately it doesn't work by some reason), but Option 1 shouldn't be using any template engine for the layout.
So, what is the easiest way to combine Node.js and Mongodb with "normal" HTML(5)? Is it possible for example to use HMTL5 Boilerplate with Node?
If you are using static html, so you wont need templating on the server side.
You can easily serve your html files with Express/Connect static middleware, for example:
app.use(express.static(__dirname + '/public'));
then put an index.html to your public folder.
Also I think you can copy and paste the whole h5bp to your public folder and it should work.
Here are my thoughts on this.
If you are serving only static html, it's obvious that you don't need any template engine, since you can just buffer the html in the response, or use the Connect static middleware.
However things get interesting when you have to deal with dynamic content.
This is where template engines are good at, since they provide ways to integrate your data with the html. If you are going to replace the template engine, you need a library that can do HTML and DOM manipulation. I can think of two alternatives:
jsdom , and libraries that are build on it (such as fill.js).
With jsdom you can use server-side jQuery to build your views, or even YUI.
However it has some drawbacks:
it's slow and cumbersome
it's a pain to install on Windows since it depends on native modules
i couldn't get it to parse html fragments or incomplete html (maybe someone knows a way around this)
The second alternative would be to use some lightweight libraries that handle html, without the full DOM. So far I've found two libs that are good at this:
cheerio - a small library that relies on jQuery -like selectors
plates - a library that binds data to markup
Both are very neat in my opinion, and a good starting point in getting rid of templates :)
There may be others that I'm not aware of, but you get the idea.
Using express, you would just send the html5 in the response:
app.get('/', function(req, res){
res.send('<header>Hello World</header>');
});
However, I would say that in most cases a templating engine doesn't add complexity. The separation of concerns makes things simpler if you are rendering dynamic content.
First time answering my own question. I just want to share that I found a converter from html to jade (template engine). This is definitely a good thing that's removing a lot of complexity at least for me, even if it still involves a template engine.
http://html2jade.aaron-powell.com/