DailyJS

DailyJS

The JavaScript blog.


Tagbuild-systems
Featured

sponsored-content build-tools build-systems wallaby.js testing build

Wallaby.js, Brunch

Posted on .

Wallaby.js

Wallaby.js, the continuous test runner that outputs results directly into your editor, currently has a 20% discount on IntelliJ Platform licenses until 7th of June 2015. There are also free betas available for Visual Studio, which usually costs $100 for a single license or $160 for a company seat license.

Wallaby.js for Visual Studio is new, and it supports code coverage, smart actions, and it has font and colour options. This is what it looks like:

Wallaby in VS

In that screenshot the green squares means that the source is covered by at least one test, and the pink square means the source is on the execution path of a failing test. The blog post on Visual Studio has more details and gifs for each feature.

In other Wallaby.js related news, it's recently got support for the Facebook Jest testing framework (which I've been using with React projects). You can find an example in wallaby-jest-sample.

Finally, Artem Govorov, who works on Wallaby.js, has been writing interesting posts about JavaScript testing on his blog. Check out Heroes of JavaScript and Testing for an amusing (but useful) overview of testing in JavaScript.

Brunch

If you're not entirely happy with Gulp and Grunt, did you know there's an older build system called Brunch? It's installable with npm (npm install -g brunch), and the people behind it have created a new guide that makes it easy to get started.

Brunch is not a task runner. Gulp and Grunt are generalised task runners, and one of the reasons they exist is not everyone can run JavaScript programs can easily run a makefile. I really like using makefiles for Node projects, but Windows web developers often complain that they don't have make installed, or don't want to install it. Another reason to use Gulp or Grunt is they can provide higher-level abstractions that make reading and writing tasks easier for web developers.

So why is Brunch not a task runner? Well, it's a purely focused on asset-building. It knows about JavaScript and CSS, and can handle incremental building and smart concatenation of these files. I recently spent a good two hours combining Watchify and Browserify in a Gulp task to get incremental builds working for a React/Browserify project, but if I'd have used Brunch I could have just run brunch watch --server.

Using Brunch with an existing project might have been as much work as my Gulp/Watchify/Browserify task -- I haven't yet tried using Brunch with a big and established (OK, messy) project. I have, however, tried creating a Brunch skeleton to see what a Brunch-built project looks like, and it seems pretty good to me. If you find Gulp and Grunt hard to use then try a Brunch skeleton and take a look at the new Brunch guide.

Featured

node modules npm network build-systems

Node Roundup: webpack, Mitm.js, musicmetadata

Posted on .

webpack

webpack

Vignesh Anand sent in webpack (GitHub: webpack, License: MIT, npm: webpack) by Tobias Koppers. It's a bundler for CommonJS and AMD packages, based around asynchronous I/O, and supports preprocessors like CoffeeScript.

With webpack you can load chunks of dependencies on demand, so you can reduce the initial payload. It only supports JavaScript by default, but there are modules for loading resources like CSS (css-loader). To understand how it works, the getting started tutorial provides a high-level overview.

Vignesh pointed out that Instagram uses webpack, and it already has a lot of support on GitHub.

Just wanted to leave a little thank you and share the exciting news that instagram.com is now building and serving all of its js and css assets with webpack :). @sokra you've been an awesome help in getting this all working, and our build step is so much cleaner and quicker because of it.

Mitm.js

Mitm (GitHub: moll / node-mitm, License: LAGPL, npm: mitm) by Andri Möll is a module for intercepting and mocking outgoing TCP and HTTP connections. Running Mitm() will enable mocking for sockets, and it returns an object that allows mocking to be disabled:

var Mitm = require('mitm');  
var mitm = Mitm();

// Later:
mitm.disable()  

The documentation has more examples, including how to handle HTTP requests during testing.

musicmetadata

musicmetadata (GitHub: leetreveil / musicmetadata, npm: musicmetadata) by Lee Treveil is a streaming metadata parser for music files:

var fs = require('fs');  
var mm = require('musicmetadata');

// create a new parser from a node ReadStream
var parser = mm(fs.createReadStream('sample.mp3'));

// listen for the metadata event
parser.on('metadata', function(result) {  
  console.log(result);
});

The project is a fork of node-id3 by António Afonso.