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

CoffeeScript - Spartan Javascript

CoffeeScript - Spartan Javascript

Going over the basics of CoffeeScript. Given at BarCampRochester and BuffaloJS.

Nick Quaranto

January 16, 2013
Tweet

More Decks by Nick Quaranto

Other Decks in Programming

Transcript

  1. R
    R
    CoffeeScript
    @qrush
    BarCampRoc Apr 2013
    Spartan JavaScript

    View Slide

  2. View Slide

  3. JavaScript as a
    language is
    Not
    Verbose

    View Slide

  4. Good JS is
    OO

    View Slide

  5. Good JS is
    Concise

    View Slide

  6. CoffeeScript is
    “Just JS”

    View Slide

  7. CoffeeScript writes
    Good JS

    View Slide

  8. CoffeeScript is
    Spartan!

    View Slide

  9. a new battle!
    http://www.flickr.com/photos/pshab/1578426589/

    View Slide

  10. the closest I’ve
    felt to the
    power I had 20
    years ago in
    Smalltalk
    ~Ward Cunningham

    View Slide

  11. it was the first
    time I
    experienced
    language envy
    ~DHH

    View Slide

  12. I use
    both
    ~Brendan Eich

    View Slide

  13. function foo() {
    }

    View Slide

  14. function foo() func
    foo() function foo(
    function foo() func
    foo() function foo(
    function foo() func
    foo() function foo(
    function foo() func

    View Slide

  15. function foo() func
    foo() function foo(
    function foo() func
    foo() function foo(
    function foo() func
    foo() function foo(
    function foo() func

    View Slide

  16. this

    View Slide

  17. this

    View Slide

  18. foo = function() {
    return 1 + 1;
    }

    View Slide

  19. foo = () ->
    1 + 1

    View Slide

  20. bar = function(x) {
    return x + 1;
    }

    View Slide

  21. bar = (x) ->
    x + 1

    View Slide

  22. _.bind(fn, obj)
    http://underscorejs.org/#bind
    http://coffeescript.org#fat_arrow

    View Slide

  23. baz = () =>
    this.foo()

    View Slide

  24. foz = () =>
    @foo()

    View Slide

  25. $ ->
    new ItemsRouter()
    Backbone.history.start()

    View Slide

  26. $ ->
    new ItemsRouter()
    Backbone.history.start()

    View Slide

  27. more
    features

    View Slide

  28. indents
    are
    scope

    View Slide

  29. last
    statements
    implicitly
    return

    View Slide

  30. all vars
    local by
    default

    View Slide

  31. easier
    object
    syntax

    View Slide

  32. title: "Sparta!"
    author:
    name: "Leonidas"
    handle: "theking"
    apples: 1

    View Slide

  33. string
    interpolation

    View Slide

  34. var html = "" +
    this.get("title") +
    "";

    View Slide

  35. "
    #{@get("title")}"

    View Slide

  36. "
    #{@get("title")}"

    View Slide

  37. inheritance
    actually
    works

    View Slide

  38. class Item extends Backbone.Model
    url: ->
    "/events/#{@id}"

    View Slide

  39. loops are less
    painful

    View Slide

  40. View Slide

  41. nums = [4, 5, 6]
    for i in nums
    console.log i
    4
    5
    6

    View Slide

  42. comprehensions
    compact
    code

    View Slide

  43. nums = [1, 2, 3]
    [ 1, 2, 3 ]
    sq = (n * n for n in nums)
    [ 1, 4, 9 ]

    View Slide

  44. nums = [1, 2, 3]
    [ 1, 2, 3 ]
    sq = (n * n for n in nums)
    [ 1, 4, 9 ]

    View Slide

  45. conditionals
    and loops
    can be
    inline

    View Slide

  46. console.log("Sparta!") if true
    Sparta!
    console.log("Persia!") unless false
    Sparta!

    View Slide

  47. x = 6
    6
    x += 1 while x < 10
    [ 7, 8, 9, 10 ]
    x
    10

    View Slide

  48. get
    existential

    View Slide

  49. spear?
    false
    spear = -> "Throw!"
    [Function]
    spear?
    true

    View Slide

  50. window.bcx ?= {}
    {}

    View Slide

  51. startWaiting: ->
    @waitTimeout ?= setTimeout =>
    @$container.addClass "waiting"
    , 300
    stopWaiting: ->
    if @waitTimeout?
    clearTimeout @waitTimeout
    @waitTimeout = null
    @$container.removeClass "waiting"

    View Slide

  52. meet your
    enemies

    View Slide

  53. View Slide

  54. making coffee
    • Rails:
    http://guides.rubyonrails.org/
    asset_pipeline.html
    • Jekyll & Rake:
    https://gist.github.com/4496420
    • Node:
    npm install coffee
    • Anything else: Less.app
    http://incident57.com/less/

    View Slide

  55. debugging
    is not
    terrible

    View Slide

  56. http://alexspeller.com/

    View Slide

  57. some
    silly
    keywords

    View Slide

  58. yes, true, on
    no, false, off

    View Slide

  59. more info
    • http://coffeescript.org
    • http://coffeescript.codeschool.com/
    • http://robots.thoughtbot.com/post/
    9251081564/coffeescript-spartan-
    javascript

    View Slide