Tech Talk:

ES6, CoffeeScript and TypeScript

 

Do you like javascript?

javascript:

  • No include
  • "this"
  • Inheritance

Weak Type

 

ES6 to the rescue!

  • ESMAScript 6
  • Finalized June 2015
  • http://es6-features.org

ES6

  • Classes (with extend!)
  • Arrow Functions
  • Modules
  • Block Scoping
  • Promises

Too new, not now.

ES6 compatibility link

http://kangax.github.io/compat-table/es6/


CoffeScript

  • First git commit Dec 2009
  • One-to-one compilation to javascript

 

Functions

square = (x) -> x * x
cube   = (x) -> square(x) * x

Functions

fill = (container, liquid = "coffee") ->
  "Filling the #{container} with #{liquid}..."

You may also have default values for arguments

Objects and Arrays

song = ["do", "re", "mi", "fa", "so"]

singers = {Jagger: "Rock", Elvis: "Roll"}

bitlist = [
  1, 0, 1
  0, 0, 1
  1, 1, 0
]

kids =
  brother:
    name: "Max"
    age:  11
  sister:
    name: "Ida"
    age:  9
var bitlist, kids, singers, song;

song = ["do", "re", "mi", "fa", "so"];

singers = {
  Jagger: "Rock",
  Elvis: "Roll"
};

bitlist = [1, 0, 1, 0, 0, 1, 1, 1, 0];

kids = {
  brother: {
    name: "Max",
    age: 11
  },
  sister: {
    name: "Ida",
    age: 9
  }
};

Restrict Keyword

$('.account').attr class: 'active'

log object.class
$('.account').attr({
  "class": 'active'
});

log(object["class"]);

Scope Safety

outer = 1
changeNumbers = ->
  inner = -1
  outer = 10
inner = changeNumbers()
var changeNumbers, inner, outer;

outer = 1;

changeNumbers = function() {
  var inner;
  inner = -1;
  return outer = 10;
};

inner = changeNumbers();

TypeScript

  • Oct 2012
  • Microsoft  

Demo

http://www.typescriptlang.org/Playground

Thank you!

deck

By Richard Hsu

deck

  • 663