Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Evening with CoffeeScript

An Evening with CoffeeScript

Slides for http://evening.coffeescript.io/

Javascript has become one of the most popular languages on the web but it still suffers to date from poor and hasty design decisions made during it’s infancy.

CoffeeScript — a fairly new language inspired by Ruby, Python and Haskell — compiles into Javascript, aims to highlight Javascript’s good parts while hiding its “dark sides” and to make the whole Javascript experience just that much more enjoyable.

This (free) course will teach a basic understanding of the language as well as attempt to clear out some of the misunderstandings that seem to keep people from integrating CoffeeScript into their workflow.

In the first part, the attendees will learn the fundamental concepts behind CoffeeScript as well as discover some of the existing tools.

The second part — an interactive workshop — will show CoffeeScript in action. Attendees are invited to try their newly earned skills on a small application and to hopefully discover the ‘power of CoffeeScript’.

Florian Plank

June 13, 2013
Tweet

More Decks by Florian Plank

Other Decks in Programming

Transcript

  1. var numbers = ['10','10','10']; parseInt('10', 0, numbers); // 10 (decimal)

    parseInt('10', 1, numbers); // NaN parseInt('10', 2, numbers); // 2 (binary)
  2. var numbers = ['10','10','10']; parseInt('10', 0, numbers); // 10 (decimal)

    parseInt('10', 1, numbers); // NaN parseInt('10', 2, numbers); // 2 (binary)
  3. abstract boolean break byte case catch char class const continue

    debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
  4. abstract boolean break byte case catch char class const continue

    debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
  5. ;

  6. <>

  7. <>

  8. <>

  9. Publish via rsync ----------------- Publishing is nice and rudimentary. We

    build out an entirely static version of the site and **rysnc** it up to the server. Journo.publish = -> do Journo.build rsync 'site/images/', path.join(shared.config.publish, 'images/'), -> rsync 'site/', shared.config.publish A helper function for **rsync**ing, with logging, and the ability to wait for the rsync to continue before proceeding. This is useful for ensuring that our any new photos have finished uploading (very slowly) before the update to the feed is syndicated out. https://github.com/jashkenas/journo/blob/master/journo.litcoffee
  10. Executable $ coffee --compile file.coffee $ coffee --watch --compile --output

    js cs/*.coffee $ coffee -wco js cs $ coffee --map $ coffee --bare
  11. ;

  12. *

  13. {}*

  14. *

  15. ()*

  16. *

  17. // Generated by CoffeeScript 1.3.3 (function() { var age, name;

    name = "John"; age = 23; }).call(this);
  18. function setA() { a = 1; } function setB() {

    var b = 2; } setA() console.log(a) # => 1 setB() console.log(b) # => ReferenceError: b is not defined
  19. name = "John" user = {name} var name, user; name

    = "John"; user = { name: name };
  20. response = name: "John", email: "[email protected]", age: 23 {name, age}

    = response var age, name, response; response = { name: "John", email: "[email protected]", age: 23 }; name = response.name, age = response.age;
  21. try failwhale() catch {line, message} displayError "Error on line #{line}:

    #{message}" var line, message; try { failwhale(); } catch (_error) { line = _error.line, message = _error.message; displayError("Error on line " + line + ": " + message); }
  22. ### Doomsday device Author: John Doe Last updated: 12.12.2012 ###

    /* Doomsday device Author: John Doe Last updated: 12.12.2012 */
  23. pixels = [ 255, 0, 255, 255 # first pixel

    0, 0, 0, 0 # second pixel 255, 255, 0, 255 # third pixel ]
  24. var users; users = [ { name: "John", age: 23

    }, { name: "Dirk", age: 45 } ];
  25. numbers = [1..100] var numbers, _i, _results; numbers = (function()

    { _results = []; for (_i = 1; _i <= 100; _i++){ _results.push(_i); } return _results; }).apply(this);
  26. numbers = [1..10] numbers[3..6] # => [4, 5, 6, 7]

    var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; numbers.slice(3, 7);
  27. numbers = [1..10] numbers[7..] # => [8, 9, 10] var

    numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; numbers.slice(7);
  28. numbers = [1..10] numbers[..] # => [1, 2, 3, 4,

    5, 6, 7, 8, 9, 10] var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(numbers.slice(0));
  29. greeting = "#{30 - user.age} years until 30!" var greeting;

    greeting = "" + (30 - user.age) + " years until 30!";
  30. story = "Some people go batshit crazy if your code

    exceeds 80 columns per line so yo better just don't do." var story; story = "Some people go batshit crazy if your code ↵ execeds 80 columns per line so yo better just don't ↵ do.";
  31. headerMarkup = """ <header> <h1>XML is like violence</h1> </header> """

    var headerMarkup; headerMarkup = "<header>\n <h1>XML is like ↵ violence</h1>\n</header>";
  32. mastercard = /// ^ 5[1-5] # starts with 51..55 [0-9]{14}

    # 14 more digits $ /// var mastercard; mastercard = /^5[1-5][0-9]{14}$/;
  33. function fullName(user) { return user.firstName + ' ' + user.lastName;

    } var fullName = function(user) { return user.firstName + ' ' + user.lastName; }
  34. fullName(user); var fullName = function(user) { return user.firstName + '

    ' + user.lastName; } TypeError: undefined is not a function
  35. outer inner outer(inner) outer inner 'foo', 'bar' wrap outer inner

    core outer(inner); outer(inner); outer(inner('foo', 'bar')); wrap(outer(inner(core)));
  36. var fullName; fullName = function(firstName, lastName) { if (lastName ==

    null) { lastName = "Doe"; } return "" + firstName + " " + lastName; };
  37. var invited, __slice = [].slice; invited = function() { var

    names; names = 1 <= arguments.length ? ↵ __slice.call(arguments, 0) : []; return "Invited: " + (names.join(', ')); };
  38. makeAdder = (x) -> (y) -> x + y add5

    = makeAdder(5) add5(10) # => 15 var makeAdder; makeAdder = function(x) { return function(y) { return x + y; }; };
  39. if name == 'John' console.log "It's John again." else if

    name == 'Marcy' console.log "It's Marcy this time." else console.log "It's not John." unless name == 'John' console.log "It's someone else"
  40. if (name === 'John') { console.log("It's John again."); } else

    if (name === 'Marcy') { console.log("It's Marcy this time."); } else { console.log("It's not John."); } if (name !== 'John') { console.log("It's someone else"); }
  41. message = if name == 'John' "It's John again." else

    if name == 'Marcy' "It's Marcy this time." else "It's not John." console.log message
  42. message = if name == 'John' then "It's John again."

    else if name == 'Marcy' then "It's Marcy this time." else "It's not John." console.log message
  43. [lastName, age] = if name == 'John' then ['Doe', 23]

    else if name == 'Marcy' then ['Murcy', 29] else ['Unknown' ] console.log lastName, age
  44. is === isnt !== not ! and && or ||

    true, yes, on true false, no, off false @, this this of in in
  45. is === isnt !== not ! and && or ||

    true, yes, on true false, no, off false @, this this of in in
  46. is === isnt !== not ! and && or ||

    true, yes, on true false, no, off false @, this this of in in
  47. name = userName ? 'John' var name; name = typeof

    userName !== "undefined" && ↵ userName !== null ? userName : 'John';
  48. name = 'John' name ?= 'Marcy' var name; name =

    'John'; if (name == null) { name = 'Marcy'; }
  49. name = 'Marcy Murcy' john = name.match(/John/)?[0] var john, name,

    _ref; name = 'Marcy Murcy'; john = (_ref = name.match(/John/)) != null ? ↵ _ref[0] : void 0;
  50. console?.log? "foo" if (typeof console !== "undefined" && console !==

    null) { if (typeof console.log === "function") { console.log("foo"); } }
  51. var name, _i, _len, _ref; _ref = ['John', 'Marcy']; for

    (_i = 0, _len = _ref.length; _i < _len; _i++) { name = _ref[_i]; invite(name); }
  52. var johns, n; johns = (function() { var _i, _len,

    _ref, _results; _ref = ['John', 'Marcy']; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { n = _ref[_i]; if (n === 'John') { _results.push(n); } } return _results; })();
  53. users = john: 23, marcy: 29 ageReport = for name,

    age of users "#{name} is #{age}"
  54. var age, ageReport, name, users; users = { john: 23,

    marcy: 29 }; ageReport = (function() { var _results; _results = []; for (name in users) { age = users[name]; _results.push("" + name + " is " + age); } return _results; })();
  55. users = john: 23, marcy: 29 ageReport = for own

    name, age of users "#{name} is #{age}"
  56. var age, ageReport, name, users, __hasProp = {}.hasOwnProperty; users =

    { john: 23, marcy: 29 }; ageReport = (function() { var _results; _results = []; for (name in users) { if (!__hasProp.call(users, name)) continue; age = users[name]; _results.push("" + name + " is " + age); } return _results; })();
  57. class User constructor: (@firstName, @lastName) -> fullName: -> "#{@firstName} #{@lastName}"

    john = new User('John', 'Doe') john.fullName() # => "John Doe"
  58. var User, john; User = (function() { function User(firstName, lastName)

    { this.firstName = firstName; this.lastName = lastName; } User.prototype.fullName = function() { return "" + this.firstName + " " + this.lastName; }; return User; })();
  59. var User; User = (function() { function User() {} User._users

    = []; User.getUsers = function() { return User._users; }; return User; })();
  60. var Invitee, User, _ref, __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; }; User = (function() { function User() {} return User; })(); Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref = Invitee.__super__.constructor.apply(this, arguments); return _ref; } return Invitee; })(User);
  61. var Invitee, User, _ref, __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; }; User = (function() { function User() {} return User; })(); Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref = Invitee.__super__.constructor.apply(this, arguments); return _ref; } return Invitee; })(User);
  62. var Invitee, User, _ref, __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; };
  63. Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref

    = Invitee.__super__.constructor.apply(this, ↵ arguments); return _ref; } return Invitee; })(User);
  64. class User constructor: (@name) -> message: -> "Hello #{@name}!" class

    Invitee extends User message: -> "#{super()} You are invited" invitee = new Invitee 'John' invitee.message() # => "Hello John! You are invited"