Timers and ES2015

Note: This post was originally published in August 2015

It's only in the last couple of months that I decided to look a little more seriously at ES2015. For those of you who don't know what I mean, ES2015 is the new ECMAScript specification that offers all sorts of new goodies and syntax. Node.js - my platform of choice - has some limited support built-in already, but not everything. Running ES2015 code in node.js requires transpiling, or the conversion from futuristic sci-fi code to to working, boring code.

A while ago I created the es2015-starter project in which I set up Gulp and Babel. I could use that as a starting point. The best way to learn is by doing (or so I've been told), so I thought of a fun little piece of code to build.

Tick tock

I am sure there are dozens, if not more, timers out there for node.js. So why add another one? Because it's fairly simple to do and I thought it would be nice to try some of the new features in ES2015.

A timer, in this sense, it used to - you guessed it - time something. Measure the execution time of some piece of code, an HTTP request. or network latency. In it's most simple design, it should start when the execution of the code starts and stopped when the execution of the code of interest stops. Then it should give the result. Sounds simple enough.

But first, let's start with a little introduction to one of the new features; Classses.

Class, where have you been?

One of the interesting things in ES2015, are classes. You probably know them from other languages (as do I, from PHP, C#.Net, Java), and they were nowhere to be seen in JavaScript land. Until now.

What does a class look like?

This is a very simple example:

class MyClass {  
  constructor(name) {
    this.name = name;
  }

  salute() {
    return `Hello, ${this.name}!`;
  }
}

As you can see we first get the class keyword, followed by the name of the class. Different from regular functions is the use of the constructor function. This function is called when your class is instantiated (like the body of a regular object).

There is a method called salute. As you can see the string uses back-ticks instead of regular tags. That's because it's a template string. Template strings may look familiar if you've ever worked with templating engines. I won't go into detail about it here, if you want to read more about template strings try this article.

Using classes

If we were to use the class, it would look something like this:

// Instantiate the class
let whoami = new MyClass('Benjamin');

// Outputs 'Hello, Benjamin!'
console.log(whoami.salute());  

That's pretty close to the PHP syntax I remember from before I grew up (professionally speaking, of course). If you want to read more about classes (and other ES2015 features), check out these pages.

Introduction to exporting

In order to be complete, just a small introduction to modules and exporting in ES2015. We all know the require function in node.js. ES2015 introduces a native module system that uses the export syntax. This is an example:

// module.js
export const MY_VAR = 6;

// main.js
import { MY_VAR } from './module';

console.log(MY_VAR * 2); // returns 12  

As you can see you can use the export keyword to - you guessed it - export a variable, method or class. Then, in another file, you can use the import syntax to import one or more exported items from a module. This is only the tip of the ice berg. If you want to know more, check out these pages.

Back to the timer

The simple timer I built can be used to measure execution times and the like. It's designed to be a small and narrow module, focusing on one thing only - timing.

An example says more than a thousand words, so here you can find an example of how to use the timer (in ES5):

var Timer = require('yet-another-timer');

var timer = new Timer();

// Start the timer
timer.start();  
// Simulate some sort of work...
setTimeout(function() {  
    // Work is done
    timer.stop();

    // Display the result
    console.log('Timer ran for %dms', timer.time().toFixed(3));
}, 500);

The module's package.json is set up to use the transpiled version (stored in /dist) by default. The original ES2015 version can be found in the /src directory. The module also includes a gulpfile for easy transpiling if you've made modifications to the ES2015 file.

You can find yet-another-timer on my GitHub page.

comments powered by Disqus