The JavaScript blog.


libraries dom react browser

Relae, ClassNameBuilder

Posted on .


Relä (GitHub: joakimbeng/relae, License: MIT, npm: relae) by Joakim Carlstein is a library for fetching data from RESTful servers using React components. It can fetch data from a base URL, but can also filter data.

If you've already injected JSON into the initial page load, then you can bootstrap it with Relae.bootstrap(data).

To use Relä, you need to wrap a React component with Relae.createContainer. This is where you pass the REST API URL and filtering options:

Relae.createContainer(YourComponent, relaeOptions);  

This project is based on React Relay -- you can compare the API from the Relay Newsfeed blog post. The author has planned more features, but has already implemented some cool stuff like caching.


If you find yourself generating lists of class names (often done in React projects), then have you ever wondered if there's a better way to do it? Luke William Westby has a suggestion: ClassNameBuilder (GitHub: lukewestby/class-name-builder, License: MIT, npm: class-name-builder). This library offers a chainable API for manipulating class name strings. It supports conditional expressions and merging instances together:

const classNames = ClassNameBuilder  
  .always('example awesome-example')
  .if(condition, 'condition')
  .if(otherCondition, 'other-condition')
  .else(['not-other-condition', 'array'])

I'd usually do something like this with fragmentary bits of strings and logic. The advantage of this API is encapsulating the treatment of class names to generate more consistent output.


database libraries modules


Posted on .


Mesh (GitHub: mojo-js/mesh.js, License: MIT, npm: mesh) by Craig Condon is a data synchronisation library that caters for server-side and client-side requirements. The author has pitched it as the "underscore of data", meaning it's a highly focused library that you can drop in to existing applications.

It covers both storage and transit. For example, in the browser you could use localStorage, and Socket.IO to broadcast data to other clients. The supported databases are in-memory, localStorage, and MongoDB. If you want to use Mesh with a database that isn't supported, then you can write a new database adapter based on a CRUD API.

The API is based on CRUD operations and Node-like streams. Let's say you want to store data to local storage:

var mesh = require('mesh');  
var storage = require('mesh-local-storage');  
var bus = storage();  

You can now insert data (persisted to local storage) like this:

  name: 'insert',
  collection: 'messages',
  data: { text: 'hello world' }

But what if you wanted to also send data over Socket.IO to a server? All you need is a suitable adapter, and to wire it up with one of Mesh's stream merging methods:

var realtime = require('mesh-socket.io');  
var mergedBus = mesh.parallel(  
  realtime({ channel: 'operations' }, bus)

  name: 'insert',
  collection: 'messages',
  data: { text: 'hello everyone' }

The main motivation behind this library is to make data sources interoperable with one another, so I'd like to see what this looks like with a React application in the client, and a MongoDB-based REST API on the server.


modules events conferences iojs libraries node npm

Node Roundup: 0.12.5, 0.10.39, io.js 2.3.1, NodeDay, Apey Eye

Posted on .

Node 0.12.5, 0.10.39, io.js 2.3.1

Two new releases of Node just came out. Both releases fix OpenSSL security issues, but 0.12.5 also includes updates for uv and npm.

io.js 2.3.1 was also released this week. One of the big changes in this release is performance improvements for require:

module: The number of syscalls made during a require() have been significantly reduced again (see #1801 from v2.2.0 for previous work), which should lead to a performance improvement (Pierre Inglebert) #1920.

This sounds very nice for large projects.



NodeDay is a conference being held in London on 26th June (this Friday), for free! Speakers include Lin Clark, who writes npm's excellent blog posts, and programmers from the BBC, Red Hat, and other companies that are using Node for interesting things.

nodeday is a Node.js conference by the enterprise, for the enterprise. Now in its second year, this one-day industry conference brings together people from companies that have adopted or are planning to adopt Node.js, and focuses on the issues that these companies face. It gives participants a forum to discuss and share their experiences with Node.js, share advice, tips and tricks, and drive forward both the technology and the community.

I apologise for not writing about this sooner, but I only just found out about it! If you have conferences you want me to cover on DailyJS, you can use the contact forms or message me on Twitter (@alex_young).

I really wanted to go to NodeDay but I can't make it this time.

Apey Eye

Filipe Sousa sent in Apey Eye (GitHub: https://github.com/glazedSolutions/apey-eye, License: MIT, npm: apey-eye):

Apey Eye is an Object-Resource Mapping Node.js API framework that uses next-generation JavaScript features that can be used today, like Classes, Decorators and async/await for maximum expressiveness.

This is a framework for building data layers that map directly to REST APIs. It's a bit like ORM for HTTP. It comes with base classes for routing, REST resources, models, and validation, and the models can serialise data to RethinkDB. To talk to other databases a new base model class would have to be written.

Thanks to ES6, the model syntax is very clean:

let Model = ApeyEye.Model;

class MyModel extends Model {  
    constructor() {
        super(async function() { (...) });

    static async fetch() { (...) }
    static async fetchOne() { (...) }
    async put() { (...) }
    async patch() { (...) }
    async delete() { (...) }

To me this looks like C# without the extra syntax for strong typing. The validation API looks similar to what you might have seen before with modules like Mongoose.

I like the idea of object-resource mapping at the HTTP level. In Node web apps we seem to spend a lot of time thinking about HTTP servers and APIs, so this feels like it could reduce the amount of boilerplate required to interface from that step to the database layer.


node command-line servers libraries

Add a CLI to Node Apps with Vantage

Posted on .

Vantage (GitHub: dthree/vantage, License: MIT, npm: vantage) by David Caccavella is a very nicely packaged module for adding command-line interfaces to your Node applications. It provides two components: a server, and a command-line tool that you use to connect to your live app. Rather than connecting to a TCP port with something like telnet, you actually type vantage in the command-line.

To hook it up to your application, you'll need to add a Vantage server. First, install Vantage to your project (npm install --save vantage), then instantiate a Vantage object and hook up the functionality that you want:

var Vantage = require('vantage');  
var server = new Vantage();

  .description('Outputs "bar".')
  .action(function(args, cb) {
    // Do anything: check the database, run migrations, show useful stats


I'd put this in a separate file to your main Express/Koa/Hapi/etc. app server, then add Vantage actions for the desired functionality. You could add things like database queries, or heartbeat/usage info, and so on.

Once you've added Vantage to your web app, if you install it globally you'll be able to just type vantage ip:port to connect to your server. Typing help will display the built-in commands and any actions that you've added. You should see something like this for the previous example:

webapp~$ help


    help [command]    Provides help for a given command.
    exit [options]    Exists instance of Vantage.
    vantage [server]  Connects to another application running vantage.
    foo               Outputs "bar".

In addition to basic commands and subcommands, Vantage uses inquirer for prompts. Inquirer's prompts are quite powerful: they're ideal for things like yes/no questions and checkboxes. You could use it to force a "yes/no" prompt before a irreversible operation.

Vantage has a few other nice features that'll make your backdoor feel more professional: you can add a banner when people sign in (perhaps with legal warnings, or help), it supports a "firewall" for limiting access, and the documentation has details for using Vantage with Express, Koa, and TLS/SSL.

On the subject of backdoors: Vantage doesn't currently support authentication. It may be possible to use it as a limited informational interface to your server, but I'd strongly recommend binding to internal interfaces only. That means you'd have to ssh to a server, and then run vantage remotely. If that's not possible or convenient, then at least set up TLS/SSL. The current idea for authentication is to support it through middleware -- it already supports middleware so actions can be made reusable, so it seems like a sensible approach.

Authentication issues aside, it definitely seems like something worth using for development servers: I know many people who would love to see their Node web apps get the kind of consoles that popular web frameworks offer (Django's manage.py shell and Rails' console are two that spring to mind). Check it out, but try local/development mode first!


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!