The JavaScript blog.


routing ui libraries

State-Based Routing with abstract-state-router

Posted on .

A few months ago I wrote a custom hash URL router for a React project. We've been trying to plug in a more generalised open source router, but dealing with the state in our particular application has proved problematic. Josh Duff sent in abstract-state-router (GitHub: TehShrike/abstract-state-router, License: WTFPL, npm: abstract-state-router), a general purpose routing library that isn't tied into any specific framework. Josh had been working with Angular, but wanted to use a routing library outside of Angular projects.

This is from Josh's post about the project - Why your webapp needs a state-based router:

I'm a child of the node/npm revolution, and as such I'm pretty framework-averse. I prefer disconnected modules that solve problems that I can compose myself.

I looked for similar libraries, but the only ones I found (react-router and Ember's router) are similarly tied to their chosen rendering/templating tools.

Built with help from ArtskydJ, abstract-state-router is heavily inspired by ui-router, intended to be used with whatever templating library you like. At the time of this writing, renderers have been set up for Ractive.JS, Riot, and virtual-dom - and it's not too difficult to implement new ones with your favorite template/dom manipulation library.

The API uses ideas from ui-router and Express: route names are parsed using ui-router's dot notation, and routes are parsed with a fork of path-to-regexp.

Here's a quick example:

var createStateRouter = require('abstract-state-router');  
var stateRouter = createStateRouter(makeRenderer, rootElement, options);

  name: 'app.tab1',
  data: {},
  route: '/tab_1',
  template: '',
  resolve: function(data, parameters, cb) {
  }, activate: function(context) {
    document.getElementById('tab').innerText = context.content

In this example, the makeRenderer option is a function that returns an object with four properties: render, destroy, getChildElement, and reset. There's an example of this in the test helpers.

Once you've set up a router, you can browse to a specific state with stateRouter.go. The way state change is handling is documented in the readme in detail, but every state change destroys DOM elements that are no longer valid, and then creates the new states.

To my knowledge abstract-state-router is unique because it focuses on state and defining routes, so it's not tied to any specific framework. Josh said he's willing to help people hook it up to specific UI libraries, so if you want to use it but aren't sure how t implement the rendering code then he may help you out!


apps browser routing chat

GitterCLI, Wayfarer

Posted on .


I'm pleased to see that applications made with Blessed are starting to trickle into the DailyJS inbox! GitterCLI (GitHub: RodrigoEspinosa/gitter-cli, License: MIT, npm: gitter-cli) by Rodrigo Espinosa Curbelo is a Gitter client for the terminal. Those of us that are seasoned IRC veterans aren't too fond of web chat clients, and although Gitter has IRC access, GitterCLI could potentially take advantage of Gitter-specific features.

It uses the node-gitter module, and works using the standard HTTP authentication API implemented by Gitter. One thing I noticed was it drops authentication tokens into a "secrets" JSON file, and I couldn't work out if it checks to see if the permissions are safe (i.e., not readable system-wide). So you might want to check the secrets file when running it on a shared server. It stores the authentication token rather than your password, but naturally it still needs some level of protection.

Update: Corrected the GitHub URL.


Wayfarer (GitHub: yoshuawuyts/wayfarer, License: MIT, npm: wayfarer) by Yoshua Wuyts is a client-side router, a bit like react-router. Wayrarer is slightly different because it's a "method-less" router with an EventEmitter-inspired API and supports composition through mounting subrouters.

This is what the super-pretty ES6 syntax looks like:

const wayfarer = require('wayfarer')

const router = wayfarer('/404')

router.on('/', () => console.log('/'))  
router.on('/404', uri => console.log('404 %s not found', uri))  
router.on('/:user', (uri, param) => console.log('user is %s', param.user))

// => 'user is tobi' 

// => '404 /uh/oh not found' 

The combination of Wayfarer's API and fat arrow is very easy to follow, and the API should be easy to use with your other favourite client-side libraries.


jquery ui plugins routing navigation

jQuery Roundup: noty, jquery.tocify.js, Routie

Posted on .

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



noty (GitHub: needim / noty, License: MIT) by Nedim Arabac─▒ is a plugin for displaying notifications. It supports alerts with the usual set of levels, and also allows a prompt to be displayed. A "noty" can be created using a function that accepts an options object:

var noty = noty({ text: 'noty - a jquery notification library!' });  

An existing container can be populated using the familiar jQuery syntax:

$('.custom_container').noty({ text: 'noty - a jquery notification library!' });

Notifications can be queued, allowing a large amount of alerts to be handled sensibly. This plugin also supports themes through CSS or a JavaScript file.


jquery.tocify.js (GitHub: gfranko / jquery.tocify.js, License: MIT) by Greg Franko is a table of contents plugin that works with jQuery UI's ThemeRoller and jQuery's animation effects. It also supports history.pushState, so pressing the back button will work as expected.

Given a suitable container div, running $('#toc').tocify(); will generate a table of contents based on the headers on the page.


Routie (GitHub: jgallen23 / routie, License: MIT) by Greg Allen is a lightweight hash routing library. It's not specifically dependent on jQuery, and the author has packaged it nicely with a makefile and build instructions. Routes can be defined as follows:

routie('users', function() {  
  //this gets called when hash == #users

  'users': function() {
  'about': function() {

It also works with regular expressions to allow parameters to be accessed. Notice how parameters are mapped to the function arguments:

routie('users/:name', function(name) {  

The project includes tests written with Mocha and Chai.


testing routing fullscreen

Page, testr.js, screenfull.js

Posted on .


If I had to place a bet on the most activity by one person on GitHub, I'd bet on TJ Holowaychuk. His latest project is Page.js (GitHub: visionmedia / page.js, npm: page), which is a client-side router. The routing syntax works like Express, so variables are denoted by :name, and the * route can be used to catch 404s. In this case, 404 is open to interpretation.

page('/', index)  
page('/user/:user', show)  
page('/user/:user/edit', edit)  
page('/user/:user/album', album)  
page('/user/:user/album/sort', sort)  
page('\*', notfound)  

It's actually a very lightweight project, based around pushState, but it includes detailed comments and Mocha tests.


testr.js (License: MIT) by Matt Fysh is for unit testing RequireJS modules. Use it with your favourite test framework to test both stubbed and script-loaded dependencies:

testr('path/to/module', stubs);  
testr('path/to/module', useExternal);  
testr('path/to/module', stubs, useExternal);  

The author has written some projects that use testr.js -- asq and after both use it with Jasmine.


screenfull.js (GitHub: sindresorhus / screenfull.js, License: MIT) by Sindre Sorhus is another wrapper around the Fullscreen API. The semantics are similar to the specification, but a lot simpler -- the README has a comparison with "vanilla" JavaScript which is several lines of code. Using screenfull.js, only screenfull.request() is required to trigger fullscreen mode.

The library can do other things as well: a single element can be fullscreened, or events can be used to detect a change to fullscreen mode.


jquery html5 plugins routing effects

jQuery Roundup: 1.6.1, Davis.js, diagonalFade

Posted on .

jQuery 1.6.1 Released

jQuery 1.6.1 was released last week which is
the version with the new .prop() method and changes to
.attr(). I've been talking about this in the Let's Make a
posts covering
element attribute reader implementations.


Davis.js (GitHub: olivernn / davis.js) by olivernn uses
history.pushState to create an Sinatra/Express-like API for
client-side apps:

var app = Davis(function () {
  this.get('/welcome/:name', function (req) {
    alert("Hello " + req.params['name'])


One interesting thing about this library is it has a plugin
which can be used to share routes
between applications. It also has an event API, which includes an
unsupported event for falling back in browsers that don't support pushState.


diagonalFade (GitHub: jonobr1 / diagonalFade, License: Apache 2.0) by Jono Brandel is a diagonal matrix fade effect
for jQuery. It's got quite a few options for configuring the effect:

  time: 100,
  fadeDirection_x: 'left-right', // "left-right" || "right-left"
  fadeDirection_y: 'top-bottom', // "top-bottom" || "bottom-top"
  fade: 'out',                   // "in" || "out"
  complete: null                 // callback function