CoffeeScript 101

CoffeeScript 101 presentation from FITC Screens 2012

1. Who am I?
2. • A software engineer and entrepreneur • On the tablet team at Kobo • Find me blogging at FaisalAbid.com • Tweeting @FaisalAbid Who am I?
3. A few things I’ve worked on
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. 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
13. var bitlist, kids, singers, song; song = ["do", "re", "mi", "fa", "so"]; singers = { Jagger: "Rock", Elvis: "Roll" }; CoffeeScript Output
15. “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.
16. $("#ComboBox").change(function() { callThisMessage(function(){ $.callOtherMethods(function(){ $("#ComoboBox").move() }); }) }); Javascript
17. $("#ComboBox").change -> callThisMessage -> $.callOtherMethods -> $("#ComoboBox").move() CoffeeScript
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. message = "hello world" sayHello = -> alert message sayhelloWithName = (name)-> alert message+' '+name Syntax
22. message = -> someOtherMessage -> console.log "hello" someOtherMessage = (callback)-> callback() message() Whitespace Matters
23. 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
24. 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 Everything is an expression
25. 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
26. 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);
27. [...] class Zebra extends Animal constructor: (@name,@hasStripes)-> super(@name) hasStripes: -> @hasStripes isCool: => httpgetcall @name,-> console.log @hasStripes Bound Functions
28. x = 10 number = 5 shouldDouble = true doubleNumber = (value)-> value*2 number = doubleNumber x if shouldDouble Conditionals
29. Thank you. follow me @faisalabid