FITC CoffeeScript 101


Published on

FITC CoffeeScript 101 Presentation

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • - Some projects ive worked on\n- Describe the projects\n- Talk about the ARC\n- Personal projects use CoffeeScript\n
  • - CoffeeScript 101\n- Popular language taking over the landscape\n- Dropbox recently changed over most of their code to CoffeeScript.\n- If DB can change with there immense scale, then there has to be something to it.\n- before we see what that something is, lets take a step back and go back in time to 2005\n
  • - JS is 17 years old. \n- Originally Mocha, LiveScript. \n- Brendan Eich created this in 3 days. But it still lives today.\n- lots of holes, but behind those scars lies a beautiful language.\n\n- Before Javascript was for garbage mouse followers, flashy things, and a lot of people werent really js developers\n- in 2005 google introduced Google maps which became a revolution in JS\n- Suddenly javascript went from being a bullshit sprinkled language to a full blown powerhouse in the eyes of developers\n- Frameworks cropped up, JQUery came out. and in 2012, HTML5 and JS have taken over.\n\n- but theres a problem. \n- JS is very clunky, and very very hard to write Google Map type web apps without tons of time invested.\n- Time = Money \n- Gets very messy and unreadable after a while.\n\n- Ajax, and other stuff\n\n- in short JS has its bad parts\n\n
  • \n
  • - Great book by Douglas Crockford.\n- Pioneer in good JS development\n- JSLint/ JSOn Libraries\n- following these “good parts” is not always easy.\n
  • Not always easy to adopt to changes. \nTons of JS libraries make it hard. Some might be bad, not your fault!\n\n
  • On December 13, 2009, Jeremy Ashkenas made the first Git commit of CoffeeScript with the comment: "initial commit of the mystery language."[9] The compiler was written in Ruby. \nOn December 24, he made the first tagged and documented release, 0.1.0. On February 21, 2010, he committed version 0.5, which replaced the Ruby compiler with one written in pure CoffeeScript. By that time the project had attracted several other contributors on GitHub, and was receiving over 300 page hits per day.\nOn December 24, 2010, Ashkenas announced the release of stable 1.0.0 to Hacker News, the site where the project was announced for the first time.[10][11]\n\nTalk abou how you came to the language. what were you doing?\n\n
  • - in 2006 google announced GWT\n- holy crist mind blown, java to javascript. no need to learn that javascript crap anymore.\n- Checked it out. Had to go through tons of hoops. \n- Install extension ,etc etc. JS it outputs is cryptic.\n
  • - first impression. wow look at how optimized my js i, hell ya hell ya\n- I love this tool.when people see im doing this ill be so cool\n\n
  • - Makes your JS hard to debug. Obfuscation is fine in production, but in development its stupid.\n- on the contrary, take a look at what CoffeeScript outputs\n
  • - Boring old javascript. nothing special.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • A new hope of Javascript.\nCleaner more efficent.\nWith Node.js its even more awesome.\nPlease check it out.\n\n\n
  • \n
  • FITC CoffeeScript 101

    1. 1. Who am I?
    2. 2. Who am I?• A software engineer and entrepreneur• On the tablet team at Kobo• Find me blogging at• Tweeting @FaisalAbid
    3. 3. A few things I’ve worked on
    4. 4. 101
    5. 5. History of Javascript
    6. 6. The bad parts• Global Variables• operator overloading in a dynamic typed language• semicolon optional• typeof inconsistency. null = object?!• ==,===, !=• false, null, undefined, NaN
    7. 7. Javascript also has good parts
    8. 8. Being the good guy is hard in Javascript
    9. 9. Would you like a cup of coffee?
    10. 10. Not the first of its kind.
    11. 11. GWT Outputfunction 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;}
    12. 12. CoffeeScript Output var bitlist, kids, singers, song; song = ["do", "re", "mi", "fa", "so"]; singers = { Jagger: "Rock", Elvis: "Roll" };
    13. 13. The golden rule of CoffeeScript is: "Its just JavaScript". Thecode compiles one-to-one into the equivalent JS, and there is nointerpretation at runtime. [....].The compiled output is readable and pretty-printed, passesthrough JavaScript Lint without warnings, will work in everyJavaScript runtime, and tends to run as fast or faster than theequivalent handwritten JavaScript. “Its just javascript!”
    14. 14. Javascript $("#ComboBox").change(function() { callThisMessage(function(){ $.callOtherMethods(function(){ $("#ComoboBox").move() }); }) });
    15. 15. CoffeeScript $("#ComboBox").change -> callThisMessage -> $.callOtherMethods -> $("#ComoboBox").move()
    16. 16. Whats good about CoffeeScript• Private by default• no more variable leaking• == vs ===, Fuzzy matching is gone. "is" is the ===• Passes JSLint with flying colours.
    17. 17. Getting Started With CoffeeScript• is the best resource available.• Install Node.js and install the CoffeeScript compiler• coffee -c generates the javascript!
    18. 18. What well go over• Syntax• Whitespace Matters• Object Syntax• Everything is an expression• Comprehension• Classes, Inheritance• Bound Functions• Conditionals
    19. 19. Syntax message = "hello world" sayHello = -> alert message sayhelloWithName = (name)-> alert message+ +name
    20. 20. Whitespace Matters message = -> someOtherMessage -> console.log "hello" someOtherMessage = (callback)-> callback() message()
    21. 21. Object Syntax conference = title: FITC Screens 2012 description: The coolest conference ever! details: homepage: rss: sayName: -> alert @title conference.sayName()
    22. 22. 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
    23. 23. 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
    24. 24. 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 (, 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) { = name; } @name Animal.prototype.sayName = function() { return; }; return Animal; class Zebra extends Animal })(); Zebra = (function(_super) { constructor: (@name,@hasStripes)-> __extends(Zebra, _super); super(@name) function Zebra(name, hasStripes) { = name; this.hasStripes = hasStripes; this.checkName = __bind(this.checkName, this);,; hasStripes: -> } Zebra.prototype.hasStripes = function() { @hasStripes }; return this.hasStripes; Zebra.prototype.checkName = function() { return httpgetcall(, function() { return console.log(this.hasStripes); }); }; isCool: => return Zebra; httpgetcall @name,-> })(Animal); console.log @hasStripes
    25. 25. Bound Functions [...] class Zebra extends Animal constructor: (@name,@hasStripes)-> super(@name) hasStripes: -> @hasStripes isCool: => httpgetcall @name,-> console.log @hasStripes
    26. 26. Conditionals x = 10 number = 5 shouldDouble = true doubleNumber = (value)-> value*2 number = doubleNumber x if shouldDouble
    27. 27. CoffeeScript is Javascripts new Hope
    28. 28. Thank you.follow me @faisalabid