Title Text

ES6 JAVASCRIPT

About Me

Austin McDaniel

Chief Architect at

Twitter: @amcdnl

Github: amcdnl

LinkedIn: amcdnl

Want a cooler job? Heather on LinkedIn

Github

Code Example: github.com/amcdnl/es6preso

Try it online: es6fiddle.net

Were gonna chat about...

• New Language Features ( Classes, Arrow, etc )
• Module Loader
• Using it today!

What is it?

ECMAScript 6 is a upcoming language update to JavaScript's standards.  Its in the final stages of review and will be out Q1 2015.

With a few exceptions, its mainly just sugar syntax that simplifies a lot of the code we already do today or [insert today's favorite framework] supplements.

What about???

Language Features: Classes

ES6 classes are syntactical sugar for todays Objects and prototypes.  

They offer a nice, cleaner, and clearer syntax for creating/extending objects.

Language Features: Basic Classes

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

var animal = new Animal('Abby');
animal.name === 'Abby';

Language Features: Extending Classes

class Animal {
  constructor(name) {
    this.name = name;
  }
  talk(msg){
    alert(this.name + ' says ' + msg);
  }
}

class Panda extends Animal {
  talk(msg) {
    super(msg);
  }
}

var panda = new Panda('Abby');
panda.talk('hi'); //-> 'Abby says hi'

Language Features: Default Parameters

class Animal {
  constructor(name) {
    this.name = name;
  }
  talk(msg){
    alert(this.name + ' says ' + msg);
  }
}

class Panda extends Animal {
  talk(msg = 'hi') {
    super(msg);
  }
}

var panda = new Panda('Abby');
panda.talk(); //-> 'Abby says hi'
panda.talk('moo'); //-> 'Abby says moo'

Language Features: Arrow Functions

• Similar to C#/Java/CoffeeScript implementation.
• They support both expression and statement bodies
• Supports lexical this binding
• No constructors

Language Features: Arrow Functions

// ES5

var x = function(x){
    return x + 1
};


var x = function(x, y){
     return {
        x: x,
        y: y
    };
};

// ES6 

let x = (x) => { 
    return x + 1 };


let x = (x,y) => ({
    x: x,
    y: y
})

Language Features: Iterators & Generators

• Iterators give us a new way to loop / iterate
• Generators are convenient way of creating iterator factories

Language Features: Iterators

// ES5

var arr = [ "a", "b", "c" ]

arr.forEach(function(r) {
    console.log(r);
});

// "a"
// "b"
// "c"

// ES6

var arr = [ "a", "b", "c" ]

for(let el of arr){
    console.log(el);
}

// "a"
// "b"
// "c"

Language Features: Generators

// ES5

function count(n){
  var res = []
  for (var x = 0; x < n; x++) {
    res.push(x)
  }
  return res
}

for (var x of count(5)) {
  console.log(x)
}

// ES6

function* count(){
  for (var x = 0; true; x++) {
    yield x
  }
}

for (var x of count()) {
  console.log(x)
}

Module Loaders

Package your code for easy injection!

Module Loaders

Most small projects, just load the script/css files in the html file.  

Taking it a step further some people concat and compile to one file for optimization with things like Gulp and Grunt.

Module Loaders

Larger projects are hard to deal with because you typically have:

• Lots structure and organization
• Complex dependency structures
• Large download sizes

Module Loaders

AMD vs CommonJS vs ES6 Modules

AMD ( RequireJS )

Async Module Definition, non-blocking.

define(['jquery', 'angular'], 
    function($, angular){
        return $('.zoo').text();
    });

CJS ( Browserify & Webpack )

synchronous thus blocking but easy to read

var $ = require("jquery");
var angular = require("angular");

ES6 Modules

Async but easy to read :)

import $ from 'jquery';
import angular from 'angular';

ES6 Modules

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


// app.js
import {sum, pi} from "math";
alert("2π = " + sum(pi, pi));


// otherapp.js
import * as math from "math";
alert("2π = " + math.sum(math.pi, math.pi));

ES6 Modules

Soooo... When can I use this?

Transpilers

Transpilers turns ES6+ code into vanilla ES5, so you can use next generation features today.

Automation

Gulp and Grunt help to automate the trans-compiling tasks.

Gulp Example

gulp.task('es6', function () {
  return gulp.src(path.source)
    .pipe(sourcemaps.init())
    .pipe(to5(compilerOptions))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(path.output))
});

Module Loader Polyfill

SystemJS inside JSPM is a browser module loader system that supports all module formats including ES6.

DEMO