Using ES6/ES2015 in a Node.JS and Express

These are some very minimal changes to the standard express.js generated app.js file. It looks nice, “=>” syntax is getting easier to read the more I use and get used to it. Note: I took out a lot of unrelated code to isolate the topic of the blog. This example is for getting a development, learning environment ready to use Babel.js with Express on the back and front ends.

How’d I do it?

Using Babel’s “babel-node” cli tool, its compiling in real time in the development env. For production, do not use babel-node, you’ll want to compile with Babel.js then run with node. Just use “npm install -g babel-cli” and babel-node is already there and built in.

I also included eslint for good measure. Make sure to “npm install –save-dev babel-eslint” and set the parser to “babel-eslint.”

{

  "parser": "babel-eslint",

  "env": {

  	"node": true,

  	"es6": true

  },

  "rules":{

  	"vars-on-top": 2,

  	"no-undef": 2

  }

}

view raw
.eslintrc
hosted with ❤ by GitHub

"use strict";

import express      from 'express';

import path         from 'path';

import favicon      from 'serve-favicon';

import logger       from 'morgan';

import cookieParser from 'cookie-parser';

import bodyParser   from 'body-parser';

import routes       from './routes/index';

import users        from './routes/users'

//using let

let app = express();

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

app.use(logger('dev'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

app.use('/users', users);

// using arrow syntax

app.use((req, res, next) => {

  let err = new Error('Not Found');

  err.status = 404;

  next(err);

});

if (app.get('env') === 'development') {

  app.use((err, req, res, next) => {

    res.status(err.status || 500);

    res.render('error', {

      message: err.message,

      error: err

    });

  });

}

app.use((err, req, res, next) => {

  res.status(err.status || 500);

  res.render('error', {

    message: err.message,

    error: {}

  });

});

module.exports = app;

view raw
app.js
hosted with ❤ by GitHub

{

  "name": "es6-express",

  "version": "0.0.0",

  "description": "ES6/ES2015 Express Example",

  "repository": "n/a",

  "license": "MIT",

  "author": "Steven",

  "scripts": {

    "lint": "eslint app.js",

    "start": "babel-node ./bin/www",

    "auto-start": "nodemon –exec \"npm run lint && npm start\" –ignore public/js"

  },

  "dependencies": {

    "body-parser": "~1.13.2",

    "cookie-parser": "~1.3.5",

    "debug": "~2.2.0",

    "express": "~4.13.1",

    "jade": "~1.11.0",

    "morgan": "~1.6.1",

    "serve-favicon": "~2.3.0"

  },

  "devDependencies": {

    "babel": "^5.8.21",

    "babel-eslint": "^4.0.10",

    "eslint": "^1.1.0",

    "nodemon": "^1.4.1"

  }

}

view raw
gistfile1.txt
hosted with ❤ by GitHub

What else do you suggest that can I do to the app.js to take advantage ES6 features, without straying too far from the default?

NPM as an automated build system.

I hate having to set up complicated environments. I like JavaScript/Front End Development environments to be:

Easy to understand and follow along for everyone on the team.
Quick to get running and make changes.
Free of having to learn new domain specific or pseudo languages for simple building.

Other platforms, Java or .NET, benefit from IDEs because they follow a predefined path and have a set of best practices defined into the language. The ugliness of JavaScript is why it’s powerful. But it can also lead to a lot of unnecessary reinventing the wheel.

Using NPM to use simpleton and replaceable tools keeps my projects fitting those three points above.

NPM is amazing and powerful. I’ve built three major projects now without Grunt or Gulp, using only NPM and locally installed modules.

npm run [command] [-- <args>]

1	npm run [command] [-- <args>]

The run command lets you run a locally installed module from the command line.

...
"scripts": {
  "test": "mocha test.js"
},
...
"devDependencies":{
  "mocha":"*"
}
...

...

"scripts": {

"test": "mocha test.js"

...

"devDependencies":{

"mocha":"*"

}

...

npm run test

1	npm run test

This runs “mocha test.js”

Scripts can also call one another.

...
"scripts": {
  "test": "mocha test.js",
  "lint": "eslint app.js",
  "check": "npm run lint && npm run test"
},
...

...

"scripts": {

"test": "mocha test.js",

"lint": "eslint app.js",

"check": "npm run lint && npm run test"

...

In this previous example, “npm run check” will execute lint and test.

You can also use other NPM modules to run and watch the app.

For instance, in the following example, I use babel to convert and bundle the files after the lint and test. Then I run nodemon, which I have executing a custom script. Nodemon is also told to ignore the public directory where babel places the bundle. (I learned the fun way that this creates an infinite loop, if you don’t ignore it!)

{

  "name": "npm as a build system example.",

  "description": "This is a simple example of using npm as a build system.",

  "repository": "n/a",

  "license": "MIT",

  "author": "Steven Lacks <snlacks@gmail.com> (https://lookami.com)",

  "scripts": {

    "build": "npm run lint && npm run test && npm run compile-js",

    "compile-js": "babel src –out-file public/js/bundle.js –source-maps inline",

    "lint": "eslint src",

    "start": "http-server -p 3000",

    "test": "mocha",

    "auto-start": "nodemon –exec \"npm run build && npm start\" –ignore public/js"

  },

  "dependencies": {},

  "devDependencies": {

    "babel": "^5.8.21",

    "eslint": "^1.1.0",

    "http-server": "^0.8.0",

    "mocha": "^2.2.5",

    "nodemon": "^1.4.1"

  }

}

view raw
package.json
hosted with ❤ by GitHub

// Example Project's File Structure

//   src/

//   public/

//     js/

//     css/

//     …

//   app.js

//   README.md

//   package.js

//   .eslintrc

//   .gitignore

view raw
z-example-s-file-structure.js
hosted with ❤ by GitHub

Now when I run “npm run auto-start” it won’t just run the lint and tests and launch the app, nodemon will also watch for changes, linting, testing and restarting each time a change is detected.

Building from NPM is incredibly powerful. When I need to change the files or directories, I can do it inside the string. If I want to change the linter, I can change the dependency, and the script for “lint’s” value. Run “npm install” to update the dependencies. Then all the existing “npm run lint” calls will call the new linter. There’s only a tiny amount of configuration and no coding, just a JSON file describing what I want to happen.

Multiple calls to the same NPM module are possible, while using a different command to have different options.

...
"scripts": {
  "lint1": "eslint app.js",
  "lint2": "eslint **/*.js"
},
...

...

"scripts": {

"lint1": "eslint app.js",

"lint2": "eslint **/*.js"

...

Finally, the best part about building with NPM way: All that someone on the team needs to do to include this automation or build this app on another machine is clone the files and run “npm install” to get it up and running (if they have Node installed).

When won’t automated building with NPM work? Well, sometimes I have more complex builds, where one area of code might use one set of tools and another area uses some other tools. Some operations are easier to do asynchronously, rather than through piping stdout. What I’ve found myself doing more, is using NPM for my smaller personal modules and I’m still using grunt for my large projects.

Thanks for reading, if you have any ideas, concerns, or complaints please let me know on twitter @StevenLacks or in the comments.

Chaining and other Practical Uses for Promises for JavaScript (ECMAScript6, ES2015)

Repo on Github here.

Promises are cool. The best source for Promise API basics is still the API documentation on MDN. Well here’s some news. Promises are awesome and really easy to work with. That article will teach you all about the built in methods, like “all” and “resolve”, we’re going to go over some useful techniques that are not built into the Promise object.

First, let’s do a simple promise.

// Create a function to pass the new Promise instance.
// Resolve and reject are how the promise figures out what to do when it's done.
// 
// This is a simple time out.
var promisable0 = function(resolve, reject){
	setTimeout(function(){
		resolve('Hello');
	}, 2000);
};

//Set up the promise, by creating a new instance of Promise passing in our promisable function.

var basicPromise = new Promise(promisable0);

// Create a function we want to execute when that is done. 
// The parameter is the thing you resolved. 

function myFirstThen(result){
	console.log(result);
}

// Now let's use it!

basicPromise.then(myFirstThen);

// Create a function to pass the new Promise instance.

// Resolve and reject are how the promise figures out what to do when it's done.

// This is a simple time out.

var promisable0 = function(resolve, reject){

setTimeout(function(){

resolve('Hello');

}, 2000);

};

//Set up the promise, by creating a new instance of Promise passing in our promisable function.

var basicPromise = new Promise(promisable0);

// Create a function we want to execute when that is done.

// The parameter is the thing you resolved.

function myFirstThen(result){

console.log(result);

}

// Now let's use it!

basicPromise.then(myFirstThen);

What if we want to do something sequentially? Promise.all() waits for all of the promised functions, Promise.race waits for one… but a lot of times, we want to run sequences without losing the benefits of asynchronous code.

var count = 0;

// This example's promisable is the same (with just a different string)
var promisable = function(resolve, reject){
	setTimeout(function(){
		resolve('Working');
	}, 2000);
};

var firstPromise = new Promise(promisable);

// A more complex thenable, returns another promise, each then method makes 
// sure the previous then isn't returning a promise.
// Here, it is, so it waits. If it's not waiting for a Promise to be 
// resolved, these all execute at once.

function thenable(result){
	console.log('| ', count, ' - ', result);
	count++
	return new Promise(promisable);
};

firstPromise.then(thenable).then(thenable).then(thenable).then(thenable);

var count = 0;

// This example's promisable is the same (with just a different string)

var promisable = function(resolve, reject){

setTimeout(function(){

resolve('Working');

}, 2000);

};

var firstPromise = new Promise(promisable);

// A more complex thenable, returns another promise, each then method makes

// sure the previous then isn't returning a promise.

// Here, it is, so it waits. If it's not waiting for a Promise to be

// resolved, these all execute at once.

function thenable(result){

console.log('| ', count, ' - ', result);

count++

return new Promise(promisable);

};

firstPromise.then(thenable).then(thenable).then(thenable).then(thenable);

Next, let’s make it a bit more complex, with issuing the then in the then. Adding the reseting the counter and using our thenableLoop.

| 0 – Working
| 1 – Working
| 2 – Working
| 3 – Working

...

function resetable(result){
	count = 0;
	return new Promise(promisable);
}


function thenableLoop(result){
	// using * character to have a visible difference in output.
	console.log('*  ', count, ' - ', result);
	count++
	if(count < 6) { 
		// here we return a promise and issue the next then to keep the loop going.
		return new Promise(promisable).then(thenableloop); 
	} else {
		console.log('Done');
	}
};
//
firstPromise.then(thenable).then(thenable).then(resetable).then(thenableLoop);

...

function resetable(result){

count = 0;

return new Promise(promisable);

}

function thenableLoop(result){

// using * character to have a visible difference in output.

console.log('* ', count, ' - ', result);

count++

if(count < 6) {

// here we return a promise and issue the next then to keep the loop going.

return new Promise(promisable).then(thenableloop);

} else {

console.log('Done');

}

};

firstPromise.then(thenable).then(thenable).then(resetable).then(thenableLoop);

This outputs like so:

| 0 – Working
| 1 – Working
* 0 – Working
* 1 – Working
* 2 – Working
* 3 – Working
* 4 – Working
* 5 – Working
Done

You can also pass callbacks as promisables…

// Changing the string again in the resolve method in our Promise, 
// for following along.

var promisable2 = function(resolve, reject){
	setTimeout(function(){
		resolve('Still Working');
	}, 2000);
};

var secondPromise = new Promise(promisable2);

function callbackable(callback, result){
	console.log('| ', count, ' - ', result);
	count++;
	return new Promise(callback);
}


// This one binds the callback in the first argument. Leave the 
// context (this) undefined, or pass it a context!
// once it is there, it goes to thenable, which uses our new string 
// that is the result of the promise passed in.

secondPromise.then(callbackable.bind(undefined, promisable2)).then(thenable);

// Changing the string again in the resolve method in our Promise,

// for following along.

var promisable2 = function(resolve, reject){

setTimeout(function(){

resolve('Still Working');

}, 2000);

};

var secondPromise = new Promise(promisable2);

function callbackable(callback, result){

console.log('| ', count, ' - ', result);

count++;

return new Promise(callback);

}

// This one binds the callback in the first argument. Leave the

// context (this) undefined, or pass it a context!

// once it is there, it goes to thenable, which uses our new string

// that is the result of the promise passed in.

secondPromise.then(callbackable.bind(undefined, promisable2)).then(thenable);

That outputs…

| 0 – Still Working
| 1 – Still Working

Keep in mind if we passed in promisable, instead of promisable 2 it would look like this:

| 0 – Still Working
| 1 – Working

Finally, let’s look at binding arguments to the promise…

// Put the arg first, just like the call back in the previous example...
var arguablePromisable = function(arg, resolve, reject){
	setTimeout(function(){
		resolve(arg);
	}, 2000);
};

// Here, we bind it as we pass it
var thirdPromise = new Promise(arguablePromisable.bind(undefined, 'Custom String'));

//
// or before hand...
// var promiseWithArgs = arguablePromisable.bind(undefined, 'Custom String');
// var thirdPromise = new Promise(promiseWithArgs);

// using thenable and callbackable from the previous example.
thirdPromise.then(callbackable.bind(undefined, arguablePromisable.bind(undefined, 'Custom String'))).then(thenable);

// Put the arg first, just like the call back in the previous example...

var arguablePromisable = function(arg, resolve, reject){

setTimeout(function(){

resolve(arg);

}, 2000);

};

// Here, we bind it as we pass it

var thirdPromise = new Promise(arguablePromisable.bind(undefined, 'Custom String'));

// or before hand...

// var promiseWithArgs = arguablePromisable.bind(undefined, 'Custom String');

// var thirdPromise = new Promise(promiseWithArgs);

// using thenable and callbackable from the previous example.

thirdPromise.then(callbackable.bind(undefined, arguablePromisable.bind(undefined, 'Custom String'))).then(thenable);

This outputs:

| 0 – Custom String
| 1 – Custom String

You can have very powerful sequences, with non-blocking IO. This is great for real world applications using ES2015/ES6. You could easily replace our timeouts in these examples with AJAX calls, queries to a datastore, complex DOM interactions, or anything else you might want to ensure is done before executing another set of instructions.

Repo on Github here.

Update: Guatom makes a good point (in the comments below), we’re all more familiar with ES2015 concepts, you can avoid using “bind” by using arrow functions, which keep the context of where the function was called. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

	{
	"parser": "babel-eslint",

	"env": {
	"node": true,
	"es6": true
	},

	"rules":{
	"vars-on-top": 2,
	"no-undef": 2
	}
	}

	"use strict";
	import express from 'express';
	import path from 'path';
	import favicon from 'serve-favicon';
	import logger from 'morgan';
	import cookieParser from 'cookie-parser';
	import bodyParser from 'body-parser';

	import routes from './routes/index';
	import users from './routes/users'

	//using let
	let app = express();

	app.set('views', path.join(__dirname, 'views'));
	app.set('view engine', 'jade');

	app.use(logger('dev'));
	app.use(bodyParser.json());
	app.use(bodyParser.urlencoded({ extended: false }));
	app.use(cookieParser());
	app.use(express.static(path.join(__dirname, 'public')));

	app.use('/', routes);
	app.use('/users', users);

	// using arrow syntax
	app.use((req, res, next) => {
	let err = new Error('Not Found');
	err.status = 404;
	next(err);
	});

	if (app.get('env') === 'development') {
	app.use((err, req, res, next) => {
	res.status(err.status \|\| 500);
	res.render('error', {
	message: err.message,
	error: err
	});
	});
	}

	app.use((err, req, res, next) => {
	res.status(err.status \|\| 500);
	res.render('error', {
	message: err.message,
	error: {}
	});
	});


	module.exports = app;

	{
	"name": "es6-express",
	"version": "0.0.0",
	"description": "ES6/ES2015 Express Example",
	"repository": "n/a",
	"license": "MIT",
	"author": "Steven",
	"scripts": {
	"lint": "eslint app.js",
	"start": "babel-node ./bin/www",
	"auto-start": "nodemon –exec \"npm run lint && npm start\" –ignore public/js"
	},
	"dependencies": {
	"body-parser": "~1.13.2",
	"cookie-parser": "~1.3.5",
	"debug": "~2.2.0",
	"express": "~4.13.1",
	"jade": "~1.11.0",
	"morgan": "~1.6.1",
	"serve-favicon": "~2.3.0"
	},
	"devDependencies": {
	"babel": "^5.8.21",
	"babel-eslint": "^4.0.10",
	"eslint": "^1.1.0",
	"nodemon": "^1.4.1"
	}
	}

	{
	"name": "npm as a build system example.",
	"description": "This is a simple example of using npm as a build system.",
	"repository": "n/a",
	"license": "MIT",
	"author": "Steven Lacks <snlacks@gmail.com> (https://lookami.com)",
	"scripts": {
	"build": "npm run lint && npm run test && npm run compile-js",
	"compile-js": "babel src –out-file public/js/bundle.js –source-maps inline",
	"lint": "eslint src",
	"start": "http-server -p 3000",
	"test": "mocha",
	"auto-start": "nodemon –exec \"npm run build && npm start\" –ignore public/js"
	},
	"dependencies": {},
	"devDependencies": {
	"babel": "^5.8.21",
	"eslint": "^1.1.0",
	"http-server": "^0.8.0",
	"mocha": "^2.2.5",
	"nodemon": "^1.4.1"
	}
	}

	// Example Project's File Structure
	// src/
	// public/
	// js/
	// css/
	// …
	// app.js
	// README.md
	// package.js
	// .eslintrc
	// .gitignore