Party Mode, Bézier Clock

12 Sep 2014 | By Alex Young | Comments | Tags d3 audio

Party Mode

Party Mode

Party Mode (GitHub: preziotte / party-mode, License: MIT) by Mathew Preziotte is a music visualiser with a slick UI and lots options. If you press m it’ll show a menu for each visual effect, and there’s also a keyboard icon near the bottom of the screen that documents each shortcut.

The author built it with d3.js and the Web Audio API.

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There’s a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I’m updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I’m using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently – it was mostly trial and error to get some stuff I liked looking at.

Bézier Clock

Jack Frigaard sent in his Bézier Clock, which got lots of attention on Hacker News this week. It’s made with Processing.js, which is loads of fun to play with, and you can click it to visualise the curve splines and poitns.

There are keyboard options as well:

  • space: Toggle continual animation
  • s: Show intermediate figures and the standard ones
  • a: Cycle through linear, quadratic, cubic and sinusoidal easing

BiMap, jQuery breakpoint

11 Sep 2014 | By Alex Young | Comments | Tags jquery responsive data modules libraries node

BiMap

BiMap (GitHub: alethes / bimap, License: MIT, npm: bimap) by James Daab is a bidirectional map implementation. This is a data structure that allows you to query for values by keys and keys by values:

bimap.push({
  a: {
    b: 1,
    c: {
      d: 2
    }
  }
});
bimap.key('a.b'); // => 1
bimap.val(2); // => "a.c.d"

jQuery breakpoint

jQuery breakpoint (GitHub: joshbambrick / breakpoint, License: MIT) by Joshua Bambrick is a plugin for tracking page resizes, and is ideal for when you need JavaScript to trigger in a responsive design.

You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There’s also $.breakpoint.off for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.

Node Roundup: promise.io, copromise, Apper

10 Sep 2014 | By Alex Young | Comments | Tags modules node libraries express frameworks promises async

promise.io

promise.io (GitHub: krillr / promise.io, License: Apache 2.0, npm: promise.io) by Aaron Krill is an RPC module that uses promises. You can create a server like this:

var server = new PromiseIO({
  someFunc: function(input) {
    return 'I got: ' + input;
  }
});

server.listen(3000);

Then the client can call someFunc by connecting to the server:

var client = new PromiseIO();

client.connect('http://localhost:3000').then(function(remote) {
  return remote.someFunc('my variable!');
}).then(function(returnVal) {
  return console.log(returnVal);
}).catch(function(err) {
  return console.log(err);
});

Internally, q is used for the promise implementation.

copromise

copromise (GitHub: deanlandolt / copromise, License: MIT, npm: copromise) by Dean Landolt is a bit like co, but it automatically lifts values that aren’t promises, so you can yield anything.

A copromise represents the eventual value of a coroutine. A coroutine is a generator function where the yield keyword is used to suspend execution to wait on a future value, allowing linear control flow logic for asynchronous code.

Dean announced it on the nodejs list, including some examples and a comparison with the co module.

Apper

Apper (GitHub: asyncanup / apper, License: MIT, npm: apper) by Anup Bishnoi is a real-time framework for single page applications. The idea behind it is to have strong conventions for practices that suit single page apps, including transparent minification and bundling.

It wraps around Express, so route definitions look like a typical Express project, but Apper also has specific places for things like middleware and application settings.

If you’re new to Express then you might like working with the conventions Apper uses, and it will at least push you away from putting everything in a monolithic app.js file.

Shout: An IRC Client for the Web

09 Sep 2014 | By Alex Young | Comments | Tags irc apps node

Shout IRC

Shout (GitHub: erming / shout, License: MIT, npm: shout) by Mattias Erming is a web-based IRC client. The UI is very impressive, it feels lightweight and fast, but still familiar to die-hard IRC users like me.

I still use an IRC client on a server with tmux, and I probably always will, but there are times when I get forced into using web-based chat services. This is usually for work, and I pretty much never like them. The thing that’s good about Shout is you can run it on your own server, so you could install an IRC daemon on a server somewhere then set it up to connect to it automatically.

This means your colleagues that hate console software can use a friendly web interface, while you can hang out in the shell like a civilized person. There are commercial services that offer IRC backends and friendly web frontends (Gitter and Grove are good examples), but you may like to host your own or hack Shout in some way.

Shout is built using a simple server based on Connect and Socket.IO that maps the client UI to a real IRC server. It has a Grunt build script, and treats IRC commands like plugins so it should be easy to add new ones.

The client-side code uses Handlebars for the templates, and the CSS looks easy to modify. There’s a folder called themes but the example CSS file is currently empty, so I’m not sure how the authors intend that to be used.

The underlying IRC client implementation is slate-irc, which I seem to remember TJ Holowaychuk wrote for a cool Node desktop app. Mattias Erming is now a maintainer, and he’s been committing work to the slate-irc project on GitHub.

Overall Shout looks like it has a lot of potential, and I’ve been impressed by what I’ve seen so far.

From AngularJS to React, Math.js 1.0

08 Sep 2014 | By Alex Young | Comments | Tags angularjs maths react

From AngularJS to React: The Isomorphic Way

Gergely Nemeth sent in From AngularJS to React: the isomorphic way, which outlines how his company used React, Flux, and Koa to reuse code in the browser and on the server. The server-side code is capable of generating a Flux-React application instance and then rendering views.

The browser loads the same code (built with Browserify/Webpack) and bootstraps the application from the shared state. (shared by the server and injected into the global/window scope). This means that our application can continue from the point where the server has finished.

It seems like a lot of people struggle to share code this way, so it’s interesting to see how the author’s Angular experiences compared with React.

Math.js 1.0

Jos de Jong sent us an email to say Math.js has been updated to version 1.0. The project now has more tests and BigNumber support.

There are more examples so you can see cool features like chained operators and function transforms.

You can create BigNumbers with strings, like this:

math.config({
  number: 'bignumber',
  precision: 20 // Number of significant digits for BigNumbers
});

math.bignumber('1.2e+500');  // BigNumber, 1.2e+500

Jos is working on some new features, including derived units (like km/h, kg*m/s^2), and performance improvements. He also wanted to thank the JavaScript community for helping with the project:

I want to thank the community for all valuable and constructive feedback and discussions. Without them, I don’t think we would have had an API so elegant and consistent as it is now. I’m looking forward to the coming period, implementing more great features, making math.js better and better.

Cross-Storage: Share Local Data Across Domains

05 Sep 2014 | By Alex Young | Comments | Tags localStorage es6

Cross-Storage

The localStorage API has some limitations, which you may need to work around for larger applications. The new cross-storage (License: Apache 2.0, npm: cross-storage, Bower: cross-storage) library from Daniel St. Jules at Zendesk adds support for cross-domain localStorage with permissions. It even has an ES6 Promise API.

It uses two components: hubs and clients. Hubs can set permissions based on on domain, and this is enforced using the same-origin policy. The available types of access are read, write, and delete (get, set, del).

CrossStorageHub.init([
  { origin: /\.example.com$/, allow: ['get'] },
  { origin: /:(www\.)?example.com$/, allow: ['get', 'set', 'del'] }
]);

Clients can then access the hub like this:

var storage = new CrossStorageClient('https://store.example.com/hub.html');

storage.onConnect().then(function() {
  // Set a key with a TTL of 90 seconds
  return storage.set('newKey', 'foobar', 90000);
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});

Notice that the onConnect method returns a promise which is fulfilled when a connection has been established with the hub. You could also call storage.close to end the connection, which is actually implemented with an iframe.

Daniel recommends using the es6-promise polyfill for older browsers.

The project uses Gulp to build the client-side code, and comes with tests that use zuul.

React Components

04 Sep 2014 | By Alex Young | Comments | Tags modules node libraries

React Components

In the Node community, frontend package managers are regarded with suspicion. I’ve worked on projects that manage client-side dependencies with both Bower and npm, and although Bower does an admirable job I often feel like I should be using npm instead. That’s mainly because I always have to add a step where client-side files are preprocessed and moved from where Bower downloads them, so it’s not really much different to accessing the same files in node_modules.

React Components (GitHub: vaffel / react-components, License: MIT) from VaffelNinja is a database of React components based on data on npm. It works by assuming React modules are tagged with react-component.

It has a few UI touches that makes it friendly and useful:

  • Searching is real time
  • The URL is dynamically updated with the search term
  • You can copy and paste the URL with the search term
  • Modules render the readme and the most useful links (GitHub, homepage)

This project is a great example of how npm can be completely appropriate for client-side modules, and also highlights how many interesting React components are being created right now.

Node Roundup: DataCollection.js, supererror, Readability

03 Sep 2014 | By Alex Young | Comments | Tags modules node libraries

DataCollection.js

DataCollection.js (GitHub: thestorefront / DataCollection.js, License: MIT, npm: data-collection) from Storefront is a library for querying data. You can use it in browsers or Node. The example in the documentation uses an array of objects, then filters them based on key/values, and some sql-like operators including max and distinct.

The authors claim it’s fast, and although I can’t confirm this it does include a feature for defining indexes for specific keys. It’s well documented and has 95.5% test coverage.

supererror

If you’ve got a project where you’re logging errors with console.error, but want to get more data like line numbers without modifying code, then you could try supererror (GitHub: nebulade/supererror, License: MIT, npm: supererror) by Johannes Zellner.

It changes console.error to include colours, line number, and stacks for Error objects.

Readability

Readability (GitHub: luin / node-readability, License: Apache 2.0, npm: node-readability) by Zihua Li turns pages into simplified Arc90-style HTML. It uses jsdom, supports more character encodings like GB2312, and converts relative URLs so images still work.

I seem to remember having issues with encodings and relative images with other Readability-derived projects, so this seems ideal.

Backbone setMatch, Smalleditor

02 Sep 2014 | By Alex Young | Comments | Tags components ui libraries angularjs

Backbone setMatch

Backbone setMatch (GitHub: joshbambrick / setMatch, License: MIT) by Joshua Bambrick allows you to match models in a collection based on attributes other than the id. This is applied whenever set is called on a collection, both explicitly and internally by Backbone.

The setMatch property can be used with arrays, so you can pass a set of names to match. If you pass it an object you can set options, including the id option which controls what happens when set is called. When it’s set to inherit and incoming models have an id, then match models in the collection will inherit that id, but using retain will keep the original value instead.

Smalleditor

Smalleditor (GitHub: jdkanani / smalleditor, License: MIT, Bower: smalleditor) by Jaynti Kanani is a WYSIWYG editor inspired by Medium. It requires AngularJS, and features revision tracking.

Deltas can be applied to revisions to get the next revision:

angular.module('smalleditorDemo', ['ngRoute', 'smalleditor'])
.controller('EditorController', ['$scope', function($scope) {
  $scope.$watch('editorApi', function(editor) {
    // Get current data model
    var baseDataModel = editor.dataModel();

    // After editing for a while get new data model
    var currentDataModel = editor.dataModel();

    // Compute delta between baseDataModel and currentDataModel
    var delta = editor.computeDelta(baseDataModel, currentDataModel);

    // Apply that delta to any revision to get next revision
    editor.applyDelta(nRevision, nDelta);
  });
}]);

The author cites MediumEditor, which is a similar project that is more focused on the UI and less on the revision tracking aspect.

Yet another alternative is the Pen Editor – the nice thing about Pen is it supports Markdown.

Linked Lists with Symbols

01 Sep 2014 | By Alex Young | Comments | Tags node symbol es6

LiLL (GitHub: BlackDice / lill, License: MIT, npm: lill) is a linked list implementation that uses the ECMAScript 6 Symbol API. Because Symbol isn’t widely implemented, the author has used es6-symbol.

The motivation behind using Symbol is to provide a stateless public API with a low memory footprint. The ES6 wiki describes one of the use cases for Symbol as lightweight information hiding, so a linked list seems like a good example. In LiLL, information about neighbours is stored on the actual items, so you can hop from item to item without creating an entirely new data structure.

LiLL is attached to an owner object using Lill.attach, then you can call Lill.getNext(owner, item) or getPrevious. There are also methods for getting the head and tail.

To build and iterate over a list, you could do this:

var Lill = require('lill');
var scores = {};
Lill.attach(scores);
Lill.add(scores, { name: 'AAA', score: 1000 });
Lill.add(scores, { name: 'ZZZ', score: 900 });

var item = Lill.getHead(scores);

while (item) {
  console.log('High score:', item.name, item.score);
  item = Lill.getNext(scores, item);
}

If you run this in Node’s REPL you’ll see entries with @@lill related data added to the owner object (scores), which describe the linked list. When Symbol is available without a shim then this will become symbols instead.

tcomb-validation, Bug Life

29 Aug 2014 | By Alex Young | Comments | Tags node validation data github graphs

tcomb-validation

tcomb-validation (GitHub: gcanti / tcomb-validation, License: MIT) by Giulio Canti is a general purpose validation library that can be used with (or without) React and Backbone.

It’s based on the tcomb library which is a runtime type checking library.

Using the plain JavaScript API, you can check types like this:

var t = require('tcomb-validation');
var validate = t.addons.validation.validate;

validate(1, t.Str).isValid();
validate('a', t.Str).isValid();

If you call firstError, you’ll get an Error object with a description of what failed the validation. You can combine validators using the struct method, and these can be passed to validate so you can validate forms. You can even pass a JSON schema to validate.

The Backbone integration works by calling validate like this:

var Model = Backbone.Model.extend({
  validate: function (attrs, options) {
    return validate(attrs, Attrs).errors;
  }
});

Bug Life

Bug Life

Bug Life was created for the GitHub Data Challenge, and displays a chart derived from issue data. It includes the labels and issue life cycle events, so you can see what the common labels are and how long it takes to close issues.

The screenshot I included was of Backbone, and generating it required authorisation with the GitHub API. Bug Life handles this quite well – once the API limit was hit I just had to click Authorize and that was pretty much it.

The author has included some explanations of the charts on the project’s demo page:

This is a popular repo on github - backbone. It has a rich history, well organized labels and release cycles. On version 0.9.0, when backbone reached a relatively stable state, many issues were closed. Before this release there were other important ones, for example 0.5.0.

After 0.9.0 backbone lived through 3 other important milestones: 0.9.9, 1.0.0 and 1.1.0. Each of these releases was focused on different aspects. Right before version 0.9.9 most open issues were of type change, while before version 1.1.0 most open issues were of type bug.

Google Get MEAN

28 Aug 2014 | By Alex Young | Comments | Tags node services google

Google MEAN

Melissa from Linnovate, the company behind MEAN.IO, wrote in to say Google have announced support for MEAN on Google Compute Engine.

Normally when I think of Google I think Java and Python. Other services including Heroku and Azure support a wide range of platforms, including Node, so it’s exciting to see Google offering MEAN.

The developer guide is here: MEAN development stack on Google Compute Engine, but it’s worth noting that the MEAN stack can be brought up with click-to-deploy. That means you can get MongoDB, Express, and Angular running in minutes, using a web-based wizard.

I’m not exactly sure how the pricing works with MongoDB, because SQL database pricing is different from Compute Engine. I created a click-to-deploy MEAN project and it seemed to show all the resources under Compute Engine, so I think that means all prices are based on CPU/disk usage.

I make a lot of Express apps, and Google’s developer tools (including the web console) seem compelling even next to Heroku and Azure, so I’d definitely like to try this for a real project soon!

Node Roundup: Tint, Redbird

27 Aug 2014 | By Alex Young | Comments | Tags node modules mac native http proxy

Tint

Tint2

Desktop apps built with node-webkit or similar technologies are on the rise. The idea is seemingly simple: package the Node runtime along with a small program that runs your Node web app as if it’s a native application.

Tint is an alternative. It uses a modified version of Node that bridges to native components, so you can actually write JavaScript that creates native Mac windows, buttons, web views, dialogs, and more.

It’s created by a company called True Interactions, and is MIT licensed. If you’re an Objective-C developer you might like to check out Main_mac.mm, because this is where the authors have successfully integrated Objective-C++ with Node’s event loop.

I built it from source and created a quick test application this afternoon to see what the API feels like:

require('Application');

var Window = require('Window');
var Button = require('Button');

var mainWindow = new Window();
var button = new Button();

mainWindow.title = 'DailyJS';

button.title = 'Hello';
button.addEventListener('mousedown', function() {
  button.title = '^_^';
});

button.addEventListener('mouseup', function() {
  button.title = 'Hello';
});

mainWindow.appendChild(button);

mainWindow.addLayoutConstraint({
  priority: 'required',
  relationship: '=',
  firstItem: button,
  firstAttribute: 'top',
  secondItem: mainWindow,
  secondAttribute: 'bottom',
  multiplier: 0.0,
  constant: 0.0
});

setInterval(function() {
  button.title = Math.random();
}, 1000);

I ran the script with ./build/Release/tint example.js and got a window with a button. I wrote this script by looking at the tests to see how the API works.

I think this is a cool project and I’d really like to make a real Mac application with it, but I’m not sure how to actually distribute an application bundle that people can easily install. I’ll keep playing with it and write a longer tutorial if I discover anything.

Redbird

Redbird (GitHub: OptimalBits / redbird, License: BSD, npm: redbird) by OptimalBits is a reverse proxy for dealing with dynamic virtual hosts, load balancing, proxying web sockets and SSL encryption.

var proxy = require('redbird')({port: 80});

// Route to any global ip
proxy.register('optimalbits.com', 'http://167.23.42.67:8000');

// Route to any local ip, for example from docker containers.
proxy.register('example.com', 'http://172.17.42.1:8001');

The documentation includes a full SSL example, and the authors are planning support for load balancing and IP filtering.

jquery.smoothstate.js, underscore-tpl

26 Aug 2014 | By alex young | Comments | Tags libraries ui jquery animation

jquery.smoothState.js

jquery.smoothState.js (GitHub: weblinc / jquery.smoothState.js, License: MIT) by Miguel Angel Perez promises to improve the early page loading experience by reducing the amount of sudden visual cuts.

By using unobtrusive JavaScript, jquery.smoothState.js loads content asynchronously and updates the URL with history.pushState. Animations are used as a visual cue to indicate when the main page content has been replaced.

The project’s documentation uses these techniques, but take a look at the demo for a more basic example to get started.

underscore-tpl

underscore-tpl (GitHub: creynders / underscore-tpl, License: MIT) by Camille Reynders allows you to expand placeholders stored within objects:

var config = {
  baz: '<%= qux.mofo %>',
  major: {
    badass: '<%= badass %>'
  },
  '<%= foo %>': 'bar'

It can use mustache-style tags instead of ERB, and accepts the same options as _.templateSettings.

I’ve found myself using this type of thing for generating seed data or fixtures in tests, but I imagine it might also be useful if you’re passing plain objects around with data-binding libraries as well.

PojoViz

25 Aug 2014 | By Alex Young | Comments | Tags libraries ui visualisation

Pojo Viz

Pojo Viz (GitHub: maurizzzio / PojoViz, License: MIT) by Mauricio Poppe is a JavaScript code visualisation tool. It shows plain objects and how they’re related, so you can quickly see that AngularJS has a fairly wide and flat hierarchy, where as Lo-Dash is very tall.

It works by analysing the global entry point to a library, then iterating over each property. If an object is encountered, then the properties of that object are recursed until a predefined maximum number of levels is reached.

You can use it to look at JavaScript’s built-in objects and types, although window is presented as a special case because it’s quite large.

It supports two renderers: SVG and WebGL. These use d3 and three.js, and it uses Polymer and Browserify as well.

Ment.io, Coffea, Marilyn

22 Aug 2014 | By Alex Young | Comments | Tags libraries ui WebSocket angularjs

Ment.io

Ment.io

Ment.io (GitHub: jeff-collins / ment.io, License: MIT) is a UI component for handling Twitter/GitHub style @ mentions. It has no dependency on jQuery, and it’s designed for use with AngularJS.

An ngModel is used for data, and the mentio-menu element is used to define the menu that appears during typing. You can use the mentio on a suitable input or content editable element to indicate where Mentio should appear.

Coffea

Coffea (GitHub: caffeinery / coffea, License: BSD, coffea) by Daniel Bugl is an event-based IRC client library. It supports SSL, and the API seems very friendly to Node developers:

var client = require('coffea')({
  host: 'irc.freenode.org'
});

client.on('motd', function(motd) {
  client.join(['#foo', '#bar', '#baz']);
});

client.on('message', function(event) {
  console.log('[' + event.channel.getName() + '] ' + event.user.getNick() + ': ' + event.message);
});

Marilyn

Marilyn (GitHub: alanjames1987 / marilyn, License: MIT) by Alan James Pub/Sub model API with a similar API to Mongoose. It’s event-based, so you can hook into events that are triggered before and after CRUD operations.

You can create models like this:

var MyModel = Marilyn.model('someModelName');

The before and after events can be defined in the initialisation callback that gets passed to the model method.

Marilyn.model('someModelName', function() {
  this.before('create', function(data, next) {
    // this is useful for validating data before a CRUD method runs
    console.log('I ran before');
    next();
  });

  this.after('create', function(data, next) {
    // this is useful for altering data before it's returned to the controller
    console.log('I ran after');
    next();
  });
});

LowDB

21 Aug 2014 | By Alex Young | Comments | Tags modules libraries node databases json

LowDB (GitHub: typicode / lowdb, License: MIT, npm: lowdb) by typicode is a JSON database that uses Lo-Dash. Rather than using a MongoDB-inspired API, it feels more like functional JavaScript.

Data is queried using familiar chained operators, ending in value when you want to obtain the result:

var topFiveSongs = low('posts')
  .where({ published: true })
  .sortBy('views')
  .first(5)
  .value();

LowDB accepts some configuration options, allowing you to control how it behaves. For example, if you want to use it like an in-memory database, then you can set autoSave to false:

var low = require('lowdb')
low.autoSave = false;

There’s also a short syntax API for the basic operations. To perform a where query, you can do this:

low('songs', {title: 'low!'})
// -> low('songs').where({title: 'low!'}).value()

low('songs', {published: false}, {published: true})
// -> low('songs').updateWhere({published: false}, {published: true}).value()

It doesn’t seem to work with localStorage, which I think would be cool, but it might work with Browserify.

Node Roundup: 0.10.31, One-Shot Budapest, Tenso

20 Aug 2014 | By Alex Young | Comments | Tags modules libraries npm node events

0.10.31

Node has been updated to 0.10.31, which includes a newer version of v8, openssl, npm, and bug fixes for some core modules. This includes a fix for fs where fs.readFileSync could leak file descriptors, and a fix for Readable.wrap’s handling of objectMode falsy values.

One-Shot Budapest

The NodeConf One-Shot: Budapest conference will be held on November 21th, 2014. Tickets are $100, and talks include:

  • Matteo Collina: Hardware Hacking on Stage
  • Mathias Buus: BitTorrent, p2p with Node.js
  • Julian Gruber: Node.js vs Go
  • Nuno Job: Production Ready Node

Tenso

Tenso (GitHub: avoidwork/tenso, License: BSD-3, npm: tenso) by Jason Mulligan is a REST API facade. It supports caching, DTrace, and decorates response/request objects in a similar way to Express/restify.

var uuid = require( 'keigai' ).util.uuid;

module.exports.get = {
  '/': [],

  '/reports/tps': function(req, res) {
    res.error(new Error('TPS Cover Sheet not attached'), 785);
  },

  '/uuid': function(req, res) {
    res.respond(uuid(), 200, {'cache-control': 'no-cache'});
  }
};

DeLorean, Cash: Call, Collect, Assign

19 Aug 2014 | By Alex Young | Comments | Tags libraries ui flux

DeLorean.js

DeLorean.js (GitHub: f / delorean, License: MIT, Bower: delorean, npm: delorean.js) by Fatih Kadir Akın is a Flux implementation. It can be used with React.js and Flight.js, and the author mentioned that he’s working on Backbone.js integration as well.

I’ve previously written about Fluxxor, which is another library based on Flux. If you’ve used MVC libraries before, then you can think of DeLorean.js and Fluxxor like alternatives for the models and controllers. Flux provides tools for creating stores, dispatchers, and action creators.

Stores are a bit like models, but you don’t create instances of them. Instead they manage state for a domain within the application. This actually has positive implications for testing. This quote is from the React overview:

Stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns. This also makes stores more testable than models, especially since stores have no direct setter methods like setAsRead(), but instead have only an input point for the payload, which is delivered through the dispatcher and originates with actions.

Dispatchers manage data flows, responding to actions as they are created during the lifetime of a program. Action creators are similar to controllers in MVC – in DeLorean’s documentation they do things like get JSON from a server, then pass the data to a dispatcher.

Action creators are then used by the view layer, so if you’re using React you could invoke action creators from views and bind them to template fragments.

This might all sound highly abstract, but you might find it useful if you’re finding it hard to manage large client-side projects. The model layer in MVC libraries often feels ORM-inspired, which in my experience doesn’t always work well when combined with business logic.

Cash Updates

Rob Robbins sent in a note to say Cash has been updated to include new methods for allowing the invocation of native functionality:

Call, Collect and Assign

In order to keep code creep at a minimum, We are introducing these three methods that allow the invocation of native functionality on the elements in the q. What do I mean? Let’s take the Attribute methods for an example. We could write separate methods for the getting, setting, and removal of attributes:

cash.setAttribute = function(foo, bar) {
  // set attribute 'foo' to 'bar' on each element in the q 
};

cash.removeAttribute = function(foo) {
  // remove attribute 'foo' from each element in the q 
};

cash.getAttribute = function(foo) {
  // collect and return attribute 'foo' from each element in the q 
};

Instead we can have a single method capable invoking any of these (or any native method for that matter):

$(foo).call('setAttribute', 'data-foo', 'bar'); // returns cash
$(foo).call('removeAttribute', 'data-foo');
$(foo).collect('getAttribute', 'data-foo'); // retruns an array

The reason I wrote about Cash previously was because I know a lot of people are looking for alternatives to jQuery for smaller DOM/event-wrapper libraries, and this new API should help people use existing standards rather than reinventing things browsers are good at.

PerfBar, ngAtp

18 Aug 2014 | By Alex Young | Comments | Tags libraries ui angularjs performance benchmarks

PerfBar

PerfBar

PerfBar (GitHub: lafikl / perfBar, License: MIT) by Khalid Lafi is a script that adds various benchmarks to a page. To use it, add perfBar.js and then configure some metrics:

perfBar.init({
  budget: {
    'loadTime': {
      max: 200
    },
    'redirectCount': {
      max: 1
    },
    'globalJS': {
      min: 2,
      max: 5
    }
  }
});

You can use perfBar.enable and perfBar.disable to toggle metrics. The documentation has PerfBar included on the page so you can see what it looks like, and each of the available metrics is documented.

Some of the available metrics are the total number of DOM elements, the time for the DOM content to load, request duration, and backend/frontend processing time.

ngAtp

ngAtp (GitHub: yiransheng / ngAtp, License: MIT, Bower: ng-atp) by Yiran Sheng is an autocompletion library for AngularJS. The basic usage is to specify the ng-atp and ng-atp-config directives. The config option uses a Bloodhound config object, which comes from Twitter’s typeahead.js suggestion engine.

In ngAtp, Bloodhound is included as an Angular service, with Angular’s $http library instead of jQuery.ajax. It reuses Bloodhound, so you get features like prefetching, intelligent caching, fast lookups, and backfilling, but with an Angular-friendly API.