Node.js 16

and Modern JavaScript

JaxNode May 2021

About Me

fek.io/blog

youtube.com/c/polyglotengineer

github.com/davidfekke

@jaxnode @polyglotengine1

Node 16

  • Node 14 LTS
  • Can use Node 16 for R&D
  • Use Node LTS for Production

Node 16 Features

  • Apple ARM64 support
  • New V8
  • New Regex functions
  • Stable Timer Promises API
  • Web Crypto API
  • New Node-API C methods
  • AbortController API
  • atob and btoa support
  • Source Maps v3

Apple Silicon M1

  • Build group has installers for Node 16
  • .pkg installer installs Universal Binary
  • Previous versions could use Rosetta 2
  • NVM installs arch specific

V8 9.0

  • New Regex Indices /d
  • Faster Js-to-Wasm calls
  • Use experimental --turbo-inline-js-wasm-calls

Stable Timer Promises

  • Exists under 'timer/promises'
  • Use this for using timers within Async/Await
import { setTimeout } from 'timers/promises';

async function doSomething() {
  console.log('doSomething started!');
  await setTimeout(2000);
  console.log('Delayed Timers!');
}
doSomething();

Web Crypto API

  • Newer version of the Crypto API
  • All new features under `subtle` interface
  • Many versions of `Crypto` 
  • Standardizing and a single Standard

Web Crypto Example

import { webcrypto } from 'crypto';
const { subtle } = webcrypto;

(async function() {

  const key = await subtle.generateKey({
    name: 'HMAC',
    hash: 'SHA-256',
    length: 256
  }, true, ['sign', 'verify']);

  const digest = await subtle.sign({
    name: 'HMAC'
  }, key, 'I love node.js');

  console.log(digest);
})();

N-API now Node-API

  • The way you extend Node with C/C++
  • napi_add_async_cleanup_hook
  • napi_object_freeze
  • napi_object_seal
  • napi_type_tag_object
  • napi_check_object_type_tag
  • napi_type_tag

AbortController

  • Actually part of Node 15
  • Use { once: true } option in Event Listeners
const abortC = new AbortController();
abortC.signal.addEventListener('abort', () => {
    console.log('Just cancelled')
}, { once: true });
abortC.abort();
console.log(abortC.signal.aborted);

atob and btoa Added

  • atob and btoa added to Node for JS compatibility
  • Used for converting Base64
  • DO NOT USE THESE NEW FUNCTIONS
  • There is a better way
const str = 'Hello JavaScript Developer!';

const strBuf = Buffer.from(str, 'utf8');
console.log(strBuf);
// <Buffer 1d e9 65 a0 96 af 69 27 2b 8a 9b 43 7a f7 a5 a2 97 ab>

const base64Buf = Buffer.from(strBuf, 'base64');
const base64Str = base64Buf.toString('base64');
console.log(base64Str);
// SGVsbG8gSmF2YVNjcmlwdCBEZXZlbG9wZXIh

const bufFromBase64Str = Buffer.from(base64Str, 'base64');

const decodedStr = bufFromBase64Str.toString('utf-8');
console.log(decodedStr);
// Hello JavaScript Developer!
console.log(str === decodedStr);
// true

Other Features

  • npm v7.10.0
  • Source Maps v3
  • process.binding() has been deprecated

Modern JavaScript

JavaScript Has Changed

  • Original version released in 1995
  • Changed name to ECMAScript
  • V3 added Regex
  • V4 was scraped and became ActionScript
  • V5 Added JSON libs, Array functions, 'strict mode' and getters and setters in 2009
  • V6 became ES2015, ES2016
  • ES2017
  • ES2018
  • ES2020 ...

Features since 2015

  • let, const keywords
  • for-of loops
  • arrow functions
  • Promises and async/await
  • import/export syntax
  • ... Spread Operator
  • De-structuring
  • Default Parameters
  • new.target
  • nullish coalescing and optional chaining
num = 5;
console.log(num);
var num; // 5
num = 5;
console.log(num);
let num; // error

var catsname = 'Bebe';

function hoistName() {
    othercatsname = 'Zedadiah';
    console.log(othercatsname); // Zedadiah
    var othercatsname;
}

hoistName(); // Zedadiah
console.log(othercatsname);
// Uncaught ReferenceError: othercatsname is not defined

let and const

  • 'var' will hoist to top of scope
  • 'let' and 'const' will not let you hoist
  • 'const' supposed to be write once, readonly

Object Construction

  • function prototypes
  • Use the 'class' keyword
  • class is controversial
  • factory functions
  • Object Literals
  • Object.create, .assign, .freeze
function Thing(name) {
    this.thingName = name;
    return this;
}

Thing.prototype.getName = function() {
    return this.name;
}

const myThing = new Thing('My Thing');

const currentName = myThing.getName();
// returns 'My Thing';

Prototype

class Thing {
    construtor(name) {
        this.thingName = name;
    }

    getName() {
        return this.thingName;
    }
}

const myThing = new Thing('My Thing');
// returns 'My Thing';

Class

function createThing(name) {
    function getName() {
        return name;
    }

    return Object.freeze({
        name,
        getName
    });
}

const myThing = createThing('My Thing');
// returns 'My Thing';

Crockford Style

// Sample from Wikipedia https://en.wikipedia.org/wiki/ECMAScript
let object = {a: 1, b: 2}

let objectClone = Object.assign({}, object) // before ES9
let objectClone = {...object} // ES9 syntax

let otherObject = {c: 3, ...object}
console.log(otherObject) // -> {c: 3, a: 1, b: 2}
// https://fek.io/blog/8-1-2-ways-to-loop-through-an-array-in-java-script/

const arr = ['First', 2, 3.3, 'Foo', 'Bar'];

//for-in
for (let index in arr) {
  console.log(arr[index]);
}

//for-of
for (let item of arr) {
  console.log(item);
}

For-of

Arrow functions


const prn2 = txt => console.log(txt);

const prn3 = (txt) => {
	console.log(txt);
};

prn1('Hello JaxNode1!'); // Hello JaxNode1!
prn2('Hello JaxNode2!'); // Hello JaxNode2!
prn3('Hello JaxNode3!'); // Hello JaxNode3!

function prn1(txt) {
	console.log(txt);
}

Promises async/await

  • Promises and async and await are interchangeable
  • Error-first functions can easily be converted into promises and used with 'async' and 'await'

var fs = require('fs'),
	rootPath = 'C:\\Users\\dfekke\\Documents\\',
	ext = 'tiff',
	newExt = 'TIF';

fs.readdir(rootPath, 
  function(err, files) {
	if (err) {
	  console.error("unable to read directory");
	} else {
	  var re = new RegExp("^.*\\." + ext + "$");
	  for (var f of files) {
		if (re.test(f)) {
			console.log(f);
			var oldPath = rootPath + f;
			var newPath = rootPath 
              + f.substring(0, f.length - ext.length) 
              + newExt;
			console.log(newPath);
			fs.rename(oldPath, 
					  newPath, 
					  function (err) {
						console.error("unable to rename file");
					});	
				}
			}	
		}
});

Error first callbacks

Convert to Promise

  • Some older APIs do not have Promise support
  • Util.Promisify will convert error-first callbacks
  • let fsP = util.promisfy(fs.readdir);
  • let folders = await fsP(path);
  • import { readdir } from 'fs/promises';
  • let files = await readdir(path);
import * as pkg from 'node-fetch';
const fetch = pkg.default;

const getsomedata = async () => {
    const resp = await fetch('https://reqres.in/api/users?page=2');
    const jsondata = await resp.json();
    const names = jsondata.data.map(item => `${item.first_name} ${item.last_name}`);
    return names;
};

const results = await getsomedata();
console.log(results);

Fetch

import axios from 'axios';

const getsomedata = async () => {
    const resp = await axios.get('https://reqres.in/api/users?page=1');
    const respdata = resp.data;
    const names = respdata.data.map(item => `${item.first_name} ${item.last_name}`);
    return names;
};

const results = await getsomedata();
console.log(results);

Axios

import/export syntax

  • Replaces require()
  • Can use .mjs and .cjs extensions
  • set the 'type' in package.json file to either 'commonjs' or 'module'
  • If you set it to 'module' you module will use 'import' and 'export'
  • Also possible to use `require` and `import` in same file.
const fsPromise = require('fs/promises');
const readdir = fsPromise.readdir;


// Can do the same thing on one line with import syntax
import { readdir } from 'fs/promises';


// Can use both at the same time
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const talib = require('talib');
console.log("TALib Version: " + talib.version);
// dataservice.js
import axios from 'axios';

async function getVehicles() {
    const results = await axios.get('https://swapi.dev/api/vehicles/');
    return results.data.results;
}

async function getPlanets() {
    const results = await axios.get('https://swapi.dev/api/planets/');
    return results.data.results;
}

async function getStarships() {
    const results = await axios.get('https://swapi.dev/api/starships/');
    return results.data.results;
}

export { getVehicles, getPlanets, getStarships };

Export

const arr1 = [2, 5, 7, 9];
const arr2 = [1, 3, ...arr1, 8];

console.log(arr2); // [ 1, 3, 2, 5, 7, 9, 8 ]

const [first, second, third] = arr2;
console.log(second); // 3

const obj1 = { f: first, s: second, t: third };
const { f, s, t } = obj1;
console.log(t); // 2

...Spread

function doSomething(greet, time = 3000) {
    setTimeout(() => {
        console.log(`Hello ${greet}`);
    }, time);
}

doSomething('Jaxnode!');
doSomething('Orlando!', 1000);
// 'Hello Orlando!' in 1 second
// 'Hello Jaxnode!' in 3 seconds

Default parameters

function Foo() {
  if (!new.target) 
    throw 'Foo() must be called with new';
  console.log('Foo instantiated with new');
}

new Foo(); // logs "Foo instantiated with new"
Foo(); // throws "Foo() must be called with new"

new.target

undefined ?? "string" // -> "string"
null ?? "string" // "string"
false ?? "string" // -> false
NaN ?? "string" // -> NaN

Nullish coalescing ??

const person = {
	address: {
    	streetnumber: 9080,
    	streetname: 'Simpson St.',
        city: 'Burlington',
        state: 'VT'
    }
};

const zipcode = person?.address?.zipcode;
// Sets to empty value instead of throwing error

Optionals ?.

TypeScript

  • From Anders Hejlsberg, man behind Turbo Pascal, C# 
  • Super set of JavaScript
  • Requires Transpiler like TSC or Deno
  • Allows Data Types for JavaScript
  • Designed for large projects
  • Used with Angular

References

Questions