Node Roundup: Building Node.js Together, node-libnmap, httpolyglot

30 Jul 2014 | By Alex Young | Comments | Tags node modules libraries network security http

Building Node.js Together

TJ Fontaine wrote about Node from a release management perspective on the official Node blog, in Building Node.js Together. It covers documentation, code quality, and the growing team of core contributors and contributors that are employed full-time to work on Node:

For instance, Chris Dickinson was recently hired to work full time on Node.js, and has expressed interest in working on the current and future state of streams. But it’s not who employs Chris that makes him an ideal candidate, but it will be the quality of his contributions, and his understanding of the ethos of Node.js. That’s how we find members of the team.

node-libnmap

The evilscan module uses JavaScript to enumerate over TCP ports. node-libnmap (GitHub: jas- / node-libnmap, License: MIT, npm: node-libnmap) by Jason Gerfen is an alternative that uses the nmap binary.

It will return results as JavaScript objects, so you should be able to process the output fairly easily. A basic scan looks like this:

var libnmap = require('libnmap');

var opts = {
  range: ['localhost', '10.0.2.0/24', '192.168.2.0/25']
}

libnmap.nmap('scan', opts, function(err, report){
  if (err) throw err
  report.forEach(function(item){
    console.log(item[0])
  });
});

httpolyglot

httpolyglot (GitHub: mscdex / httpolyglot, License: MIT, npm: httpolyglot) by Brian White allows you to start a server that accepts both HTTP and HTTPS connections on the same port.

It works by sniffing the first byte of the stream to see if TLS is required:

var firstByte = data[0];
socket.unshift(data);
if (firstByte < 32 || firstByte >= 127) {
  // tls/ssl
  this._tlsHandler(socket);
} else
  this.__httpSocketHandler(socket);

BitcoinJS 1.0

29 Jul 2014 | By Alex Young | Comments | Tags bitcoin libraries

BitcoinJS 1.0 (GitHub: bitcoinjs / bitcoinjs-lib, License: MIT, npm: bitcoinjs-lib) has been released. This is a library for working with Bitcoins. For example, Bitcoin.ECKey.makeRandom can be used to generate a new address, and you can create transactions with new Bitcoin.Transaction().

The API is clean and easy to learn, and it comes with a test suite. It depends on crypto-js and some modules for working with base 58 encoding. Typed arrays are used to ensure it has solid performance.

BitcoinJS is a popular module, and is used by some popular Bitcoin-related services, including Hive Wallet, Blockchain.info, and BitAddress.

It comes with support for browsers, so you can use it in client-side code as well as Node.

The 1.0 release signifies a milestone that the author has been working on since 2011. For more details, see the 1.0 announcement.

Blockies, Angular Debaser

28 Jul 2014 | By Alex Young | Comments | Tags libraries ui graphics angularjs testing

Blockies

Blockies (GitHub: download13 / blockies, License: WTFPL) by Erin Dachtler is a small library that generates avatars based on a random seed and colour.

var icon = blockies.create({
  seed: 'randstring',
  color: '#dfe',
  size: 15,
  scale: 3
});

The arguments are all optional, and the output is a canvas element that you can insert into a container. The resulting images look a bit like the default GitHub avatars.

Angular Debaser

Angular Debaser (GitHub: decipherinc / angular-debaser, License: MIT) by Christopher Hiller is a library designed to cut down the amount of boilerplate required to test AngularJS projects.

When a module depends on a lot of services, then it can require a lot of stubs to test. To get around that, Debaser provides a more succinct syntax:

]
debaser()
  .module('donny.pizzajoint.admin')
  .object('Settings', {
    location_id: 1
  })
  .object('User').withFunc('getAll').returns([])
  .object('Pizza').withFunc('getAll').returns([])
  .object('Toppings').withFunc('getAll').returns({})
  .object('Sides').withFunc('getAll').returns([])
  .object('Orders').withFunc('getPreviousWeek').returns([])
  .object('Deliveries').withFunc('getPreviousWeek').returns([])
  .debase();

It uses angular-mocks, which is “ngMock” from the main AngularJS project.

TypeScript Log, Supplemental

25 Jul 2014 | By Alex Young | Comments | Tags typescript languages microsoft libraries

This week on DailyJS every post is about TypeScript! This article is a roundup of interesting TypeScript libraries.

This is the end of TypeScript week on DailyJS. I’ve been going through my email archives looking for TypeScript-related things that people have sent in. Here is a selection! As always, please share anything TypeScript (or JavaScript) related with me by going to contact.dailyjs.com.

VCL.JS

VCL.JS (GitHub: vclteam / VCL.JS, License: Apache 2.0) is a component-based web framework. The built-in components are based on Bootstrap, so the UI code should be quite easy to work with if you’ve used Bootstrap before.

It has deep Visual Studio integration, so Microsoft developers should be able to get started quickly. It even supports data binding and AMD for client-side code.

EndGate

I’m intrigued by EndGate, a game framework for HTML5 games written in TypeScript. It has APIs for input, graphics, animations (tweening), and collision detection.

There’s a tutorial that explains how to use collisions and tweens. It seems to focus on map-based 2D games, which usually work well in browsers anyway.

asyncawait

One of the big things in C# 5.0 was the async modifier and await operator. These keywords allow C# code to be asynchronous, without callbacks or delegate methods.

The asyncawait module for Node is inspired by this API. You can await asynchronous methods, so you get to use non-blocking APIs with synchronous convenience:

var foo = async (function() {
    var resultA = await (firstAsyncCall());
    var resultB = await (secondAsyncCallUsing(resultA));
    var resultC = await (thirdAsyncCallUsing(resultB));
    return doSomethingWith(resultC);
});

This module is based on two great projects: node-fibers and bluebird, but it’s written with TypeScript:

TypeScript: asyncawait is written in TypeScript (look in the src folder), and includes a type declaration file. TypeScript makes JavaScript development faster, less error-prone, more scaleable, and generally more pleasant.

TypeScript's Compiler

24 Jul 2014 | By Alex Young | Comments | Tags typescript languages microsoft

This week on DailyJS every post is about TypeScript! This article is all about TypeScript's compiler.

This week a new TypeScript compiler was announced, along with the move of the project to GitHub.

Our work to date on the new compiler has been very promising. At its current level of completeness, the new compiler is able to compile existing real-world TypeScript code 5x faster than the currently shipping compiler. These results are still early. Once the compiler has reached parity, we’ll be able to report out a more complete picture of the performance improvements.

You might be wondering how the TypeScript compiler works. The source can be found at GitHub: Microsoft/TypeScript, and is written in TypeScript. It’s structured using features and idioms commonly used in TypeScript, like services and generics.

There’s a parser, scanner, and the infrastructure needed to work with command-line options and files. The parser generates nodes that are used by an “emitter” that produces the desired output. You’ll see a lot of switch statements matching on enums that relate to language constructs.

Comparison with Other Compilers

The CoffeeScript parser is generated from a Jison file – so unlike TypeScript it has an additional context free grammar file. There are attempts at writing Jison-based TypeScript compilers, which are interesting to look at. LiveScript is also based on Jison.

ClojureScript’s compiler transforms ClojureScript into JavaScript. Originally ClojureScript was written in Clojure, and I’m not sure if it’s self-hosted yet. There was a fork that is self-hosted, however.

Automation

One issue with JavaScript compilers is the fact you have to recompile files to JavaScript whenever you make a change. Fortunately, tsc has a --watch option, so you can write tsc -w file.ts to watch for changes on file.ts. This can easily be used with a module like nodemon to automatically restart the Node process (if you’re using Node) as well.

There are also Grunt and Gulp plugins for TypeScript:

Conclusion

It’s interesting that there seems to be three main approaches to transpiling JavaScript:

  • Parser based on a context-free grammar
  • Self-hosted hand-written parser
  • External language

If someone had showed me TypeScript I would have assumed it was written with a CLR-based language, so it’s cool that it’s self-hosted and able to easily run without Microsoft’s development tools.

TypeFramework: A TypeScript Web Framework

23 Jul 2014 | By Alex Young | Comments | Tags typescript languages microsoft

This week on DailyJS every post is about TypeScript! This post is about TypeFramework, a possibly Rails inspired web framwork aimed at TypeScript developers.

One of the aims of TypeScript is to help you write large applications. In Node, the popular idiom is “small modules” – programs are composed from small packages with APIs based on patterns found in Node’s core modules. That means EventEmitter, streams, callbacks with the error-first signature, and modules that return a single function.

This can work well, but people still seem to struggle to maintain larger web applications. Surely a TypeScript MVC framework offers insights on how to structure larger projects?

TypeFramework (GitHub: zekelevu / typeframework, License: MIT, npm: typeframework) by Zeke Kievel is built on Express. It has controllers, models, views, routing, and configuration. The models are based on the Waterline ORM, and they look like this:

class User extends TF.Model {
  name: string;
  email: string;
  age?: number;
}

app.addModel(User);

The chainable API is quite nice:

User.find()
  .where({ name: 'John' })
  .skip(10)
  .limit(5)
  .done((err, users: User[]) => { /* callback */ });

Everything looks very much like a lightweight Rails. It will probably help C# developers who want to write things that run on Node, or Rails developers who are transitioning to Node.

What I’d really like to see is a more MVVM-style framework with interfaces for code contracts, services, and ReactiveUI-style APIs. I’d prefer skinny models so I can avoid putting business logic in them and use my own persistance layer. I think TypeScript is perfectly suited to this, but I haven’t yet found such a framework.

TypeScript Week

22 Jul 2014 | By Alex Young | Comments | Tags typescript languages microsoft

This week on DailyJS every post is about TypeScript! The first post introduces the language, and the growing TypeScript community.

TypeScript might not be as popular as CoffeeScript, but it seems to be catching on with a highly productive niche of developers that are building interesting open source projects. TypeScript is very much of the new school of Microsoft developers: it embraces Node, open standards, open source, while building on interesting influences from Microsoft Research and .NET.

If you’re excited by technologies like C# 5.0’s asynchronous support and ReactiveUI, then TypeScript will help you to be more productive with JavaScript. There’s even Visual Studio support! If you’re from a JavaScript client-side or server-side background, however, then it might be harder to appreciate why TypeScript is interesting.

The first thing to consider is that TypeScript adopts ideas from ECMAScript 6, while compiling down to ES3. This includes features like classes, modules, and a succinct lambda syntax:

var deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  cards: Array(52),
  createCardPicker: function() {
    return () => {
      var pickedCard = Math.floor(Math.random() * 52);
      var pickedSuit = Math.floor(pickedCard / 13);
      return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
    }
  }
}

In this example, the lambda is introduced with () =>. This should be familiar to C# developers, but for the rest of us it feels quite new. There’s a subtle difference to using function() {}, however – lambdas capture this in a more intuitive way than standard JavaScript. In this example, this.suits is possible because the lambda binds to the containing object rather than window.

TypeScript allows you to write classes with the class keyword and inherit with the extends keyword. There’s more, though: generics are supported. Again, the syntax looks like C#, using angle brackets to denote the generic type parameter:

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

var myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

C# is statically typed, which means… I’m not really qualified to go into a discussion about type systems, so here’s a quote from MSDN:

C# is a strongly-typed language. Every variable and constant has a type, as does every expression that evaluates to a value. Every method signature specifies a type for each input parameter and for the return value. The .NET Framework class library defines a set of built-in numeric types as well as more complex types that represent a wide variety of logical constructs, such as the file system, network connections, collections and arrays of objects, and dates. A typical C# program uses types from the class library as well as user-defined types that model the concepts that are specific to the program’s problem domain.

When working with C#, the IDE is able to infer a huge amount of information about your classes and methods. It scales up nicely on large projects, which means you can be productive despite the build/run cycle.

In fact, TypeScript was inspired by the need to develop tools for using JavaScript on large projects within Microsoft. That means to use TypeScript you’ll have to get used to thinking about types, but it has benefits for writing code that can be partially verified by a compiler, and adhere to contracts (defined by “interfaces”).

To interoperate with JavaScript libraries, TypeScript supports hybrid types. You can even write your own declaration files that tell the TypeScript compiler how to handle a JavaScript library.

With classes, modules, lambdas, and type hints, you might be wondering how TypeScript will fit in with the future of JavaScript now that we know some of these things are coming to ES6. Apparently Microsoft have stated that TypeScript will be adapted as JavaScript changes. I don’t know what kind of backwards incompatibilities this might cause, so it’ll be interesting to see how they handle updates to the language specification.

I’ve seen a lot of negative press about Windows 8 and Microsoft’s mobile efforts, but if you’re completely outside of the Microsoft ecosystem then I think you should learn more about TypeScript. Microsoft have contributed to Node, and the adoption of asynchronous and reactive programming in C# has transformed how people write software for Microsoft’s platforms. The developer tools, languages, and libraries are worth learning about and may help you to write better JavaScript in general. Don’t write them off just because it’s fashionable to complain about Modern UI!

If you’re still confused about TypeScript, get started on the Wikipedia page. It introduces some history behind the language. For more about the language, see the language spec. You can also find tutorials on typescriptlang.org, and I found the handbook useful for mentally mapping between JavaScript, C#, and TypeScript.

Simplifying Conditional Statements with Is

21 Jul 2014 | By Alex Young | Comments | Tags modules libraries functional

Is (GitHub: jumpkick-studios / Is, License: MIT) by Alex Bogartz cuts down conditional statements with a more declarative API. It’s inspired by the Maybe monad pattern.

The author compares a lengthy, nested conditional statement to his chainable alternative:

new Is(foo)
  .isLongerThan(0)
  .equals('bar')
  .not().equals('bar2')
  .then(() => {
    console.log('success')
  })
  .catch(() => {
    throw new Error('bad foo');
  });

The main library’s source and tests are written with TypeScript, which means it looks very similar to standard JavaScript with the addition of type hints and succinct lambda expressions. You don’t have to use TypeScript to use it, but I think it reads quite nicely that way.

One nice feature of this library is you can avoid the need for checking for undefined values. For example, given var foo = { bar: undefined }:

new Is(foo.bar)
  .isLongerThan(3)
  .catch(() => {
    console.log('Please provide "bar"');
  })

The code in catch will run even if foo.bar is undefined.

Undo with Object.observe

18 Jul 2014 | By Alex Young | Comments | Tags libraries browser dom

Polgár András sent in LazyJsonUndoRedo (GitHub: azazdeaz / LazyJsonUndoRedo, npm: lazy-json-undo-redo, Bower: LazyJsonUndoRedo), which uses ES6’s Object.observe to bless undo and redo support on arbitrary JavaScript objects. That means if you’ve got a rich UI component you can add intuitive undo support.

There’s a demo that shows a graphical maze which supports undo and redo that illustrates the concept nicely. It sets the maze’s map object to use LazyJsonUndoRedo, and whitelists some special objects:

var ljur = new LazyJsonUndoRedo();
ljur.setWhitelist(map, ['data', 'objectMap', 'objectData', 'width', 
  'height', 'name', 'gridSize', 'showGrid', 'showWalls']);
ljur.observeTree(map);

var gui = new dat.GUI();
gui.add({ undo: function() { ljur.undo(); } }, 'undo');
gui.add({ redo: function() { ljur.redo(); } }, 'redo');

Object.observe is supported in the latest stable Chrome, and there’s a Polymer shim for older browsers. The shim should work in IE 9 and above.

Internally, LazyJsonUndoRedo uses an array to store changes and a pointer so objects can be fetched as required.

DOM Manipulation with Cash

17 Jul 2014 | By Alex Young | Comments | Tags libraries browser dom

Cash (GitHub: sudo-js / cash, License: MIT) by Rob Robbins at TaskRabbit, is a lightweight library for working with the DOM. It uses $ to provide access to an abstracted NodeList. It’s chainable, and supports events, CSS manipulation, and attributes.

For example, given var things = document.querySelectorAll('div'), you could change the class attributes like this:

$(things).q.forEach(function(el) { el.classList.remove('example'); });

Or add an event handler:

$(things).on('click', function() {
  // One of the things was clicked
});

The init method that runs whenever you call $() checks to see if the argument is an array, NodeList, or HTMLCollection. When it’s not an array, slice.call is used to map the elements to an array. The idea is to make this method as fast as possible so it’s safe to call it whenever you need access to a list of elements.

The new TaskRabbit site has been developed using micro libraries, and this is the library they used make working with the DOM more succinct. If you go to taskrabbit.com you should be able to run something like $(document.querySelectorAll('p')).q to see it in action.

If you’re avoiding larger frameworks and trying to find the perfect DOM querying and manipulation library, then take a look at the source – it’s fairly easy to see what’s going on. There’s annotated source, and the project itself is fairly easy to read because it uses a Node build script to generate the final framework from separate files. There are even detailed tests in the spec directory.

Node Roundup: npm CLI Roadmap, Nodemailer, Jasmine-Utils

16 Jul 2014 | By Alex Young | Comments | Tags node npm modules libraries jasmine testing email

npm CLI Roadmap

On the npm blog, there’s a post about the command-line tool’s roadmap:

The first piece of redesign work we’re tackling is the npm cache. … The next goal is to turn it into a module with no dependencies on the rest of npm or npmconf and to test the heck out of it. As npm moves to being a part of the toolchain of front-end developers (who are more interested in shipping features than figuring out what’s going on with their OS), it’s time to work on making npm easier to understand when things go wrong.

The article also mentions a better search interface, which I’d like to see because the current CLI search implementation is inflexible. It’s interesting to read about how the project is evolving away from Isaac’s original lightweight implementation intended for experts – the team behind the project has recognised that npm is used by a diverse range of developers.

Nodemailer

Nodemailer (GitHub: andris9 / Nodemailer), License: MIT, npm: nodemailer 1.0 is out! This is a complete rewrite, and partly breaks backwards compatibility so you may need to upgrade carefully:

The new version allows you to write custom plugins for manipulating the outgoing messages. It is also possible to send huge attachments with ease (in the size of tens of gigabytes) thanks to the Streams2 support - even though no one probably needs to send such attachments since probably no e-mail server would accepts these.

Jasmine-Utils

Jasmine-Utils (GitHub: mjeanroy / jasmine-utils, License: MIT, npm: jasmine-utils) by Mickael Jeanroy is a set of custom matchers for Jasmine. They’re grouped around types, like toBeABoolean and toBeDateBefore. Methods are included for booleans, strings, arrays, dates, objects and functions:

it('should check that an object contains keys', function() {
  var obj = {
    id: 1,
    name: 'foo'
  };

  expect(obj).toHaveKeys('id', 'name');
  expect(obj).not.toHaveKeys('foo', 'bar');
});

It also includes some handy spy methods, like jasmine.spyAll and jasmine.spyIf. These allow objects to be watched to ensure the expected methods are run.

The project includes a huge amount of matchers, so if you’re using Jasmine you may want to check it out.

VanillaMasker, jsTag

15 Jul 2014 | By Alex Young | Comments | Tags jquery angularjs ui

VanillaMasker

VanillaMasker (GitHub: BankFacil / vanilla-masker, License: MIT) by Caio Ribeiro Pereira is a small library for masking input elements with formats. It supports money, numbers, and custom patterns.

For example, a simple date mask would look like this:

masker.toPattern(12122000, "99/99/9999");

It doesn’t have any dependencies (hence “vanilla”), unless you want to build it locally.

jsTag

jsTag (GitHub: eranhirs / jsTag, License: MIT, Bower: jsTag) by Eran Hirsch is an AngularJS library for handling rich tag input fields. To use it, add a js-tag element to your HTML, and then add the js-tag-options directive for specifying a placeholder and default tag values.

You can also access it in JavaScript like this:

demoApp.controller('CustomizedController', ['$scope', function($scope) {
  // Export jsTag's options
  $scope.jsTagOptions = {
    'texts': {
      'inputPlaceHolder': 'Type text here'
    },
    'defaultTags': ['Default Tag #1', 'Default Tag #2']
  };
}]);

The documentation includes an example of using it with Twitter’s typeahead.js project.

An Alternative to AMD: CMD

14 Jul 2014 | By Alex Young | Comments | Tags modules amd harmony

By now most of us use AMD or CommonJS as our module API. With Harmony on the horizon, there doesn’t seem to be much need to innovate where libraries like RequireJS have established a niche. Despite this, John Wu sent me his module loader that can be found in his project wd.js.

This approach uses a chainable API which allows modules to be loaded asynchronously in a browser-friendly way, without AMD’s less fluent syntax:

wd.module('core.util')
  .require('core.bar')
  .require('core.foo')
  .body(function() {
    // foo and bar are now loaded
  });

John calls this style CMD, which stands for Chainable Module Definition. Although it seems like an obvious idea, it’s new to me and I think it fits in well with other modern JavaScript libraries.

Route360, ngVideo

11 Jul 2014 | By Alex Young | Comments | Tags maps video angularjs

Route360

Route360

The Route360 JavaScript API (GitHub: route360 / r360-js, License: MIT, Bower: route360) by Henning Hollburg and Daniel Gerber is a library for Leaflet that adds some cool features:

  • Generate polygons for reachable areas based on a point on the map
  • Supported for walk, car, bike and transit routing
  • Map controls: travel time slider, date and time chooser, and travel type chooser
  • Routing information from source to destination, including travel time and transit trips
  • Support for elevation data

This is a snippet of the polygon API:

var cpl = r360.route360PolygonLayer();
map.addLayer(cpl);

var travelOptions = r360.travelOptions();
travelOptions.addSource(marker);
travelOptions.setTravelTimes([300, 600,900, 1200, 1500, 1800]);

r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
  cpl.addLayer(polygons);
  map.fitBounds(cpl.getBoundingBox()
});

ngVideo

ngVideo (GitHub: Wildhoney / ngVideo, License: MIT) by Adam Timberlake is a set of AngularJS directives for working with video. Videos are wrapped in an ng-video container:

<section class="video" ng-video>

And should contain a video element. It includes a service which you can use to attach videos:

myApp.controller('VideoController', ['$scope', 'video', function($scope, video) {
  video.addSource('mp4', 'http://www.example.com/alice-in-wonderland.mp4');
}]);

The project includes a lot of other directives for handling buffering, UI controls, data about play position and elapsed time, full screen support, and playlists.

TweetNaCl.js

10 Jul 2014 | By Alex Young | Comments | Tags cryptography modules libraries

TweetNaCl.js (GitHub: dchest/tweetnacl-js, npm: tweetnacl) is a JavaScript port of TweetNaCl – a cryptography library in 100 tweets.

NaCl in this case isn’t Google Native Client or sodium chloride, but a library for fast cryptographic operations. TweetNaCl builds on it to implement an auditable high-security cryptographic library. There’s a paper on it with more details.

TweetNaCl.js is interesting because it ports all of this to JavaScript, using the new 64-bit TypedArray APIs, like Float64Array. It implements secret-key authenticated encryption, public-key authenticated encryption, hashing, and public-key signatures.

One of the authors, Dmitry Chestnykh, said this about the library:

It’s not a toy crypto library: the underlying primitives are djb’s (https://en.wikipedia.org/wiki/Daniel_J._Bernstein) XSalsa20, Poly1305, Curve25519, and Ed25519, which are used OpenSSH and draft TLS (http://googleonlinesecurity.blogspot.com/2014/04/speeding-up-and-strengthening-https.html5).

You can install it with npm or Bower. As far as usage goes, I’ve been looking at the code in the tests to get a feel for how it works, but there’s documentation in the readme as well:

test('nacl.sign and nacl.sign.open specified vectors', function(t) {
  specVectors.forEach(function(vec) {
    var keys = nacl.sign.keyPair.fromSecretKey(dec(vec[0]));
    var msg = dec(vec[1]);
    var goodSig = dec(vec[2]);

    var sig = nacl.sign(msg, keys.secretKey);
    t.equal(enc(sig), enc(goodSig), 'signatures must be equal');
    var openedMsg = nacl.sign.open(msg, sig, keys.publicKey);
    t.equal(enc(openedMsg), enc(msg), 'messages must be equal');
  });
  t.end();
});

Node Roundup: newspeak, CatchMe, Catnap

09 Jul 2014 | By Alex Young | Comments | Tags node npm modules email REST

newspeak

newspeak (GitHub: yoshuawuyts / newspeak, License: MIT, npm: newspeak) by Yoshua Wuyts is a module inspired by Mozilla’s L20n project:

L20n is a new localization framework developed by Mozilla for the Web. It allows localizers to put small bits of logic into localization resources to codify the grammar of the language.

The following example is a small pluralisation helper:

var newspeak = require('newspeak');
l20n.currentLanguage('nl');
var l20n = newspeak({ language: 'nl', gender: 'male' });

var data = {
  users: function(obj) {
    if (0 === obj.count) return 'nobody';
    if (1 === obj.count) return 'someone';
    return ' people';
  }
};

l20n.register({ nl: data });
l20n.get('users', { count: 3 });

CatchMe

CatchMe (GitHub: Pentiado / catch-me, License: MIT, npm: catch-me) by Paweł Wszoła is another Node SMTP server that captures emails. This one has a nice web interface, and can validate email with Campaign Monitor.

It accepts command-line arguments for defining the web and SMTP ports: catchme --mailPort 1234 --appPort 4321

Catnap

Catnap (GitHub: mikaa123 / catnap, License: MIT, npm: catnap) by Michael Sokol is an Express-compatible module for generating REST resources:

var makeResource = require('catnap').makeResource;

var userResource = makeResource('user', '/users/:userId')
  .representation(function(user) {
    // The default representation. Returns a full representation of user
    return user;
  })
  .representation('partial', function(user) {
    // A named representation that returns a partial representation
    return pick(user, 'username', 'email');
  })
  .get(function(req, res) {
    // Action methods take standard middleware.
    User.findOne({ _id: req.params.userId }, function(err, user) {
      user && res.send(200, userResource(user));
    });
  })
  .attachTo(app);

There’s a wiki with documentation that explains how the module relates to Roy Fielding’s dissertation:

So in other words, a resource is some service that lives at a URI and that has one or more representations. In order to interact with a resource, we need to use an HTTP request method, you know, GET, POST, PUT, PATCH and DELETE. These methods have a lot of semantics baked in! For example, when we GET /users/123, we are asking for the representation of the user who’s id is ‘123’. This HTTP transaction (request-response) is called an action.

Autobahn|JS

08 Jul 2014 | By Alex Young | Comments | Tags events pubsub servers node

Autobahn

Autobahn|JS (GitHub: tavendo / AutobahnJS, License: MIT, npm: autobahn) is an implementation of a protocol that supports RPC and PubSub that runs over WebSocket, with fallbacks for older browsers.

The PubSub model supports topics, and uses a promise-based API:

// Subscribe to a topic
session.subscribe('com.myapp.topic1', onEvent).then(
  function(subscription) {
    console.log('Subscribed:', subscription);
    currentSubscription = subscription;
  },

  function(error) {
    console.error('Error:', error);
  }
);

The support for RPC is based on a router, where routes are represented as strings. Registering a remote procedure also uses a promise:

// Define the remote procedure
function utcnow() {
  var now = new Date();
  return now.toISOString();
}

// Register the remote procedure with the router
session.register('com.timeservice.now', utcnow).then(
  function(registration) {
    console.log('Procedure registered:', registration.id);
  },
  function(error) {
    console.error('Registration failed:', error);
  }
);

You can call this remote procedure with session.call('com.timeservice.now'), which again returns a promise.

To use Autobahn, you also need an application router. The documentation mentions Crossbar.io. This allows you to create distributed server applications, so you could route between backends running on different platforms. Authorization is supported, so you can limit access to server-side resources.

The project is based on an open protocol called WAMP (Web Application Messaging Protocol). Other WAMP implementations include Autobahn|Android and wampy.js.

Registering Angular.js Components, ChainyJS

07 Jul 2014 | By Alex Young | Comments | Tags angularjs articles modules libraries data flow-control

Registering Angular.js Components

In Registering Angular.js Components without Hassle, Konstantin Raev discusses a way to automate component registration in AngularJS. The solution is based around Require.js and gulp.js, and he even has examples in TypeScript.

It goes against AngularJS’s design a little bit, but the author is obviously experienced with inversion of control containers so he’s adopted an approach that might be more familiar to Java or C# developers.

ChainyJS

ChainyJS (GitHub: chainyjs / chainy, License: MIT, npm: chainy) is a library for handling data in a similar way to jQuery’s DOM API. The author has published an introductory talk, and the GitHub wiki has documentation for each of the main features.

Chainy supports some built-in data flow actions: set, action, done, and map. You can use them like this:

require('chainy').create().require('set map')
  // Set the chain's data to an array of two items
  .set(['some', 'data'])
  .map(function(itemValue) {
    // Capitalize each item
    return itemValue.toUpperCase();
  })
  .action(function(currentChainValue) {
    // Join the chain's data and add an exclamation
    return currentChainValue.join(' ') + '!';
  })
  // Handle an error (if applicable), and log the output
  .done(function(err, resultChainValue) {
    if (err) throw err;
    console.log('result:', resultChainValue);
  });

The map and action methods can be asynchronous – just include an extra argument to get a callback.

The map method is actually a plugin. Plugins are extensions that extend API calls. You can bundle plugins using the Chainy command-line tool, and npm peerDependencies can be used as well.

Powered by JavaScript Conference

04 Jul 2014 | By Alex Young | Comments | Tags events

Powered by JavaScript

Powered by JavaScript is a conference organised by Manning, the publisher of my book Node.js in Practice. My co-author, Marc Harter, is speaking, along with Tim Caswell and Ben Acker. For a full list of speakers see http://www.manning.com/poweredbyjavascript/.

The conference will be held in St. Louis on September 17, 2014. Early bird tickets are $250, and tickets at the door will be $500.

Manning are looking for sponsors, and there’s a PDF with more details.

Moving Atom To React

03 Jul 2014 | By Alex Young | Comments | Tags reactive atom

There’s a post on the Atom blog about some performance improvements that you can optionally enable: Moving Atom To React. It discusses how Facebook’s React library was used to improve the performance of the text editing component:

Right out of the box, React’s virtual DOM got us a long way toward our goal of treating the DOM with kid gloves. Though we worked with raw DOM nodes in a few places for performance and measurement reasons, it offered a declarative abstraction that relieved us of the tedious state management typically associated with DOM updates. In addition, React’s well-defined reconciliation strategy and lifecycle hooks made it easy to reason about the sequencing of the manual DOM interactions we did have to perform.

With the React editor, these kinds of changes can now be performed with the new decorations API. Decorations allow metadata to be associated with markers, instructing the editor to render classes on lines and line numbers, or draw highlight regions. Using decorations is faster and more convenient than manual DOM interactions, and we plan on introducing more APIs for common DOM interactions going forward.

This highlights several things that React is good at:

  • It’s relatively small and self-contained, so you can drop it into an existing project
  • The virtual DOM is fast
  • It helps to improve managing state

I’ve been using Knockout for a while now, and I’m even thinking about using RxJS for some projects. However, after reading this I think a combination of Knockout and React might work well for the messier parts in my Knockout view models that deal with the DOM.