Who am I?

• A software engineer and entrepreneur

• On the tablet team at Kobo

• Find me blogging at FaisalAbid.com

• Tweeting @FaisalAbid

Who am I?

A few things I’ve worked on

101

History of Javascript

The bad parts• Global Variables

• operator overloading in a dynamic typed language

• semicolon optional

• typeof inconsistency. null = object?!

• ==,===, !=

• false, null, undefined, NaN

Javascript also has good parts

Being the good guy is hard in Javascript

Would you like a cup of coffee?

Not the first of its kind.

function A0(){this.B0();return this.js[0];}function C0(){if(this.js.length > 1){this.js = [this.js.join('')];this.length = this.js[0].length;}}function D0(E0){this.js = [E0];this.length = E0.length;}function Ez(F0,a1){return F0.yx(yZ(a1));}function yB(b1){c1(b1);return b1;}function c1(d1){d1.e1('');}function zB(){}_ = zB.prototype = new f();_.yx = w0;_.vB = A0;_.B0 = C0;_.e1 = D0;_.i = 'java.lang.StringBuffer';_.j = 75;function f1(){f1 = a;g1 = new iX();h1 = new iX();return window;}

GWT Output

var bitlist, kids, singers, song;

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

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

CoffeeScript Output

“It's just javascript!”

The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no

interpretation at runtime. [....].

The compiled output is readable and pretty-printed, passes

through JavaScript Lint without warnings, will work in every JavaScript runtime, and tends to run as fast or faster than the

equivalent handwritten JavaScript.

$("#ComboBox").change(function() { callThisMessage(function(){ $.callOtherMethods(function(){ $("#ComoboBox").move() }); })});

Javascript

$("#ComboBox").change -> callThisMessage -> $.callOtherMethods -> $("#ComoboBox").move()

CoffeeScript

Whats good about CoffeeScript • Private by default

• no more variable leaking

• == vs ===, Fuzzy matching is gone. "is" is the ===

• Passes JSLint with flying colours.

Getting Started With CoffeeScript• CoffeeScript.org is the best resource available.

• Install Node.js and install the CoffeeScript compiler

• coffee -c filename.coffee generates the javascript!

What well go over • Syntax

• Whitespace Matters

• Object Syntax

• Everything is an expression

• Comprehension

• Classes, Inheritance

• Bound Functions

• Conditionals

message = "hello world"

sayHello = -> alert message

sayhelloWithName = (name)-> alert message+' '+name

Syntax

message = -> someOtherMessage -> console.log "hello"

someOtherMessage = (callback)-> callback()

message()

Whitespace Matters

conference = title: 'FITC Screens 2012' description: 'The coolest conference ever!' details: homepage: 'http://www.fitc.ca' rss:'http://somerssurl.com' sayName: -> alert @title

conference.sayName()

Object Syntax

x = 4lessmessage = "less then four"greatermessage = "greater than or equal to four"message = if x < 4 then less message else greatermessagealert message

numberToString = (value) -> switch value when value is 1 then "one" when value is 2 then "two" when value is 3 then "three" when value is 4 then "four"

number = numberToString(3)alert number

Everything is an expression

items = [1,2,3,4,5,6,7,8,9,10]

doubleitems = (double num for num in items when num <5)tripleitems = (triple num for num in items when num >= 5)

double = (x)-> x*2

triple = (x)-> x*3

Comprehension

class Animal constructor: (@name) ->

sayName: -> @name

class Zebra extends Animal constructor: (@name,@hasStripes)-> super(@name)

hasStripes: -> @hasStripes

isCool: => httpgetcall @name,-> console.log @hasStripes

Classes & Inheritence

var Animal, Zebra, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Animal = (function() {

function Animal(name) { this.name = name; }

Animal.prototype.sayName = function() { return this.name; };

return Animal;

})();

Zebra = (function(_super) {

__extends(Zebra, _super);

function Zebra(name, hasStripes) { this.name = name; this.hasStripes = hasStripes; this.checkName = __bind(this.checkName, this);

Zebra.__super__.constructor.call(this, this.name); }

Zebra.prototype.hasStripes = function() { return this.hasStripes; }; Zebra.prototype.checkName = function() { return httpgetcall(this.name, function() { return console.log(this.hasStripes); }); };

return Zebra;

})(Animal);

[...]class Zebra extends Animal constructor: (@name,@hasStripes)-> super(@name)

hasStripes: -> @hasStripes

isCool: => httpgetcall @name,-> console.log @hasStripes

Bound Functions

x = 10number = 5shouldDouble = true

doubleNumber = (value)-> value*2

number = doubleNumber x if shouldDouble

Conditionals

CoffeeScript is Javascripts new Hope

Thank you.follow me @faisalabid