DailyJS

DailyJS

The JavaScript blog.


Tagarray
Featured

rest array ES7 JSON

Array Future, JSONFormData

Posted on .

Array Future

Kiko Beats sent in array-future (GitHub: Kikobeats/array-future, License: MIT, npm: array-future), a module that collects together several ES7 proposals for instance methods on Array:

require('array-future');

[1, 2, 3].average();
// 2

[1, 2, 3].first();
// 1

[1, 2, 3].shuffle();
// [ 2, 3, 1 ]

[1, 2, 3].includes(3);
// true

The includes method is implemented as described by this documentation. Each method is tested with Mocha, and there's documentation in the readme.

JSONFormData

I've been doing a lot of work with the FormData API, and I found a JSONFormData polyfill by Roman Liutikov in the DailyJS submission queue. It implements the W3C HTML JSON form submission API:

Instead of capturing form data as essentially an array of key-value pairs which is the bread and butter of existing form encodings, it relies on a simple name attribute syntax that makes it possible to capture rich data structures as JSON directly.

This implementation lets you submit data to servers as JSON by setting a form's enctype to application/json. It also supports REST API HTTP verbs like PUT and DELETE.

Submitting data with JavaScript is similar to FormData -- just use new JSONFormData(form).formData to get an object based on the form.

If you're writing RESTful services with JSON and want to make a quick web interface, then JSONFormData should help speed things up.

Featured

libraries testing modules array

PowerArray, Atomus

Posted on .

PowerArray

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 a.id < b.id ? -1 : 1.

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

Atomus

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');

      b.clicked(register);

      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.