Material Design's Delightful Details with SVG Morpheus

27 Nov 2014 | By Alex Young | Comments | Tags animation svg libraries


SVG Morpheus (GitHub: alexk111/SVG-Morpheus, License: MIT, Bower: svg-morpheus) by Alex Kaul is a library for morphing between SVG icons. It implements the delightful details transition, as described by Google’s material design documentation:

The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details.

You might have noticed this in Android recently: the first-party Android apps now have a nice transition for the back icon. This is visible in the Play Store app, for example.

Alex’s library allows you to do this with SVG icons, so you can employ the same effects in your web apps. All you need to do is add an SVG icon set to a document, then instantiate SVGMorpheus:

var myIcons = new SVGMorpheus('#myIconSet', options, callback);'icon1');

The options include easing and duration, so you get some control over the transition.

The project’s documentation has more details on the API and the expected markup structure.

PowerArray, Atomus

26 Nov 2014 | By Alex Young | Comments | Tags array testing libraries modules


PowerArray (GitHub: techfort/PowerArray, License: BSD) by Joe Minichino is a small library that attempts to replace native Array methods with faster ones. You can use PowerArray.prototype.forEach to iterate over values using a simple for loop, which is known to be faster than Array.prototype.forEach. However, it also includes PowerArray.prototype.binarySearch which performs a binary search on the array.

Thanks to Oliver Caldwell’s post for a quick version of the algorithm. Also note the contribution of Yehonatan and other authors of comments to the post which helped to optimise the implementation of binary search further.

Oliver wrote this about the binary search algorithm:

A binary search searches by splitting your array into smaller and smaller chunks until it finds your desired value. Unlike the normal indexOf which searches from left to right in a simple iteration. The binary search Wikipedia article explains it best (as always). There are a couple of downsides; It will be slower with smaller data sets (this needs proving) and the array you are searching needs to be sorted.

To use the binary search you’ll need to sort the array first, and there’s PowerArray.prototype.numericSort which just uses Array.prototype.sort with return < ? -1 : 1.

The project includes some benchmarks so you can try it out for yourself.


Everytime I use a Node/DOM testing library my tests seem to suffer from bitrot and stop working after a few months. So I was glad to see a new one by Krasimir Tsonev called Atomus (GitHub: krasimir/atomus, License: MIT, npm: atomus). It’s based on jsdom, so you get a window object and browser instance that lets you trigger events like clicked and blurred.

The following snippet is taken from the bundled AngularJS test:

var b = atomus()
.html('<html><body><div ng-controller="Controller"><register-form></register-form></div></body></html>')
.external(__dirname + '/data/angular.js')
.external(__dirname + '/data/angular.register-form.js')
.ready(function(errors, window) {
  if (errors !== null) console.log(errors);

  var Controller = function($scope) {
    var runTests = function() {

      var register = b.$('#register-button');
      var message = b.$('#message');
      var username = b.$('#username');
      var password = b.$('#password');


      assert.equal(message.text(), 'Missing username.');

The b.clicked(register) line causes the #register-button element to be clicked, and then there are some standard Node assert calls to ensure the document was updated as expected.

I’ve used other libraries like this, including Zombie.js. They all work in a slightly different way – Zombie.js also uses jsdom but some use PhantomJS or drive browsers with Selenium. It’s worth trying a few out to see what works for your project.

Paperclip.js, bem-react

25 Nov 2014 | By Alex Young | Comments | Tags templates reactive react


Paperclip (GitHub: mojo-js/paperclip.js, License: MIT, npm: paperclip) by Craig Condon is a template engine that’s a bit like React, except it translates HTML templates into JavaScript document fragments rather than using a virtual DOM. The template is then cloned when it’s used, and requestAnimationFrame is used to prevent unnecessary DOM operations.

Craig provided some examples so you can see how it compares to other projects:

Paperclip has been used for two years in production at ClassDojo, so it sounds battle tested. It has unit tests that run in browsers and Node, and you can also use the module itself in Node.


bem-react (GitHub: dfilatov/bem-react, License: MIT, Bower: bem-react, npm: bem-react) is a module for React that provides features to support the BEM methodology which was developed by Yandex.

BEM is a methodology of web projects development, that allows you to divide an interface into logically independent blocks. At the same time BEM contains specific tools for the typical web developers’ tasks automatization. And finally BEM gives us opportunity to create libraries of web-components for fast and efficient web-development.

With this module, you can use “bemjson” in templates instead of jsx or JavaScript, and manipulate CSS classes based on BEM.

I noticed there’s a demo app in bem-react/example that highlights the bemjson special fields, component use, and component composition.

Define.js, Combokeys

24 Nov 2014 | By Alex Young | Comments | Tags amd modules keyboard


DefineJS (GitHub: fixjs/define.js, License: MIT, npm: definejs) by Mehran Hatami is a new module loader. It implements the AMD pattern and also supports Promised Modules, and other new nonstandard related module techniques.

You can specify the module’s global name by including a global attribute on the script tag:

<script global="definejs" src="define.js"></script>

Now you can declare a module with definejs.define() and load dependencies with definejs.require. Promised modules are implemented by returning new Promise when declaring a dependency.

The author has included tests written with the Karma test runner, so you can run the tests against a real browser.


Shahar Or sent in a keyboard shortcut library called Combokeys (GitHub: mightyiam/combokeys, License: Apache 2.0), a fork of the popular Mousetrap project.

It has some cool changes: it’s been refactored to use CommonJS, and it doesn’t automatically listen on document. You can now specify which element it listens on for keyboard shortcuts. That was actually one thing that prevented me from using Mousetrap in a project.

txtjs, Useuses

21 Nov 2014 | By Alex Young | Comments | Tags text typesetting


Ted Patrick sent in txtjs (GitHub: diverted247/txtjs, License: BSD), a typesetting engine. It provides font and glyph rendering that is indepenent of the OS and browser by using SVGPath on a canvas element.

The documentation has lots of examples so you can see how it handles things like character styling with multiple fonts and alignment. The project comes with a warning that says txtjs should be used for “creative applications” where the layout requirements exceed the capabilities of the DOM. I imagine it could be useful in a scenario where tight control is required for graphic design projects.

txtjs is part of CreateJS, an open source set of libraries including EaselJS and TweenJS.


Useuses (GitHub: SpoonX/useuses, License: BSD-2-Clause, npm: useuses) by Wesley Overdijk is a library for handling “soft” dependencies. Given a JavaScript file, you can express the dependencies with @uses ./my-dependency.js in a comment.

Once you’ve defined dependencies you can create builds with the command-line tool, like this:

useuses -i example/main.js -o example/dist/built.js -w

There’s also a Node API, so you could hook it into a Grunt or Gulp. Wesley had created an earlier version that was for Grunt, but this is a rewritten, more generic version. He’s written a blog post about JavaScript dependency management that describes the module in more details.

Parrot, Flush Timeouts

20 Nov 2014 | By Alex Young | Comments | Tags timers api libraries modules


Parrot (GitHub: sailorjs/parrotjs, License: MIT, Bower: parrotjs) by Kiko Beats is a library for wrapping API calls to your server. You can register different environments, which makes it easy to switch between development and production. You can also register URLs with different protocols, so it’s possible to make WebSocket or Ajax requests.

It has a fluent API, so you can chain calls. If you wanted to register your production and development servers, then you’d call endpoint.add:

  .add(name: 'development', url: 'http://localhost:3000')
  .add(name: 'production', url: '')

Specific API URLs can be added as well:

  .add(name: 'signup', path: 'user', method: 'post')
  .add(name: 'login', path: 'user/login', method: 'post');

Making an Ajax request to the signup route would just be parrot.ajax('signup', function(err, res) {.

This seems preferable to some client-side HTTP APIs. The author intended it to be used with Sails.js, but you could use it with other frameworks as well.


I’ve noticed a few libraries recently that aim to improve the JavaScript timer API. Alex Lawrence sent in flush-timeout (GitHub: efacilitation/flush-timeouts, License: MIT, Bower: flush-timeouts, npm: flush-timeouts), a module for overriding setTimeout.

Here’s a quick example:


var i = 0;

function demo() {
  console.log('i:', i);

setTimeout(demo, 500);
setTimeout(demo, 1000);
setTimeout(demo, 1500);



This will cause demo to immediately run three times, and then print Done. If you removed global.flushTimeouts then it would execute based on the delays passed to setTimeout.

flush-timeouts might be useful when you’re trying to queue up tasks with setTimeout but have additional logic that determines if it’s safe to run all the tasks at once. Or perhaps you’ve got tests for code that depends on setTimeout and don’t want to wait. The author has supplied tests and build scripts so you can pick it apart to see how it works.

Node Roundup: Taunus, Root Path, Mongorito

19 Nov 2014 | By Alex Young | Comments | Tags node libraries modules google frameworks



Taunus (GitHub: taunus/taunus, License: MIT, npm: taunus) by Nicolas Bevacqua is an MVC framework that offers full-stack progressive enhancement. It uses server-side rendering, and will also use the browser’s history API for routing if it’s available.

Taunus can deal with view caching on your behalf, if you so desire, using asynchronous embedded database stores on the client-side. Turns out, there’s pretty good browser support for IndexedDB. Of course, IndexedDB will only be used if it’s available, and if it’s not then views won’t be cached in the client-side besides an in-memory store. The site won’t simply roll over and die, though.

It supports both Hapi and Express, so there’s some flexibility on the server. The server-side component is mainly dedicated to rendering.

There’s a getting started guide that shows how to set up a Taunus project and how to do basic things like adding a layout.

Root Path

Chris Morrell wrote a detailed response to a StackOverflow question about finding the root path for a Node project.

This resulted in the App Root Path Module (GitHub: inxilpro/node-app-root-path, License: MIT, npm: app-root-path), a small module that returns the path to the current module’s main directory. It returns a string, so you just have to do require('app-root-path') and pass the output to require.

Chris notes that the basic method for this is: path.resolve(__dirname).split('/node_modules')[0];, but there are edge cases where require.main.filename is used instead. This is all explained in the StackOverflow post.

Mongorito for ES6

If you’re using an ES6-based HTTP framework like Koa, then you might feel your database library could do with generator support as well. Fortunately, Vadim Demedes has rewritten his MongoDB module, Mongorito (GitHub: vdemedes/mongorito, License: MIT, npm: mongorito) to use ES6 generators.

Now you can load items like this:

var posts = yield Post.find();

Saving works the same way:

yield; // document created

var id = post.get('_id'); // _id automatically had been set after .save()

It’s based on the monk MongoDB module, and has good test coverage. I’ve never used a module like this in production, but I definitely like the idea of generator syntax for databases.

React Google Maps, TypeScript Tests

18 Nov 2014 | By Alex Young | Comments | Tags libraries testing typescript google-maps react

React Google Maps

React Google Maps

React Google Maps (GitHub: tomchentw/react-google-maps, License: MIT, Bower: react-google-maps, npm: react-google-maps) by Tom Chen is a React component for creating Google Maps. It has a mixin called GoogleMapsMixin that you can use to create React components for your own maps.

Tom has posted some examples that demonstrate things like click events and geolocation. These examples are based on Google’s developer documentation so you can see how React compares to the original Google APIs.

TypeScript Data Structures and Tests

Adrien Cadet sent in some TypeScript projects: Ludivine, a TypeScript data structure library, and Oscar, a test harness.

Ludivine has a wiki that describes each of the interfaces and classes. For example, LinkedList inherits from several interfaces to implement a linked version of IList.

Oscar has a getting started guide that explains how to create tests and test suites:

class MyTestClass extends UnitTestClass {
    firstTest() : void {
        // ... AAA stuff

    secondTest() : void {
        // ... another AAA stuff

This example is for testing a class called UnitTestClass. Each method that ends in Test will be run by the test suite runner.

Protractor-perf, lining.js

17 Nov 2014 | By Alex Young | Comments | Tags libraries testing performance angularjs


Protractor-perf (GitHub: axemclion/protractor-perf, License: MIT, npm: protractor-perf) by Parashuram can help you test for performance regressions while running Protractor AngularJS tests.

To use it, you can add performance-based assertions that are ignored by Protractor. These performance statements will only be used when tests are run with the protractor-perf command-line tool.

The available metrics are quite sophisticated – for a list of metrics take a look at the browser-perf metrics. Some examples are evaluateScript (the time spent evaluating the page’s scripts) and meanFrameTime (average time taken to render each frame).


Lining.js (GitHub: zmmbreeze/lining.js, License: MIT) by mzhou is a library for addressing lines within an element. To use it, add the data-lining attribute to an element, then add CSS to style each line. You can even apply styles to ranges with the data-from and data-to attributes.

There’s a JavaScript API which is event based. For example:

var poem = document.getElementById('poem');

poem.addEventListener('beforelining', function(e) {
  // prevent lining if you want
}, false);

var poemLining = lining(poem, {
  autoResize: true,
  from: 2,
  to: 3,
  lineClass: 'my-class'

The author suggests that it can be used for creative typography, and poems are used in the documentation which is a nice example. It also supports effects, so you can do things like animate sections of text using transitions.

Easier OAuth with Grant

14 Nov 2014 | By Alex Young | Comments | Tags oauth express middleware libraries modules node

OAuth always seems like an attractive alternative to rolling your own authentication, but it usually ends up being much harder than it looks. Grant (GitHub: simov/grant, License: MIT, npm: grant) by Simeon Velichkov aims to solve this. It’s built on Guardian.js, which was made by Nijiko Yonskai at Mashape (Nijiko has written quite a few Node modules that I’ve written about).

Grant is Express middleware that accepts options for the OAuth server. You can include things like the permissions you want to request, so for Facebook this might include friends_groups:

"facebook": {
  "key": "...",
  "secret": "...",
  // by default request publish permissions via /connect/facebook
  "scope": ["publish_actions", "publish_stream"],
  // set specific callback route on your server for this provider only
  "callback": "/facebook/callback"
  // custom override keys
  "groups": {
    // request only group permissions via /connect/facebook/groups
    "scope": ["user_groups", "friends_groups"]
  "pages": {
    // request only page permissions via /connect/facebook/pages
    "scope": ["manage_pages"],
    // additionally use specific callback route on your server for this override only
    "callback": "/pages/callback"

One nice touch is you can provide options for different environment, so it’s fairly easy to add settings for development or a CI server. Simeon has an app on Heroku that allows you to try out each provider with a friendly form:

I also noticed the same author has written a REST API wrapper called Purest. It embeds configuration details for dozens of providers, including Tumblr, Twitch, Google, and imgur.

To use it, you have to create an access token, then you can connect to a provider:

var Purest = require('purest');
var google = new Purest({ provider:'google' });

google.get('channels', {
  api: 'youtube',
  qs: {
    access_token: 'token',
    forUsername: 'user'
}, function (err, res, body) {});

This Google instance can be used to access YouTube’s API:

    forUsername: 'username'
  .request(function (err, res, body) {});

The documentation includes an excellent example that uses the request module’s streaming API to pipe files from one service to another.

Mithril: A Tiny MVC Framework

13 Nov 2014 | By Alex Young | Comments | Tags libraries modules frameworks mvc

Stephan Hoyer sent me an MVC framework called Mithril (GitHub: lhorie/mithril.js, License: MIT, npm: mithril) that’s getting a lot of positive feedback due to its small size and great documentation.

Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser’s URL.

What makes Mithril cool is the choices Leo has made: many MVC frameworks provide features that I don’t need, but I always find I want routing, data syncing features, and something like React’s virtual DOM.

There’s a short sample on Mithril’s homepage that shows most of these features:

var app = {};

app.PageList = function() {
  return m.request({ method: 'GET', url: 'pages.json' });

app.controller = function() {
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {

app.view = function(ctrl) {
  return [
    ctrl.pages().map(function(page) {
      return m('a', { href: page.url }, page.title);
    m('button', { onclick: ctrl.rotate }, 'Rotate links')

m.module(document.getElementById('example'), app);

This example shows how to fetch data from a server and map it to the UI using a controller and a view. I like the way the app object is just a plain old object rather than a Mithril-specific construct, and the syntax for creating elements is succinct and easy to understand (m('button', ...)).

Mithril doesn’t provide two-way data-binding, but Leo has an example that shows you how to implement it:

// A data store
var name = m.prop('');

// binding the data store in a view
m('input', { oninput: m.withAttr('value', name), value: name() });

I took this from the m.request documentation which has loads of useful examples for working with web services.

Whether or not Mithril suits your requirements will depend on your project, but it has an excellent selection of features. There are testimonial tweets on the homepage where people are saying things about switching from AngularJS, which definitely grabbed my interest when I first saw the site.

Node Roundup: Eskimo, Serve-Me, Google BigQuery and Cloud Pub/Sub

12 Nov 2014 | By Alex Young | Comments | Tags node libraries modules google frameworks



Eskimo (GitHub: niftylettuce/eskimo, License: MIT, npm: eskimo) by niftylettuce is a framework for Node web applications. It has a command-line tool that is used to manage projects, known as igloos. You can add new models, views, and controllers, or create all three with mvc.

Once you’ve installed Eskimo with npm, you can generate a new app with eskimo create projectname. Projects use Express, the electrolyte dependency injection module, Redis, and MongoDB. You’ll need to run npm install from the freshly created project to get the dependencies required for running the tests.

The authors have put sensible commands in package.json for npm start and npm test, so it works like most Node web applications. It also has a Vagrant file, so you should be able to test out deploying your applications without too much hassle.

Initially the documentation made me think it was an alternative to Yeoman, but it’s actually an MVC web framework based on Express. The documentation and examples currently need expanding, but I found some cool tutorials on niftylettuce’s blog.


Serve-Me (GitHub: muit/serveMe, License: MIT, npm: serve-me) by Muitxer is a small web framework that’s a bit like a mix of a static server and Sinatra. You can quickly configure it serve static pages, then add server-side route handlers with ServeMe.Routes.add('name', fn). The function has to return a string, which is why it’s more like Sinatra than Express.

The reason I liked Serve-Me is it has no dependencies – the author has used Node’s core modules for everything. The source is quite short, so you might find it interesting if you’re learning Node’s core modules.

Google Cloud Platform Updates

Google’s Cloud Platform Node module now has support for BigQuery and Cloud Pub/Sub. I read about this on Jonathan Beri’s Google+ account:

gcloud-node, the Google Cloud Client Library for Node.js, has added support for BigQuery and Cloud Pub/Sub. These Cloud APIs join Cloud Datastore and Cloud Storage. Grab it with ‘npm install –save gcloud’ or check out the source on GitHub.

The module is available at GoogleCloudPlatform/gcloud-node on GitHub. There’s a full TodoMVC example that demonstrates some of the module’s features.

Flox, Pioc

11 Nov 2014 | By Alex Young | Comments | Tags react libraries flux modules dependency-injection


I continue to receive Flux implementations, which isn’t a bad thing because they’re adapting at a rapid pace. Flox (GitHub: foss-haas/flox, License: MIT, npm: flox) by Alan Plum is lightweight and seems easy to learn – the readme has a nice introduction to the architecture.

It’s loosely based on Flux, with a pared down pragmatic approach which I like. For example, Flox doesn’t provide waitFor. Instead you should use services, which I thought made sense.

If you’re interested in Flox, read through the example in the readme. It also ships with pretty detailed Mocha/SinonJS tests.


Speaking of services, what do you do when you want to easily switch dependencies or configuration values for different environments, like tests? pioc (GitHub: pago/pioc, License: MIT, npm: pioc) by Patrick Gotthardt is a dependency injection container that is aimed at Node but can be used with browsers through Browserify.

pioc’s goal is to help you write loosely coupled modules:

pioc is very smart about how and when to initialize your services. It supports constructor injection, property injection, static values and even module inheritance with all the parts that are needed to make it work.

The API allows you to define modules, which are known as service definitions. These services are resolved by providers. Services can be bound as values or lazily evaluated objects. By default objects are treated as singletons, which is the most common usage.

If you’re confused by all of this then try to imagine how to handle loose coupling for database modules. If you wanted to switch your database’s configuration for the test or staging environments, then DI can help because you can inject different configuration values at runtime. Also, the database module would be treated as a singleton, so you can safely refer to it in multiple places in your project without accidentally creating new instances or connections.

Patrick’s example is actually MongoDB, and this works well as a showcase of pioc’s features.

JSON File Store, Purplecoat.js

10 Nov 2014 | By Alex Young | Comments | Tags json database memory libraries ui themes

JSON File Store

I’ve been emailed a selection of in-memory databases, spurred on by last week’s LokiJS post. JSON file store (npm: jfs, License: MIT) by flosse can save JSON to files, and it also has a pretty option for producing readable output.

It can generate IDs using the node-uuid module, but it also works with custom IDs as well. It supports synchronous operations for saving and getting items. The basic usage looks like this:

var Store = require('jfs');
var db = new Store('data');

var d = {
  foo: 'bar'

// Save with custom ID'anId', d, function(err) {
  // Now the data is stored in the file data/anId.json

// Save with generated ID, function(err, id) {
  // id is a unique ID

You can toggle memory-only mode with the type: 'memory' option. I thought this project seemed like something that might be useful if you’ve got configuration or small data files files that are user editable, perhaps in a redistributable web application or daemon.


Elle Kasai sent in Purplecoat.js (GitHub: ellekasai / purplecoat.js, License: MIT, Bower: purplecoat.js), a lightweight version of those popover tutorial libraries. It can be applied to an element with the data-purplecoat attribute, and data-purplecoat-label can be used to add a message.

Purplecoat.js is used to document Elle’s Shiori Bootstrap theme for Jekyll, which is a clean and minimal Jekyll theme with several built-in colour themes.

Simple Modules, D3xter

07 Nov 2014 | By Alex Young | Comments | Tags sql modules libraries graphics graphs

Simple Modules

If you’ve got legacy JavaScript that’s badly structured, then one early refactoring strategy that can help is to add modules. However, you might not be sure about the specific module system or framework that you’ll eventually switch to, so what do you do?

George Mauer sent in simple-modules (GitHub: togakangaroo/simple-modules, License: MIT, Bower: simple-modules), a tiny module system that lets you define modules and then require them. There’s an example that shows the main features, including a test for circular dependency detection.

George wrote an article about converting legacy code, which shows how to include Simple Modules on the page and then how to identify possible modules.



D3xter (GitHub: NathanEpstein/D3xter, License: MIT, Bower: d3xter) by Nathan Epstein is a D3.js-based library for plotting graphs. The functions in the library return SVG objects, so you can further customise them with the standard D3 API.

D3xter’s built-in graphs should work well with minimal configuration, so if you’re looking for a D3-friendly library then this one might be a good choice. For example, given arrays of co-ordinates, you can plot a line graph like this:

var lineGraph = xyPlot(index, y);

The readme has an additional example that shows how to query the resulting object with D3 and modify the colours.

Alasql.js: In-memory SQL

06 Nov 2014 | By Alex Young | Comments | Tags database sql modules libraries node

I recently wrote about an in-memory database called LokiJS. Most in-memory databases are NoSQL, but there are also similar projects that use SQL. Andrey Gershun sent in Alasql.js (GitHub: agershun/alasql, License: MIT, npm: alasql), a relational database that runs in browsers and Node.

It’s designed to be fast, and was created partly by using a Jison file that produces a parser for SQL statements. The author has made some benchmarks so you can compare it to other projects:

This project is different to WebSQL because it doesn’t use the Storage API. It has an impressive set of features, including joins, group by, union, and subqueries. It even has partial support for transactions, so it’s not a trivial implementation.

The API allows JavaScript objects to be mixed with SQL statements, so it’s easy to create test data:

var alasql = require('alasql');

var db = new alasql.Database();

db.exec('CREATE TABLE test (one INT, two INT)'); = [
  { one: 3, two: 4 },
  { one: 5, two: 6 }

var res = db.exec('SELECT * FROM test ORDER BY two DESC');

To make it fast, the authors have used various optimisation strategies:

  • Compiled queries are cached
  • Joined tables are pre-indexed
  • WHERE expressions are pre-filtered for joins

So in a way it has a query planner like more established databases.

The readme includes a list of similar projects, details on the tests (they use Mocha), and there’s a to-do list where you can see what Andrey is planning.

Node Roundup: npm and Front-end Packaging, npm Package Store

05 Nov 2014 | By Alex Young | Comments | Tags video node modules libraries frontend npm

npm and Front-end Packaging

There’s a post on the npm blog about npm and front-end packaging. It directly addresses something that lots of people are confused about: is it a good idea to use npm for front-end development, even if the project doesn’t use CommonJS modules?

It’s useful to see the npm team’s thoughts on this, because it seems like some front-end developers use npm out of convenience, and others use it because their module works well in Node and browsers. Writing code for browsers has different requirements to Node, but the major ones are highlighted in this post and then potential solutions are discussed.

One future feature that will help front-end developers is ecosystems, which is a way to create a subset of packages for a common base. So in theory you could place React, jQuery, Gulp, and Grunt packages into separate sub-repositories.

Another recommendation suggested in the article is using additional metadata in the package.json file. I’ve seen lots of packages do this so it seems increasingly popular at this point.

My preferred approach to front-end development is npm with npm scripts and Browserify, so it’s encouraging to see that mentioned in the post:

We also think browserify is amazing and under-utilized, and an end-to-end solution that worked with it automatically at install time is a really, really interesting idea (check out browserify’s sweet handbook for really great docs on how to use it effectively).

Building dependencies from ./node_modules is a pain because every module seems to have a different entry point filename, so it would be really nice if more front-end developers used the main property in package.json.

If you’re looking for an example of an npm-based React project, then I recently received this tutorial from yiminghe : npm-based front-end development using browserify and browser loader library.

npm Package Store

npm Package Store

Travis Horn sent in npm Package Store (GitHub: travishorn/npm-package-store, License: MIT, npm: npm-package-store). This is a web application that shows updates for your globally installed npm packages.

It’s an Express app that queries npm for JSON using npm ls -g --json, then fetches the latest info with request from

LokiJS: Fast In-memory Database

04 Nov 2014 | By Alex Young | Comments | Tags database nosql node modules libraries

Joe Minichino sent in LokiJS (GitHub: techfort/LokiJS, License: BSD, npm: lokijs), an in-memory document database written in JavaScript. It runs in browsers and Node, and supports JSON persistence.

It uses an auto-generated binary index, which helps keep simple find operations fast. MongoDB-style find queries are naturally slower, but you can create indexes that are stored in-memory. Also, the authors have adapted it to suit mobile applications – there are several special cases for Cordova, so it should work well for mobile-first applications. You can read more about performance in Indexing and Query Performance on the LokiJS wiki.

Other than indexing, there are other advanced features that projects like this usually don’t support, including transactions and CouchDB-style views. Views are functions that can be stored with collection.storeView, then accessed with collection.view. There are examples for views, map reduce, and indexing on the LokiJS wiki.

LokiJS is tested with gordian, which is also written by Joe Minichino. There is a Gulp-based build script, and a demo application that’s meant to run on the desktop.

McFly, React Widgets, react-separate-template

03 Nov 2014 | By Alex Young | Comments | Tags react reactive widgets ui


McFly (GitHub: kenwheeler/mcfly, License: BSD) by Ken Wheeler is a Flux implementation. It uses Facebook’s Dispatcher, and provides factories for Actions and Stores.

To use McFly, create an instance of McFly then make a store with mcFly.createStore. You can then generate new actions with mcFly.createActions.

Internally, CommonJS modules are used with a Browserify-based build script to generate the final browser-friendly source, so it’s modular and easy to read.

React Widgets

If you need some UI widgets for your React projects, then you might want to try React Widgets (GitHub: jquense/react-widgets, License: MIT, npm: react-widgets) by Jason Quense. It’s influenced by jQuery UI and Kendo UI, and implements dropdown lists, combo boxes, selects, datetime pickers, and a calendar.

The usage is based on custom elements with attributes that set up the data binding to drive the widgets. Each widget has several attributes that provide a good level of flexibility, and they support keyboard shortcuts as well.

Separating React Templates

Sergii Kliuchnyk wanted to keep React HTML fragments in separate files to make it easier to work on stylesheets without building part or all of an application. react-separate-template is a GitHub repository that explores this idea.

There’s a script called conv.js that combines a JavaScript file with a corresponding HTML file to make the resulting .jsx file that you’d usually find in a React project.

There are still some issues, like the handling of attributes, but it seems like something that could be adapted to work as part of a typical Gulp/Grunt build script.

Streams, Peerflix, and node-webkit

31 Oct 2014 | By Alex Young | Comments | Tags video node modules

Recently a web service called Joker has been in the technology press. It’s a web application that downloads torrents based on magnet URIs, and allows users to stream video content and fast forward to any point in the video. Of course, it’s already been taken down, and it didn’t always work as well as my description sells it, but it was an interesting experiment all the same.

I remember being completely astounded that Popcorn Time was built with JavaScript. Porpcorn Time is a web application that runs in a desktop wrapper so you can use it in Mac OS, Windows, and even Android. The pirates know what they’re doing: cross-platform support from day one with a cool interface that integrates data from web services like IMDB.

Two things make Popcorn Time possible: node-webkit-builder and peerflix.

node-webkit-builder makes it easy to build cross-platform desktop apps with node-webkit:

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

peerflix will stream torrents from a magnet link to a HTTP server that video players like VLC can connect to. It’s based on torrent-stream, a Node stream torrent client that has a friendly API.


torrent-stream uses lots of small modules to do the job. For example, magnet-uri can parse magnet URIs, and peer-wire-swarm is a swarm implementation.

Reading through these modules is like a showcase of Node’s stream API. Academically they’re fascinating, despite the obvious grey market connotations.

Which brings me to the TV/movie/music “PVR”-like applications. Media cataloguing doesn’t have to be for pirated content: I have lots of DRM-free music, video, and books that could be presented in a better way. Combining my music purchases from Amazon, Apple, and Google into a cool desktop media browser powered by Node with a friendly RESTful API would be really fun and useful.

There’s actually a node-webkit apps list, but I haven’t yet found my perfect Node-powered media browser. Let me know if you’ve made your own Node media browser (or anything similar) and I’ll check it out!