CoffeeScript: The Good Parts

It’s not a secret that the topic of CoffeeScript is controversial to say the least. Many reputable JavaScript and Node.js developers just hate CoffeeScript, but there are lessons we can all learn from its good parts! However, many developers just won’t go back to plain JavaScript after building something relatively serious with CoffeeScript.

My own story is going from making fun to loving it after a year developing an enterprise product. As with the famous JavaScript: The Good Parts book, we'll look at what's good in CoffeeScript (and it’s quirks too). This talk will share experiences from the trenches of using CoffeeScript in production.

Transcript

1. webapplog.com
   @azat_co
   CoffeeScript: The Good Parts
   The good and not so good parts of CoffeeScript in comparison to JavaScript
   1
   

   View Slide

2. webapplog.com
   @azat_co
   About The Presenter
   • Worked in the US government, startups
   and corporations
   • Wrote six books on JavaScript and
   Node.js (the latest is Practical Node.js
   by Apress)
   • Certified yoga teacher and paleo lifestyle
   enthusiast
   Azat Mardan
   2
   

   View Slide

3. webapplog.com
   @azat_co
   Fun story: “CoffeeScript is a solution without a problem”
   I used to make fun of CoffeeScript, before falling in love with
   it.
   3
   

   View Slide

4. webapplog.com
   @azat_co
   Who likes /uses
   CoffeeScript already?
   4
   

   View Slide

5. webapplog.com
   @azat_co
   Please be open-minded
   5
   

   View Slide

6. webapplog.com
   @azat_co
   Blub Paradox
   6
   !
   Blub paradox: devs are satisfied with whatever language
   they happen to use, because it dictates the way they think
   about programs.
   http://en.wikipedia.org/wiki/
   Paul_Graham_(computer_programmer)#Blub
   

   View Slide

7. webapplog.com
   @azat_co
   CoffeeScript’s Bad Rep
   Most of the people who say bad things about CoffeeScript
   have never built with it anything relatively large-scale and
   production-ready.
   7
   

   View Slide

8. webapplog.com
   @azat_co
   CoffeeScript at DocuSign
   DocuSign stack: CoffeeScript+Node.js+Backbone.js+Grunt
   Observation: front-end developers, after only a few weeks of
   CoffeeScript, didn’t want to go back to regular JavaScript!
   8
   

   View Slide

9. webapplog.com
   @azat_co
   “CoffeeScript is a little language that compiles
   into JavaScript.” — coffeescript.org
   9
   

   View Slide

10. webapplog.com
    @azat_co
    TOC for v1.7.1
    Maybe CoffeeScript is not so small
    anymore?
    10
    

    View Slide

11. webapplog.com
    @azat_co
    JavaScript
    11
    

    View Slide

12. webapplog.com
    @azat_co
    Native JavaScript Issues
    • == vs ===
    • Functional inheritance vs pseudo-classical
    • Global variable leakage (missing var)
    • Many others
    12
    

    View Slide

13. webapplog.com
    @azat_co
    CoffeeScript: The Good Parts (some of them)
    • Syntax: curly braces, parentheses and semicolons
    • Function declaration: -> and =>
    • Scoping: automatic var
    • Iterators / comprehensions: replacement of for loops
    • Class declaration: class operand
    13
    

    View Slide

14. webapplog.com
    @azat_co
    Syntax
    • No semicolons, i.e., they are banned
    • Logical blocks can omit curly braces
    • Function calls can omit parentheses
    14
    

    View Slide

15. webapplog.com
    @azat_co
    Why Semicolons are Bad? (*IMHO)
    • Extra time&work to put them
    • If missed, inconsistent but working code
    • Redundant/not-needed (expect in two cases)
    • Semicolon Insertion (ASI)
    15
    

    View Slide

16. webapplog.com
    @azat_co
    Logical Blocks (optional curly braces)
    kids =
    brother:
    name: "Max"
    age: 11
    sister:
    name: "Ida"
    age: 9
    16
    

    View Slide

17. webapplog.com
    @azat_co
    Function calls
    console.log object.class
    !
    $('.account').attr class: ‘active’
    !
    $(‘button’).css
    color: red
    “font-size”: “16px”
    17
    

    View Slide

18. webapplog.com
    @azat_co
    Function Declaration
    • Skinny arrow (->) saves time typing “function” over and
    over again
    • Fat arrow (=>), i.e., no need to use “var that = this” or “var
    self = this”
    18
    

    View Slide

19. webapplog.com
    @azat_co
    Function Declaration Elegance
    a = (x,y) -> console.log x+y
    var a;
    !
    a = function(x, y) {
    return console.log(x + y);
    };
    !
    a(10, -5);
    CoffeeScript: JavaScript:
    19
    

    View Slide

20. webapplog.com
    @azat_co
    Function Declaration: Skinny Arrow
    console.log @
    $('div').click ()->
    console.log @ console.log(this);
    $('div').click(function() {
    return console.log(this);
    });
    CoffeeScript: JavaScript:
    Prints “window” and DOM elements i.e.,
    “this” changes and @ changes too
    20
    

    View Slide

21. webapplog.com
    @azat_co
    Function Declaration: Fat Arrow
    console.log @
    $('div').click ()=>
    console.log @
    var _this = this;
    !
    console.log(this);
    !
    $('div').click(function() {
    return console.log(_this);
    });
    CoffeeScript: JavaScript:
    Prints “window” both times (i.e., the outer scope)
    21
    

    View Slide

22. webapplog.com
    @azat_co
    Scoping
    • Manual “var” is banned
    • Variables declared in the scope in which they are
    encountered first (i.e., the order in which variables used
    determines their scope).
    22
    

    View Slide

23. webapplog.com
    @azat_co
    Why auto vars are good? Missed “var” Example.
    var a = function (c) {
    b = 10;
    return b + c;
    }
    console.log(a(0));
    !
    b is window.b — bad!
    var a = function(c) {
    var b = 10;
    return b + c;
    };
    console.log(a(0));
    !
    b is a private attribute —
    what we wanted!
    CoffeeScript: JavaScript:
    23
    

    View Slide

24. webapplog.com
    @azat_co
    Scoping: Example I
    b = 1
    a = ->
    b = -1
    !
    a()
    console.log b
    var a, b;
    b = 1;
    a = function() {
    return b = -1;
    };
    a();
    console.log(b);
    CoffeeScript: JavaScript:
    24
    

    View Slide

25. webapplog.com
    @azat_co
    Scoping: Example II
    a = ->
    b = -1
    b = 1
    a()
    console.log b
    var a, b;
    a = function() {
    var b;
    return b = -1;
    };
    b = 1;
    a();
    console.log(b);
    CoffeeScript: JavaScript:
    25
    

    View Slide

26. webapplog.com
    @azat_co
    Iterators / Comprehensions (for loops)
    Awesome time savers! Good for arrays and objects:
    !
    for item, index in arrayObject
    iterator(item)
    !
    for key, value of object
    iterator(item)
    !
    !
    !
    !
    !
    26
    

    View Slide

27. webapplog.com
    @azat_co
    Iterating over an Array
    for item, index in arrayObject
    iterator(item)
    var index, item, _i, _len;
    !
    for (index = _i = 0,
    _len = arrayObject.length;
    _i < _len;
    index = ++_i) {
    item = arrayObject[index];
    iterator(item);
    }
    CoffeeScript: JavaScript:
    27
    

    View Slide

28. webapplog.com
    @azat_co
    Iterating over an Object
    for key, value of object
    iterator(value)
    var key, value;
    !
    for (key in object) {
    value = object[key];
    iterator(value);
    }
    CoffeeScript: JavaScript:
    28
    

    View Slide

29. webapplog.com
    @azat_co
    Iterators / Comprehensions (for loops) II
    Many options:
    !
    iterator (item) for item in arrayObject
    !
    iterator item for item in arrayObject
    !
    iterator item for item in arrayObject when item > 0
    !
    !
    !
    !
    !
    !
    29
    

    View Slide

30. webapplog.com
    @azat_co
    Class Declaration
    • In JavaScript classes are absent at all!
    • CoffeeScript eloquently implements Pseudo-classical
    inheritance pattern: “new” and capitalized name (“new
    Animal”, “new Vehicle”, etc.)
    • Pseudo-classical is hard and cumbersome without CS
    • CoffeeScript “constructor” method and “super” call
    30
    

    View Slide

31. webapplog.com
    @azat_co
    Class Example
    class Vehicle
    constructor: (@name) ->
    move: (meters) ->
    console.log @name + " moved #{meters} miles.”
    !
    camry = new Vehicle "Camry"
    camry.move(50)
    CoffeeScript:
    Output: Camry moved 50 miles.
    31
    

    View Slide

32. webapplog.com
    @azat_co
    Class Example
    var Vehicle, camry;
    !
    Vehicle = (function() {
    function Vehicle(name) {
    this.name = name;
    }
    !
    Vehicle.prototype.move = function(meters) {
    return console.log(this.name + (" moved " + meters + " miles."));
    };
    !
    return Vehicle;
    !
    })();
    !
    camry = new Vehicle("Camry");
    !
    camry.move(50);
    JavaScript:
    2x: 6 vs 12 lines of code!
    32
    

    View Slide

33. webapplog.com
    @azat_co
    Other CoffeeScript Goodies
    • Splats (e.g., “options…”)
    • Conditions (if, isnt, not, and, or, unless)
    • Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4])
    33
    

    View Slide

34. webapplog.com
    @azat_co
    CoffeeScript: The Good Parts Summary
    • Syntax: curly braces, parentheses and semicolons
    • Function Declaration: -> and =>
    • Scoping: automatic var
    • Iterators / Comprehensions: replacement of for loops
    • Class Declaration: class operand
    34
    

    View Slide

35. webapplog.com
    @azat_co
    CoffeeScript: Not So Good Parts
    • Learning: 1-2 day, free online ebooks
    • Compilation: extra build step (use Grunt or similar)
    • Parentheses: optional and cause misinterpretation
    • Debugging: use source-maps
    35
    

    View Slide

36. webapplog.com
    @azat_co
    https://github.com/michaelficarra/coffee-of-my-
    dreams
    CoffeeScript of My Dreams
    

    View Slide

37. webapplog.com
    @azat_co
    How to Get Started
    $ npm install -g coffee-script
    $ coffee
    >…
    37
    

    View Slide

38. webapplog.com
    @azat_co
    Companies that use CoffeeScript
    38
    • GitHub
    • Dropbox
    • DocuSign
    • Airbnb (mobile)
    • HotelTonight
    • Basecamp (mobile)
    

    View Slide

39. webapplog.com
    @azat_co
    Further Reading
    CoffeeScript FUNdamentals: The Better JavaScript
    http://bit.ly/1nD4dE3
    39
    

    View Slide

40. webapplog.com
    @azat_co
    CoffeeScript Ebooks
    • The Little Book on CoffeeScript (free onine)
    • CoffeeScript Cookbook (free online)
    • Smooth CoffeeScript (free online)
    • CoffeeScript Ristretto (free online)
    40
    

    View Slide

41. webapplog.com
    @azat_co
    Future / Alternatives
    41
    • Dart (early stage)
    • TypeScript: MicroSoft project
    • ECMAScript 6: be careful with old browsers, use shims,
    fully available after June 2015
    • Sweet.js: macros!
    

    View Slide

42. webapplog.com
    @azat_co
    Conclusions
    42
    • Good for enterprise and large team, because it’s easer to
    have common style, e.g., https://github.com/styleguide/
    javascript
    • Good for developers new to JavaScript and those
    coming from OOP languages (Java, Ruby)
    • Cross-browser / old browser support
    • More productive and happier developers (after learning)
    • Tested, robust, and available now
    • Awesome with Backbone.js and Underscore.js
    

    View Slide

43. webapplog.com
    @azat_co
    Session Summary
    • Native JavaScript Issues
    • CoffeeScript: The Good Parts
    • How to Get Started
    • Future / Alternatives
    • Conclusions
    43
    

    View Slide

44. webapplog.com
    @azat_co
    Discussion and Q&A Time
    Questions, thoughts and experiences?
    44
    

    View Slide