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

CoffeeScript, a better way to write JavaScript

高見龍
November 11, 2011

CoffeeScript, a better way to write JavaScript

CoffeeScript, My presentation at PHPConf Taiwan 2011.

高見龍

November 11, 2011
Tweet

More Decks by 高見龍

Other Decks in Programming

Transcript

  1. CoffeeScript
    a better way to write javascrip
    ৷ԈᎲ
    photo by SixRevisions

    View Slide

  2. View Slide

  3. View Slide

  4. You can get this slide on
    www.eddie.com.tw/slides

    View Slide

  5. Who am I ?

    View Slide

  6. I’m a Flash guy.
    photo by JD Hancock

    View Slide

  7. a.k.a Eddie or Aquarianboy
    Live and work in Taipei, Taiwan.
    Serving in my own little tiny company.
    Flash / AS3 / Ruby / Rails / Python programming for living.
    A little bit Objective-C for personal inerests.
    Technical Education and Consulant.
    PTT Flash BM (since 2007/4).
    Adobe Certificaed Flash Developer (Since 2006/7).
    Linux Professional Institue Certification (Since 2005/3).
    ৷ԈᎲ
    photo by Eddie

    View Slide

  8. or just google me with keyword "৷ԈᎲ"

    View Slide

  9. JavaScript
    becomes
    hugely
    popular.
    9th on TIOBE, Nov 2011
    photo by gr3m

    View Slide

  10. JavaScript
    seems
    easy..
    photo by apple apple

    View Slide

  11. But it’s
    not easy
    o wrie
    good
    JavaScript
    code.
    photo by Marcus Q

    View Slide

  12. Today, I won't ell you..
    You should give up the way you did

    View Slide

  13. I am going o ell you..
    Maybe you have a better way to do with this

    View Slide

  14. CoffeeScript

    View Slide

  15. photo by Nick Humphries
    We’re not
    alking
    about this
    kind of
    coffee.

    View Slide

  16. WTF?

    View Slide

  17. View Slide

  18. CoffeeScript

    View Slide

  19. CoffeeScript
    just written with different syntax
    is JavaScript

    View Slide

  20. ..exposes the good parats of
    JavaScript in a simple way.

    View Slide

  21. Synax borrowed from
    Python and Ruby.

    View Slide

  22. Synax borrowed from
    Python and Ruby.
    I love Python & Ruby

    View Slide

  23. ..and will be compiled ino
    JavaScript code.

    View Slide

  24. ..that doesn’t mean you can
    have no knowledge about
    JavaScript.

    View Slide

  25. CoffeeScript is not used
    o replace JavaScript.

    View Slide

  26. Let’s get our feet wet!
    photo by jlhopes

    View Slide

  27. Insall
    photo by Daniel Dionne

    View Slide

  28. Requirements
    You need o insall some software first..
    Node.js
    > git clone git://github.com/joyent/node.git
    > cd node
    > ./configure
    > make
    > sudo make insall

    View Slide

  29. Requirements
    You need o insall some software first..
    NPM, the “node package manager”
    > curl http://npmjs.org/insall.sh | sh

    View Slide

  30. Insall CoffeeScript
    CoffeeScript
    > npm insall coffee-script
    > coffee -v
    CoffeeScript version 1.1.3
    http://blog.eddie.com.w/2011/08/03/install-coffeescrip/

    View Slide

  31. How o use
    photo by roboppy

    View Slide

  32. Usage
    Compile *.coffee ino *.js
    > coffee --wach --compile app.coffee
    Compile
    http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/

    View Slide

  33. Synax
    photo by zigazou76

    View Slide

  34. }
    }
    }
    }

    View Slide

  35. No { }
    indenations rule!
    whitespace matters!

    View Slide

  36. ( ) is not necessary.

    View Slide

  37. No trailing semicolon.

    View Slide

  38. Return is not necessary.
    everything is an expression

    View Slide

  39. No { }, (), and ;
    // javascript
    # coffeescript

    View Slide

  40. No { }, (), and ;
    // javascript
    if(age > 20){
    voe();
    }
    # coffeescript

    View Slide

  41. No { }, (), and ;
    // javascript
    if(age > 20){
    voe();
    }
    # coffeescript
    if age > 20
    voe()

    View Slide

  42. Variable & Function

    View Slide

  43. Variable
    You don’t have o declare it before using it.
    // javascript
    # coffeescript

    View Slide

  44. Variable
    You don’t have o declare it before using it.
    // javascript
    # coffeescript
    lang = ["php", "python", "perl", "ruby"]
    name = "Eddie"

    View Slide

  45. Variable
    You don’t have o declare it before using it.
    // javascript
    # coffeescript
    lang = ["php", "python", "perl", "ruby"]
    name = "Eddie"
    var lang, name;
    lang = ["php", "python", "perl", "ruby"];
    name = "Eddie";

    View Slide

  46. Function
    // javascript
    # coffeescript

    View Slide

  47. Function
    // javascript
    # coffeescript
    say_hello = (guest1, guest2 = "Nayumi") ->
    "Hello #{guest1} and #{guest2}"
    say_hello "Eddie"

    View Slide

  48. Function
    // javascript
    # coffeescript
    say_hello = (guest1, guest2 = "Nayumi") ->
    "Hello #{guest1} and #{guest2}"
    say_hello "Eddie"
    var say_hello;
    say_hello = function(guest1, guest2) {
    if (guest2 == null) {
    guest2 = "Nayumi";
    }
    return "Hello " + guest1 + " and " + guest2;
    };
    say_hello("Eddie");

    View Slide

  49. Array

    View Slide

  50. Array
    // javascript
    # coffeescript

    View Slide

  51. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]

    View Slide

  52. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];

    View Slide

  53. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]

    View Slide

  54. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  55. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    eachers = [1...10]
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  56. Array
    // javascript
    # coffeescript
    heroes = [
    'Spider Man',
    'Capain America',
    'X-men',
    'Iron Man'
    ]
    var heroes, students, eachers;
    heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
    students = [1..10]
    eachers = [1...10]
    eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    View Slide

  57. Array
    # coffeescript
    // javascript

    View Slide

  58. Array
    # coffeescript
    // javascript
    heroes[0..2]

    View Slide

  59. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes.slice(0, 3);

    View Slide

  60. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes[1..2] = ["Batman", "ThunderCat"]
    heroes.slice(0, 3);

    View Slide

  61. Array
    # coffeescript
    // javascript
    heroes[0..2]
    heroes[1..2] = ["Batman", "ThunderCat"]
    var _ref;
    [].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref;
    heroes.slice(0, 3);

    View Slide

  62. Object

    View Slide

  63. Object
    // javascript
    # coffeescript

    View Slide

  64. Object
    // javascript
    # coffeescript
    eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }

    View Slide

  65. Object
    // javascript
    # coffeescript
    eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }
    var eddie;
    eddie = {
    name: "Eddie Kao",
    age: 18,
    speciality: "eat"
    };

    View Slide

  66. Object
    # coffeescript // javascript

    View Slide

  67. Object
    # coffeescript // javascript
    eddie =
    name: "Eddie Kao"
    age: 18
    lovers:
    nayumi:
    name: "Nayumi Hung"
    age: 18
    mary:
    name: "Mary Bloody"
    age: 20

    View Slide

  68. Object
    # coffeescript // javascript
    eddie =
    name: "Eddie Kao"
    age: 18
    lovers:
    nayumi:
    name: "Nayumi Hung"
    age: 18
    mary:
    name: "Mary Bloody"
    age: 20
    var eddie;
    eddie = {
    name: "Eddie Kao",
    age: 18,
    lovers: {
    nayumi: {
    name: "Nayumi Hung",
    age: 18
    },
    mary: {
    name: "Mary Bloody",
    age: 20
    }
    }
    };

    View Slide

  69. Loop

    View Slide

  70. Loop
    # coffeescript // javascript

    View Slide

  71. Loop
    # coffeescript // javascript
    alert i for i in [1..10]

    View Slide

  72. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }

    View Slide

  73. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0

    View Slide

  74. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }

    View Slide

  75. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }

    View Slide

  76. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }

    View Slide

  77. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    alert i * 2 for i in [1..10]
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }

    View Slide

  78. Loop
    # coffeescript // javascript
    alert i for i in [1..10] var i, _sep;
    for (i = 1; i <= 10; i++) {
    alert(i);
    }
    alert i for i in [1..10] when i
    % 2 == 0
    alert i for i in [1..10] by 2
    alert i * 2 for i in [1..10]
    for (i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
    alert(i);
    }
    }
    for (i = 1, _sep = 2; i <= 10; i +=
    _sep) {
    alert(i);
    }
    for (i = 1; i <= 10; i++) {
    alert(i * 2);
    }

    View Slide

  79. Modifier

    View Slide

  80. Modifier
    // javascript
    You can put "if", "unless", "while", "until" behind
    # coffeescript

    View Slide

  81. Modifier
    // javascript
    You can put "if", "unless", "while", "until" behind
    # coffeescript
    if (age > 20) {
    voe();
    }

    View Slide

  82. Modifier
    // javascript
    You can put "if", "unless", "while", "until" behind
    # coffeescript
    voe() if age > 20
    if (age > 20) {
    voe();
    }

    View Slide

  83. Synactic Sugar

    View Slide

  84. Synactic Sugar
    # coffeescript // javascript
    wrie more readable code by using synactic sugar.

    View Slide

  85. Synactic Sugar
    # coffeescript // javascript
    wrie more readable code by using synactic sugar.
    is ===
    isnt !==
    true, on, yes true
    false, off, no false
    not !
    and &&
    or ||
    unless if not
    until while not
    of in

    View Slide

  86. // javascript
    # coffeescript
    Synactic Sugar

    View Slide

  87. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off

    View Slide

  88. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    if (light === false) {
    alert("I can't see anything");
    }

    View Slide

  89. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    if (light === false) {
    alert("I can't see anything");
    }
    alert "It's impossible!" if eddie isnt handsome

    View Slide

  90. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    if (light === false) {
    alert("I can't see anything");
    }
    alert "It's impossible!" if eddie isnt handsome
    if (eddie !== handsome) {
    alert("It's impossible!");
    }

    View Slide

  91. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    if (light === false) {
    alert("I can't see anything");
    }
    alert "It's impossible!" if eddie isnt handsome
    if girl is not single
    alert "Don't Touch! Be Careful!"
    if (eddie !== handsome) {
    alert("It's impossible!");
    }

    View Slide

  92. // javascript
    # coffeescript
    Synactic Sugar
    alert "I can't see anything" if light is off
    if (light === false) {
    alert("I can't see anything");
    }
    alert "It's impossible!" if eddie isnt handsome
    if girl is not single
    alert "Don't Touch! Be Careful!"
    if (eddie !== handsome) {
    alert("It's impossible!");
    }
    if (girl === !single) {
    alert("Don't Touch! Be Careful!");
    }

    View Slide

  93. // javascript
    Synactic Sugar

    View Slide

  94. // javascript
    Synactic Sugar
    if (Answer === true) {
    alert("I'll marry you!");
    }

    View Slide

  95. alert "I'll marry you!" if Answer is yes
    // javascript
    Synactic Sugar
    if (Answer === true) {
    alert("I'll marry you!");
    }

    View Slide

  96. // javascript
    # coffeescript
    Synactic Sugar

    View Slide

  97. // javascript
    # coffeescript
    Synactic Sugar
    age ?= 18

    View Slide

  98. // javascript
    # coffeescript
    Synactic Sugar
    age ?= 18
    if (typeof age !== "undefined" && age !== null) {
    age;
    } else {
    age = 18;
    };

    View Slide

  99. Raw JavaScript
    If you still prefer the original way

    View Slide

  100. Raw JavaScript
    // javascript
    # coffeescript

    View Slide

  101. Raw JavaScript
    // javascript
    # coffeescript
    say_hello = `function(name){
    return "Hello, " + name
    }`

    View Slide

  102. Raw JavaScript
    // javascript
    # coffeescript
    say_hello = `function(name){
    return "Hello, " + name
    }`
    var say_hello;
    say_hello = function(name){
    return "Hello, " + name
    };

    View Slide

  103. OOP

    View Slide

  104. // javascript
    # coffeescript
    OOP - new

    View Slide

  105. // javascript
    # coffeescript
    OOP - new
    class Animal
    construcor: (name, age) ->
    this.name = name
    this.age = age
    animal = new Animal("eddie", 18)
    alert animal

    View Slide

  106. // javascript
    # coffeescript
    OOP - new
    class Animal
    construcor: (name, age) ->
    this.name = name
    this.age = age
    animal = new Animal("eddie", 18)
    alert animal
    var Animal, animal;
    Animal = (function() {
    function Animal(name, age) {
    this.name = name;
    this.age = age;
    }
    return Animal;
    })();
    animal = new Animal("eddie", 18);
    alert(animal);

    View Slide

  107. // javascript
    # coffeescript
    OOP - method

    View Slide

  108. // javascript
    # coffeescript
    OOP - method
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    console.log "Hello, #{something}"
    animal = new Animal("eddie", 18)
    animal.say_hello("CoffeeScript")

    View Slide

  109. // javascript
    # coffeescript
    OOP - method
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    console.log "Hello, #{something}"
    animal = new Animal("eddie", 18)
    animal.say_hello("CoffeeScript")
    var Animal, animal;
    Animal = (function() {
    function Animal(name, age) {
    this.name = name;
    this.age = age;
    }
    Animal.prootype.say_hello = function(something) {
    return console.log("Hello, " + something);
    };
    return Animal;
    })();
    animal = new Animal("eddie", 18);
    animal.say_hello("CoffeeScript");

    View Slide

  110. // javascript
    OOP - inheriance
    # coffeescript

    View Slide

  111. // javascript
    OOP - inheriance
    # coffeescript
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    alert "Hello, #{something}"
    class Human exends Animal
    walk: ->
    alert "I can walk with my foots!"
    eddie = new Human("eddie", 18)
    eddie.say_hello "CoffeeScript"
    eddie.walk()

    View Slide

  112. // javascript
    OOP - inheriance
    # coffeescript
    class Animal
    construcor: (@name, @age) ->
    say_hello: (something) ->
    alert "Hello, #{something}"
    class Human exends Animal
    walk: ->
    alert "I can walk with my foots!"
    eddie = new Human("eddie", 18)
    eddie.say_hello "CoffeeScript"
    eddie.walk()
    TL; DR

    View Slide

  113. References
    http://blog.eddie.com.w/category/coffeescrip/
    http://jashkenas.github.com/coffee-scrip/
    http://pragprog.com/book/tbcoffee/coffeescrip
    Websies:
    Book:

    View Slide

  114. the good parts
    I love
    photo by Steve Ganz

    View Slide

  115. Coding Style
    I Love..
    I love Python & Ruby, of course :)

    View Slide

  116. Indenation!
    I Love..

    View Slide

  117. Anonymous function
    No global function and variable by default
    I Love..

    View Slide

  118. String Inerpolation
    I Love..
    sorry, but string building really sucks :)

    View Slide

  119. List Comprehension
    I Love..

    View Slide

  120. Synactic Sugar
    I Love..

    View Slide

  121. English-like grammar
    I Love..
    alert "of course it is!" if PHPConf is awesome

    View Slide

  122. Comparison & Equality
    I Love..
    "true" == true // true
    "true" === true // false

    View Slide

  123. Works with other JS
    frameworks well.
    Because it’s just JavaScrip
    I Love..

    View Slide

  124. Compilation
    I Love..
    JSLint Approved

    View Slide

  125. What else?

    View Slide

  126. CoffeeScript compiler is
    writen in CoffeeScript.

    View Slide

  127. Tianium Mobile
    http://blog.eddie.com.w/2011/08/03/using-coffeescrip-in-titanium-studio/

    View Slide

  128. photo by Andrew

    View Slide

  129. Immature?
    photo by theseanster93

    View Slide

  130. Performance?
    photo by theseanster93
    photo by chr1sl4i

    View Slide

  131. CoffeeScript Means Giving
    Up on JavaScript?

    View Slide

  132. Learn JavaScript, and Use
    CoffeeScript.

    View Slide

  133. Any Question?
    photo by jamuraa

    View Slide

  134. ৷ԈᎲ
    Conacts
    photo by Eddie
    Websie
    Blog
    Plurk
    Facebook
    Google Plus
    Twiter
    Email
    Mobile
    http://www.eddie.com.tw
    http://blog.eddie.com.tw
    http://www.plurk.com/aquarianboy
    http://www.facebook.com/eddiekao
    http://www.eddie.com.tw/+
    https://twiter.com/#!/eddiekao
    [email protected]
    +886-928-617-687

    View Slide