JavaScript libraries in no way declining, and the number is growing each day. When it comes to building JavaScript applications, it’s better to rely on templates than on full-scale libraries, because it enables us to have a much cleaner code base, and much better workflow to work with.
I wrote recently that you should try and build your own JavaScript libraries, when it’s time. But, template engines take a little more knowledge and understanding of the language you’re working with, so it’s better to depend on something pre-built, like any of the libraries in this list.
You can find a list of these on Wikipedia, it’s a nice comparison of template engines for a lot of web’s programming languages, but that list isn’t really focused on one particular language, and so I wanted to see how many templates engines I could gather up for JavaScript.
If you’ve been developing with JavaScript, you’ll know a handful of these, but you might also learn about some new ones that had not crossed your path until now. I had a lot of fun putting this list together, so I hope you will enjoy it.
ICanHaz.js
Very simple to use library for doing templating with Mustache.js, another templating engine that we will be looking at shortly. With ICanHaz.js you define your Mustache.js template snippets in script blocks of type=”text/html” and give them an “id” as a title for your snippet (which validates, btw).
Hogan.js
Twitter loves to be a part of the open-source community. You can use Hogan.js as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
Again, includes the same style that Mustache.js does, only delivers everything in a much more quick and efficient manner.
Handlebars.js
Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
mustache.js
It’s no doubt the most popular templating engine in the world right now, and almost every single library listed in this post is somehow related to, or inspired by Mustache. The documentation is very easy to read and understand, and highly recommended to use – works on pretty much every programming language that’s above average popularity level.
Transparency
Transparency is a client-side template engine which binds data to DOM. Write easily understandable, native HTML and everything is plain, good old JavaScript. No need to learn comprehensive templating syntax, it’s all transparent and easy to use.
doT.js
Just something for the Node.js community. doT.js is fast, small and has no dependencies. It was built in order to find the breaking point for speed and flexibility, and it certainly has achieved that feat.
Walrus
In modern web apps, there’s often a good amount of presentation logic involved. This logic doesn’t belong in your application code, your backbone models, or anywhere else but the presentation layer. The templating language is a good place to put this.
It aims to provide the essentials in such a compact manner that speed or templating doesn’t feel like an issue of its own, rather, Walrus is focused on making it easy for the developer to template his web apps.
Chibi.js
Chibi is all about saving bandwidth and time that it takes to present a template, it’s a little tiny JavaScript library that will help you better template your apps, and focus more on things like CSS, instead of using animations.
templayed.js
It’s the smallest templating engine you’ll come across, guaranteed. It’s also Mustache compilant and is very easy to use and understand, the official homepage features a great demo example that you can run and test code with, and on the GitHub page there are benchmarks and unit tests concluded, to show the efficiency of this library.
ECT
Just like templayed, ECT also has a demo setup on its homepage that you can play with and see live results. It’s built for speed, and claims to be the fastest templating engine for JavaScript. (built with CoffeeScript)
It’s compatible with Node.js, and has a very easy to understand syntax.
Pithy.js
An internal DSL for generating HTML in JavaScript. It’s great for small client-side projects, but not recommended to use for HTML heavy webpages.
T.js
T.js is a template engine that uses simple Javascript data structure to represent html/xml data.
Nunjucks
Built by Mozilla, Nunjucks is for those who need fast performance and flexibility that’s offered by the ability to extend the library with custom features and plugins.
Jade
Jade is designed primarily for server side templating in node.js, however it can be used in many other environments. It is only intended to produce XML like documents (HTML, RSS etc.) so don’t use it to create plain text/markdown/CSS/whatever documents.
Dust.js
Dust extends Mustache, and offers high quality performance compared to other solutions you might find in this list. Also includes a very easy to use, clean API.
JavaScript Template Engines
I didn’t try to provide samples, simply because a lot of these have live preview of samples available on their official documentation pages, and I don’t see the point in doing the same thing twice.
I hope that you were able to discover some new alternatives to use for your next project. I’m sure there are more of these out there, though these are the ones that made their presence felt the most.
“Pure” is also a good option: http://beebole.com/pure/
Swig is also a really good one: http://paularmstrong.github.io/swig/
iCanHaz and handlebars on my list for awesomeness :):)
Dust.js is used by PayPal, and default in their Kraken.js framework.
Nice collection, but there are far to many template engines than 15). Another one is http://github.com/atmajs/MaskJS, which has much more features, like bindings and component architecture. And some other could be found here – http://jster.net/category/templating-engines
mark
nice overview! javascript templates played a part of my talk on static pages last week too: https://speakerdeck.com/mulderp/minimum-viable-interactions – did not know how many good options there are actually.