FITC CoffeeScript 101 Presentation

1. Who am I?

2. Who am I?
• A software engineer and entrepreneur
• On the tablet team at Kobo
• Find me blogging at FaisalAbid.com
• Tweeting @FaisalAbid

3. A few things I’ve worked on

4. 101

5. History of Javascript

6. The bad parts
• Global Variables
• operator overloading in a dynamic typed language
• semicolon optional
• typeof inconsistency. null = object?!
• ==,===, !=
• false, null, undefined, NaN

7. Javascript also has good parts

8. Being the good guy is hard in Javascript

9. Would you like a cup of coffee?

10. Not the first of its kind.

11. GWT Output
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;}

13. CoffeeScript Output
var bitlist, kids, singers, song;
song = ["do", "re", "mi", "fa", "so"];
singers = {
Jagger: "Rock",
Elvis: "Roll"
};

15. 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.
“It's just javascript!”

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

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

18. Whats good about CoffeeScript
• Private by default
• no more variable leaking
• == vs ===, Fuzzy matching is gone. "is" is the ===
• Passes JSLint with flying colours.

19. 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!

20. What well go over
• Syntax
• Whitespace Matters
• Object Syntax
• Everything is an expression
• Comprehension
• Classes, Inheritance
• Bound Functions
• Conditionals

21. Syntax
message = "hello world"
sayHello = ->
alert message
sayhelloWithName = (name)->
alert message+' '+name

22. Whitespace Matters
message = ->
someOtherMessage ->
console.log "hello"
someOtherMessage = (callback)->
callback()
message()

23. Object Syntax
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()

24. Everything is an expression
x = 4
lessmessage = "less then four"
greatermessage = "greater than or equal to four"
message = if x < 4 then less message else greatermessage
alert 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

25. Comprehension
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

26. Classes & Inheritence
class Animal var Animal, Zebra,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
constructor: (@name) -> __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() {
sayName: -> function Animal(name) {
this.name = name;
}
@name Animal.prototype.sayName = function() {
return this.name;
};
return Animal;
class Zebra extends Animal })();
Zebra = (function(_super) {
constructor: (@name,@hasStripes)-> __extends(Zebra, _super);
super(@name) function Zebra(name, hasStripes) {
this.name = name;
this.hasStripes = hasStripes;
this.checkName = __bind(this.checkName, this);
Zebra.__super__.constructor.call(this, this.name);
hasStripes: -> }
Zebra.prototype.hasStripes = function() {
@hasStripes };
return this.hasStripes;
Zebra.prototype.checkName = function() {
return httpgetcall(this.name, function() {
return console.log(this.hasStripes);
});
};
isCool: => return Zebra;
httpgetcall @name,-> })(Animal);
console.log @hasStripes

27. Bound Functions
[...]
class Zebra extends Animal
constructor: (@name,@hasStripes)->
super(@name)
hasStripes: ->
@hasStripes
isCool: =>
httpgetcall @name,->
console.log @hasStripes

28. Conditionals
x = 10
number = 5
shouldDouble = true
doubleNumber = (value)->
value*2
number = doubleNumber x if shouldDouble

29. CoffeeScript is Javascripts new Hope

30. Thank you.
follow me @faisalabid