View
757
Download
1
Category
Preview:
DESCRIPTION
FITC CoffeeScript 101 Presentation
Citation preview
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
Recommended