The JavaScript blog.


ui templating apps angularjs

Fltspc, Mustache-Wax

Posted on .


Clint Heyer from the IT University of Copenhagen sent in Fltspc, which is a collaborative whiteboard. If you do group meetings where you want to work on snippets of text in a way that Google Docs doesn't quite cope with, then you might like to try this project out.

It can be extended with JavaScript and a REST API -- there's a GitHub repository with more information at ClintH/fltspc-client, and I also found an Android example.

Clint also shared a project they use to get students started with modern JavaScript development. It's called Kattegat, and it uses Yeoman and Express to get a server running with fun things like Socket.IO and Tessel.

If you're interested in Clint's Android work, then also take a look at Anders Bech Mellson's Kiosker project. This is a generator for Android kiosk applications that displays a single web page, and it's configurable through JSON. It sounds like this is what the students have been using to demo their interactive experiments on tablets.



Mustache-Wax (GitHub: jvitela/mustache-wax, License: MIT) by Jonathan Vitela is an extension for Mustache.js which allows you to use formatters inside expressions, in a style inspired by AngularJS. By defining a list of methods on Mustache.Formatters, you'll be able to pass values through the filters.

The expressions use pipes, and you can chain them like this: ten | add : 3.14159 | add : twenty | add:-3. The expression syntax supports arguments, which are denoted with :.

The documentation is nicely presented, and the project is well-tested.


libraries templating node modules npm windows

Node Roundup: npm 2.0, nvm for Windows, xtpl

Posted on .

npm 2.0

npm 2.0 has been released, and the announcement post has lots of details on the fixes it includes and the project's evolving release process. One major change is run-script now accepts arguments:

In npm@2.0.0, Ben changed npm run-script to allow you to pass arguments into scripts. That's a breaking change. It's as simple as that. Think of npm 2 as a step on the road towards getting npm right with semver. (There will be more. npm 3 will be out before the end of the year.)

The npm blog also has a post about multi-stage installs:

Multi-stage installs will touch and improve all of the actions npm takes relating to dependencies and mutating your node_modules directory. This affects install, uninstall, dedupe, shrinkwrap and, obviously, dependencies (including optionalDependencies, peerDependencies, bundledDependencies and devDependencies).

This post mentions that npm should be getting progress bars soon, and changes that bring it closer to supporting transactional installation.

nvm for Windows

Apparently, most Node version managers for Windows use batch files, so Corey Butler decided to try a different approach:

This version of nvm has no dependency on node. It's written in Go, which is a much more structured approach than hacking around a limited .bat file. It does not rely on having an existing node installation. Plus, should the need arise, Go offers potential for creating a Mac/Linux version on the same code base with a substantially easier migration path than converting a bunch of batch to shell logic.

You can get the source from GitHub at coreybutler / nvm, and he's got binary releases as well.

Corey also sent something called Fenix Web Server (GitHub: coreybutler / fenix, License: GPL), which is a static desktop web server powered by node-webkit:

You can quickly fire up/kill web servers through a GUI or the command line. It has push-button sharing capabilities (localtunnel). There's also a visual webhook receiver for viewing incoming requests, which also leverages localtunnel.

I like the idea of being able to easily create a static server and then share content with a tunnel.


Yiming He sent in xtpl (GitHub: kissyteam / xtpl, License: MIT, npm: xtpl), an Express/Koa wrapper for eXtensible Template Engine. This template language is similar to others like ejs, but also allows you to add your own synchronous or asynchronous commands.

You can actually add commands to the template language, and they can be inline, block, and asynchronous. Here's an example:

XTemplate.addCommand('xInline', function(scope, option, buffer) {  
  buffer = buffer.async(function(newBuffer) {
    setTimeout(function() {
      newBuffer.write(option.params[0] + 1).end();

  return buffer;

The API documentation has more examples, and xtpl's readme has some Koa samples as well.


clojure templating node modules mongodb

Node Roundup: Mongovi, hoquet

Posted on .


I've been working on a project that uses MongoDB, and one of the problems I have is with Mongo's REPL. For one thing, I keep hitting CTRL-C because I expect it to cancel the current line rather than exit the whole REPL, but a bigger problem for me is they've switched to linenoise. I'm used to Vim's shortcuts, which readline can use. When dealing with programs with non-readline REPLs, I often invoke rlwrap (or write an alias to use rlwrap), but when it comes to Mongo a better solution might be Tim Kuijsten's Mongovi.

Mongovi (GitHub: timkuijsten / node-mongovi, License: MIT, npm: mongovi) is a REPL for MongoDB with Vi keys. It uses readline-vim and node-mongodb-native, so it isn't a wrapper around the command-line mongo tool but instead a reimplementation in Node.

Several high-level commands work: show dbs lists databases, use db switches to a different database, and the usual commands like c.collectionName.find, update, and insert work. The author has included Mocha tests, and documentation can be found in the readme.


I had a brief love affair with Clojure. It was a romance that lasted a few months, but work got in the way and we had to break up. However, thanks to Tom Brennan I can relive those days with hoquet (GitHub: tjb1982 / hoquet, License: MIT, npm: hoquet). This is a templating library based on Clojure's Hiccup. It uses a structured language based on arrays for generating HTML:

var http = require('http'),  
    h = require('hoquet');

function layout(c) {  
  var out =
      ['title', c.title],
     ['body', {'ng-app':'MyApp'}, c.body]];

  return out;

var index = layout({  
  title: 'My Page',
  body: ['div', {'ng-view':''},
         ['h1', 'Hello world']],
  head: [['meta', {'name':'description',

http.createServer(function(q,s) {  
  s.writeHead(200, {'Content-Type': 'text/html'});
  s.end( h.doc('html5', index) );

Tom also notes that hoquet can be used in browsers, because the underlying implementation is plain ol' JavaScript:

You create your own functions/literals to pass in whatever you want and call render, which stringifies it. You can also render inner portions at any time and insert them as Strings so you don't have to worry about when render is called.


templating node modules backbone

Bobun, Backbone Eye, Rssi

Posted on .


Bobun (GitHub: neoziro / bobun-ui, License: MIT) by Greg Bergé is a simple UI-focused data-binding library for Backbone.js:

Bobun provides a simple way to bind a model to a view, or a view to model, a view to a view, or even a model to a model. It adds the ability to call set, get, and validate on the view. Bobun a simple way to manage and clean subviews thanks to Backbone.babysitter.

Binding a model looks like this: Bobun.Binding.bind(modelA, modelB, 'symetricAttribute'); -- everything is namespaced under Bobun. There's also Bobun.Binding.bindTo for one-way bindings, and there are also some view-specific features in Bobun.View:

  events: {
    'click': 'domEventTriggerProxy'

Backbone Eye

Backbone Eye (GitHub: dhruvaray / spa-eye, License: Simplified BSD) by Dhruva Ray is a Firebug extension for debugging Backbone applications:

Backbone Eye presents application specific models and views to introspect. Models show only application specific properties and shield away internal Backbone framework details. Search for models having certain attribute values, pin interesting models or use most-used models list to dig deeper.

The project's homepage has screenshots with examples of how it handles models, collections, and views. It has some interesting features for visualising data flows. For example, interaction trails shows a sequence of interactions which have occurred on the selected model as a result of standard Backbone write operations.


Rssi (GitHub: mvasilkov / rssi, License: MIT, Bower: rssi) by Mark Vasilkov is a string interpolation library inspired by Ruby's syntax.

There are many template engines in JS, many unbelievably slow, while others (like doT) are quite fast but use unsafe evaluation: try {{=document.cookie}}. Rssi is 10x faster than Mustache, and 25-30x faster than Underscode and Lo-Dash templates (Rssi does about 1,300,000 ops/sec on my old Mac Mini, with Mustache scoring 130,000 and Lo-Dash about 45,000). Rssi is also marginally slower than doT, the upside being: it's perfectly safe to use, won't access global variables, call functions etc. (in fact, you can use rssi in an untrusted environment, e.g. let users customize their profile page).

If you're looking for something secure without the more abstract features of larger templating libraries, then Rssi might be a good choice. It has unit tests and can be installed from npm or Bower.


jquery templating plugins markup select

jQuery Roundup: 1.10, jquery-markup, zelect

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

jQuery 1.10

A new 1.x branch of jQuery has been released, jQuery 1.10. This builds on the work in the 1.9 line:

It's our goal to keep the 1.x and 2.x lines in sync functionally so that 1.10 and 2.0 are equal, followed by 1.11 and 2.1, then 1.12 and 2.2...

A few of the inclded fixes were things originally planned for 1.9.x, and others are new to this branch. As always the announcement blog post contains links to full details of each change.


jquery-markup (GitHub: rse / jquery-markup, License: MIT) by Ralf S. Engelschall is a markup generator that works with several template engines (including Jade and handlebars). By adding a tag, <markup>, $(selector).markup can be used render templates interpolated with values.

Ralf said this about the plugin:

I wanted to use template languages like Handlebars but instead of having to store each fragment into its own file I still wanted to assemble all fragments together. Even more: I wanted to logically group and nest them to still understood the view markup code as a whole.

The <markup> tag can include a type attribute that is used to determine the templating language -- this means you can use multiple template languages in the same document.


zelect (GitHub: mtkopone / zelect, License: WTFPL) by Mikko Koponen is a <select> component. It's unit tested, and has built-in support for asynchronous pagination.

Unlike Chosen, it doesn't come with any CSS, but that might be a good thing because it keeps the project simple. Mikko has provided an example with suitable CSS that you can use to get started.

If Chosen seems too large or inflexible for your project, then zelect might be a better choice.