SHOULD I USE ?The Pros and Cons of Working With JavaScript’s Original Transpiler

By Morris Singer

WHO AM I• Lead Front End Developer

Antallagon, Inc.

• Angular.js and Node.js (Two Years)• Sencha Touch (Two Years)• Ruby on Rails (Four Years)

AGENDA

• Whirlwind tour of CoffeeScript

• A rubric for evaluating a JavaScript transpiler

• How does CoffeeScript stack up?

A WHIRLWIND TOUR

SCOPE

function () { var a = 'b'; }

-> a = "b"

var c = 'd'; c = "d"

FUNCTIONS

function () { var a = 'b'; }

-> a = "b"

function (c) { c = 'd'; }

(c) -> c = "d"

RETURNING VALUES

function (a) { return a * a; }

(a) -> a * a

ARGUMENTS

function () { _.each(arguments, function (arg) { console.log(arg); } }

(args...) -> _.each args,(arg) -> console.log arg

function (a, b, c) { a = a || 1; b = b || 2; c = c || 3; }

(a = 1, b = 2, c = 3) ->

INVOCATION

foo('bar'); foo "bar"

foo(); foo()

foo(bar('baz')); foo bar "baz"

PUNCTUATIONvar obj1 = { foo: 'foo', bar: 'bar' };

obj1 = foo: 'foo' bar: 'bar'

var arr1 = [ 1, 2, 3 ];

arr1 = [ 1 2 3 ]

FLOW CONTROL (IF-ELSE)

if (foo === 'bar') console.log('hi');

console.log 'hi' if foo == 'bar'

if (foo === ‘bar') { console.log('hello'); console.log('world'); }

if foo == 'bar' console.log 'hello' console.log 'world'

var greeting = (foo === ‘bar') ? 'hello' : 'goodbye';

greeting = if foo == ‘bar' then 'hello' else 'goodbye'

FLOW CONTROL (IF NOT)

if (foo !== 'bar') console.log('hi');

console.log 'hi' unless foo == 'bar'

if (foo !== 'bar') { console.log('hello'); console.log('world'); }

unless foo == 'bar' console.log 'hello' console.log 'world'

var greeting = (foo !== 'bar') ? 'hello' : 'goodbye';

greeting = unless foo == ‘bar' then 'hello' else 'goodbye'

STRING INTERPOLATION

"the value of 'a' is: " + a; "the value of 'a' is: #{a}"

RANGING

var range = values.slice(1, 4); range = values[1..3]

var substr = "foobar".slice(1, 4); substr = "foobar"[1..3]

PROTOTYPING

var User = function() {}; User.prototype.approved = true;

class User User::approved = true

User.prototype.lock = function () { this.approved = false; }

User::lock = -> @approved = false

john = new User() john.picture?.thumbnail = "http://www.placehold.it/100x100"

john = new User(); if (typeof john.picture) !== undefined) { john.picture.thumbnail = 'http://www.placehold.it/100x100'; }

LEXICAL BINDING

function(fn, me) { return function(){ return fn.apply(me, arguments); }; };

=>

INHERITANCE

• extends keyword

• super keyword

UTILITIES

• each

• map

• select

• includes

EVALUATING A JAVASCRIPT TRANSPILER

Strong Types

“I have made this longer than usual because I have not had time to make it shorter.”

Brevity

New Language Features

Classical Inheritance

Performance

Enhanced Supportfor Modules

Fixing JavaScript

Conventional Languages

Navigation from Sourceto Target?

WHAT YOU GET

• Quirks of JavaScript are fixed

• Some nice (maybe) syntactic abstraction

• Less punctuation

• Performance (sometimes)

WHAT’S MISSING

• Strong types

• Some very important new language features

• Enhanced support for modules

• Convention

MANY TRANSPILING OPTIONSHere are just a few…

QUESTIONS

GET IN TOUCH

! @morrissinger

" linkedin.com/in/morrissinger

# morrissinger.com

$ github.com/morrissinger