CoffeeScript - Spartan Javascript

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

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