I'm currently implementing a ruby/sinatra application using erb as the rendering engine using client-side rendering using handlebars/mustache templates as well. I'm implementing a certain list view in which the list elements will be rendered using the client side solution when javascript is present and fallback to server side when not (targeting crawlers this way). But I'm left with the folliowing issue: I basically have two templates written in two different markups which produce the same html. I'd love to "write once, run everywhere". How are other projects leveraging this issue?
I've used sinatra-mustache with Sinatra, and it works great. I have not used it for both client and server side templating from the same template files, but you should be able to do that as well.
I've found the answer to be using your favorite templating flavor on the server-side but using some other templating engine for the cases where the template is going to be shared on the client side. So, I'm using erb most of the time, the rest of the time using poirot (for Rails). This integrates Mustache templates on action pack, which handles multiple templating engines anyway. Poirot comes ready with helpers to write the templates on the document and also client side rendering libraries. It also integrates handlebars and hogan templates, which are mustache extensions.
As for Sinatra, I try using the same approach using erb and https://github.com/defunkt/mustache , but the nice integration from poirot on rails has to be done by hand.
Related
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 am building a website using nodejs and express. How to make divisions in a page dynamic? Is Jade used for that? if not how to do it?what is angularjs used for? Please help i searched a lot on google and i couldn't get a clarity in the usage of them.
Jade creates the html used in the browser on the server-side. The browser executes a request to the web-server, the web-server executes Jade, which will generate the html that will be sent to the browser. This server-side content generation has been very common in the last ~20 years, but it has quite some cons when building rich internet application. Mostly this has to do with performance and client state tracking.
AngularJS is a client-side MVC/MVVM like framework to build so called Single Page Applications (SPA), which allows you to have the complete user interface flow, all content generation and state tracking to be done at the client side. It even allows you to build offline applications. From the developer point of view this feels much more like building a desktop application where the client knows the state of the user interface. From the user point of the view the website will respond much smoother and snappier because the UI is all generated locally.
Note: SPA does not mean that you can only have one page in your website.
It's a technical term where the browser downloads one page (~/index.html), which contains the complete or partial web application. The user technically never leaves this page, but the content (pages) is dynamically swapped in and out from this placeholder page.
To most common way to provide data to a SPA is via RESTful web services. AngularJS comes with builtin support for REST.
Some developers combine server-side content generation techniques with AngularJS, but there's actually no real need for this.
Jade is used as a template engine on both server-side and client-side. Yes, it can update a page dynamically, you just have to compile your jade templates to a javascript functions (using jade -c or something similar).
Yes, you can use angular.js with it, but I see no real need to use two template engines in your project. Suggesting to just stick with jade, unless you know what are you doing.
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.
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!
I am looking to reuse templates I write for NodeJS in the browser, by this I hope to gain fast page loading time (initial rendering), and dynamic content switching ability, etc...
This would be most natural on Node, any ideas of compatible templating engines?
By the way, I like the HAML style syntax, so anything HAML based is a huge plus.
Thanks!
Roman
Edit:
I think that I like the approach of Mustache the most, it works with Express and also in client side.. will update here on how the implementation went..
Jade is excellent, very similar to HAML and compiles down to JavaScript for browser usage :)
See the README on the Github repo for details.
Jade is also the semi-officially recommended template language for the currently most popular web framework for Node, Express (in fact, they share authors), so it looks like a solid choice to me.
I recently evaluated a lot of NodeJS template libraries and ended up picking Jade.
I've made a simple example of using Jade in the browser. The fun stuff happens in demo.js, and you can also view index.jade which contains the basic page markup.
EJS works in the browser and with express out of the box. Admittedly the syntax is not HANL style nor is particularly feature rich but you can easily get it to work.
I've also used a simple technique to re-use templates and views on both client and server and it works reasonably well
JAVASCRIPT TEMPLATE SHOWDOWN!~
Which is pretty much all the best templates lined up to test in the browser.
(also #Raynos it includes an example of jade in the browser)
Personally I use Jade, combined with stylus and jquery I only use css selectors.
But. . . as you can see from the chart Jade doesn't get along with firefox 3 or opera.
You could try weld https://github.com/hij1nx/weld that has implementation in server side and client side.
node-jqtpl is your best bet. It's a port of jQuery Templates, so 100% reusable in the browser.
There is a command-like utility TplCpl written in Node.js that allows to compile Jade templates for browser use.
https://github.com/jsmarkus/tplcpl