modern tools

for the modern web developer

Josh Peterson @jm_peterson   /   Gavin Rehkemper @gavinrehkemper

ES2015 & TypeScript

(and tools you need to use them)

Questions answered:

What are ES2015 & Typescript?

Why are they important?

What can I do with them?

How can I use them today?

ES2015

What is it?

ECMAScript

"The Language of the Web"
(specification implemented by JS)

ES2015 / ES6 / ESHarmony

The 6th and current version of ECMAScript

Why is ES2015 important?

Because it's JavaScript.

which is the language of the web, remember?

Also, because Crockford said so.

Modern frameworks are lean.

Let's look at some trends...

Ember's approach to ES2015 (use modules)

React's approach to ES2015 (use modules + classes)

React's philosophy

What can I do with it?

A few of my favorite (ES2015) things...

Arrow Functions

function Person() {
  var self = this; // might also dojo/_base/lang or $.proxy
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}
					

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // `this` refers to Person
  }, 1000);
}
var p = new Person();
					

Template Strings

sayHello(person) {
  return 'Whats up' + person + '!';
}
					

sayHello(person) {
  return `Whats up ${person}!`;
}

let comment = `In ES2015 this is
totally legal!`
					

Modules

export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
					

import * as math from 'lib/math';
alert('2π = ' + math.sum(math.pi, math.pi));
					

import { sum, pi } from 'lib/math';
alert('2π = ' + sum(pi, pi));
					

Classes + Inheritance

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}
					

But wait, there's more!

How can I use it today?

So how can we use ES2015 today?

Using Transpilers in Your Workflow

ES2015 Demos

• Traceur
• Babel + NPM Scripts
• Babel + Browserify
• Babel + Webpack
• Babel + Webpack (advanced)
• Babel + Grunt + Dojo Build

TypeScript Features

Type Annotations

ES2015:

function greet(name, age) {
	return `Hello,  ${name}, you are ${age} years of age.`;
}
					

TypeScript:

function greet(name: string, age: number) {
	return `Hello,  ${name}, you are ${age} years of age.`;
}
					

Interfaces

Interfaces

TypeScript (no interface):

function greet(person : {name: string, age: number}) {
    return `Hello,  ${person.name}, you are ${person.age} years of age.`;
}

var user = {name: "Jack White", age: 40};
document.body.innerHTML = greet(user);
					

TypeScript:

interface Person {
    name: string;
    age: number;
}

function greet(person : Person) {
    return `Hello,  ${person.name}, you are ${person.age} years of age.`;
}

var user = {name: "Jack White", age: 40};
document.body.innerHTML = greet(user);
					

Additional Features

• Access Modifiers
• Decorators
• Abstract classes
• Namespace (Module)
• Enums
• Generics and Static typing
• Optional properties and arguments
• Function overloads

Interested in TypeScript?

Using TypeScript with ArcGIS JS API Development
Mojave Learning Center, Thursday at 5:30 pm

Thank you!

Any Questions?