Node.js

• Manage Packages with NPM

• Start a Node.js Server

• Continue working with Node.js Servers

• Express routing

• Build Web Apps with Express.js

Nodejs

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 

Managing Packages

> npm init
> npm install --save loadash
> npm install --save-dev eslint
> npm install -g nodemon

start Nodejs Server

$ mkdir myapp
$ cd myapp
$ npm init

entry point: (index.js)

$ npm install express --save

Continue Nodejs Server

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Express routing

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.post('/', function (req, res) {
  res.send('Got a POST request');
});

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

Building web apps with Express

$ npm install express-generator -g

$ express myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

Exercise

Create a new express application using the express generator and change the app to display welcome to CreditKarma

Tools

• npm run
• Debugging
• Linting

npm run

Using the scripts section of package.json is the idiomatic way to document and run common commands

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "debug": "DEBUG=myapp:* npm start"
  },

> npm run debug

npm run

You can see a list of run commands with

> npm run

Debugging

> node-inspector

> node --debug-brk todo.js

Linting

> npm install --save-dev eslint
> touch .esintrc
> open .eslintrc
> eslint todo.js

{
    "env": {
        "es6": true,
        "node": true,
        "browser": true
    },
    "extends": "eslint:recommended",
    "globals": {
      "define": true
    }
}

ES2015

• Block scoping with let & const

• Classes

• Arrow functions

• template strings

• modules

• promises

Block scoping with let & const

ES2015 allows you to scope at the block-level using let & const.

let foo = 'JS';
console.log(foo); // Prints 'JS'
if(true){
  let foo = 'BAR';
  console.log(foo); // Prints 'BAR'
}
console.log(foo); // Prints 'JS'

classes

ES2015 introduces syntactical sugar to make it easier for developers. The new keywords introduced are class, constructor, static, extends, and super.

class Dog {
  constructor(name) {}
  bark() {
    console.log("bark");
  }
}

class Poodle extends Dog {
  constructor(color, name) {
    super(name);
  }
  bark() {
    super.bark();
    console.log("wooooof");
  }
}

Arrows and Lexical This

Arrows are a function shorthand using the => syntax. Unlike functions, arrows share the same lexical this as their surrounding code.

// Lexical this
var bob = {
  name: "Bob",
  friends: [],
  printFriends() {
    this._friends.forEach(f => console.log(this.name + " knows " + f));
  }
};

Modules

Language-level support for modules for component definition.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));

Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future.

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

Homework

• Exercise

• TypeScript

• Babel

Exercise

Create a node application that has:

• An api class that is exposed as a module.  The api class should make a request to an address that is passed to it and return the body.  
• The node application should import the api module, and use the api class to call the node server created in the previous exercise, and log out the body that is returned.

Use must use es2015 with at least:

modules, classes, promises and arrows

Hint:

Use nodejs.org to find a fetch module that you can use in your api class.

TypeScript

Provides type definitions and Es6 Compiler

http://www.typescriptlang.org/

Babel

Babel is a JavaScript compiler
to use next generation JavaScript, today.

https://babeljs.io/