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

Brincando com Coffeescript

Duke
March 17, 2012

Brincando com Coffeescript

Duke

March 17, 2012
Tweet

More Decks by Duke

Other Decks in Programming

Transcript

  1. Brincando com Coffeescript Sampa-JS

  2. Duke Khaos @dukex github.com/dukex

  3. Brincando com Coffeescript Sampa-JS

  4. Hates gonna hate

  5. None
  6. DON’T PANIC!

  7. Coffeescript? Estamos na época das meta-linguagens. SASS, LESS, HAML... Javascript

    sempre teve um excelente modelo de objetos em seu interior. CoffeeScript é uma tentativa de expôr as boas partes do Javascript de maneira simples
  8. It’s just JavaScript A regra de outro do CoffeeScript é:

    “É somente Javascript”. O código compila um-para-um no JS equivalente, e não há nenhuma interpretação em tempo de execução. Basicamente traz conceitos do mundo Python e Ruby, eliminando alguns ruídos do JavaScript.
  9. Python Em CoffeeScript também usamos o conceito de blocos delimitados

    por identação (significant whitespace)
  10. Python Em CoffeeScript também usamos o conceito de blocos delimitados

    por identação (significant whitespace)
  11. def say_hello() return “Hello World” Python Em CoffeeScript também usamos

    o conceito de blocos delimitados por identação (significant whitespace)
  12. def say_hello() return “Hello World” say_hello = ()-> “Hello World”

    Python Em CoffeeScript também usamos o conceito de blocos delimitados por identação (significant whitespace)
  13. def say_hello() return “Hello World” say_hello = ()-> “Hello World”

    var say_hello; say_hello = function() { return "Hello World"; }; Python Em CoffeeScript também usamos o conceito de blocos delimitados por identação (significant whitespace)
  14. Ruby Assim como em Ruby, o resultado da última expressão

    executada é retornada automaticamente, eliminando a necessidade de usar return.
  15. Ruby Assim como em Ruby, o resultado da última expressão

    executada é retornada automaticamente, eliminando a necessidade de usar return.
  16. def say_hello(word) “Hello #{word}” end Ruby Assim como em Ruby,

    o resultado da última expressão executada é retornada automaticamente, eliminando a necessidade de usar return.
  17. def say_hello(word) “Hello #{word}” end say_hello = (word)-> “Hello #{word}”

    Ruby Assim como em Ruby, o resultado da última expressão executada é retornada automaticamente, eliminando a necessidade de usar return.
  18. def say_hello(word) “Hello #{word}” end say_hello = (word)-> “Hello #{word}”

    var say_hello; say_hello = function(word) { return "Hello " + word; }; Ruby Assim como em Ruby, o resultado da última expressão executada é retornada automaticamente, eliminando a necessidade de usar return.
  19. Coffeescript!

  20. FizzBuzz

  21. FizzBuzz

  22. FizzBuzz 1 var fizz = "fizz"; 2 var buzz =

    "buzz"; 3 4 for (i=1;i<=100;i++){ 5 switch (i){ 6 case (i % 3 == 0 && i % 5 == 0): 7 document.write( fizz + buzz ); 8 break; 9 case (i % 3 == 0): 10 document.write( fizz ); 11 break; 12 case (i % 5 == 0): 13 document.write( buzz ); 14 break; 15 default 16 document.write( i ); 17 } 18 }
  23. FizzBuzz 1 var fizz = "fizz"; 2 var buzz =

    "buzz"; 3 4 for (i=1;i<=100;i++){ 5 switch (i){ 6 case (i % 3 == 0 && i % 5 == 0): 7 document.write( fizz + buzz ); 8 break; 9 case (i % 3 == 0): 10 document.write( fizz ); 11 break; 12 case (i % 5 == 0): 13 document.write( buzz ); 14 break; 15 default 16 document.write( i ); 17 } 18 } 1 fizz = "fizz" 2 buzz = "buzz" 3 4 for i in [0..100] 5 switch i 6 when (i % 3 == 0 && i % 5 == 0) 7 document.write( fizz + buzz ) 8 break 9 when (i % 3 == 0) 10 document.write( fizz ) 11 break 12 when (i % 5 == 0) 13 document.write( buzz ) 14 break 15 else 16 document.write( i )
  24. FizzBuzz 1 var fizz = "fizz"; 2 var buzz =

    "buzz"; 3 4 for (i=1;i<=100;i++){ 5 switch (i){ 6 case (i % 3 == 0 && i % 5 == 0): 7 document.write( fizz + buzz ); 8 break; 9 case (i % 3 == 0): 10 document.write( fizz ); 11 break; 12 case (i % 5 == 0): 13 document.write( buzz ); 14 break; 15 default 16 document.write( i ); 17 } 18 } 1 fizz = "fizz" 2 buzz = "buzz" 3 4 for i in [0..100] 5 switch i 6 when (i % 3 == 0 && i % 5 == 0) 7 document.write( fizz + buzz ) 8 break 9 when (i % 3 == 0) 10 document.write( fizz ) 11 break 12 when (i % 5 == 0) 13 document.write( buzz ) 14 break 15 else 16 document.write( i ) 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3 is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100]
  25. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  26. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  27. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  28. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  29. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  30. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  31. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  32. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  33. 1 fizzbuzz = (n)-> 2 fizz = 'fizz' if n%3

    is 0 3 buzz = 'buzz' if n%5 is 0 4 "#{fizz}#{buzz}" or n 5 6 fizzbuzz i for i in [1..100] if inline is no lugar do == or no lugar do || Ranges no ruby Array comprehensions
  34. Estético ou não?

  35. None
  36. number = -42 if opposite //if (opposite) number = -42;

  37. number = -42 if opposite //if (opposite) number = -42;

    date = if friday then sue else jill // date = friday ? sue : jill;
  38. number = -42 if opposite //if (opposite) number = -42;

    date = if friday then sue else jill // date = friday ? sue : jill; options or= defaults // options || (options = defaults);
  39. number = -42 if opposite //if (opposite) number = -42;

    date = if friday then sue else jill // date = friday ? sue : jill; options or= defaults // options || (options = defaults); eat food for food in foods when food isnt 'chocolate' // for (_j = 0, _len3 = foods.length; _j < _len3; _j++) { // food = foods[_j]; // if (food !== 'chocolate') eat(food); // }
  40. CoffeeScript is isnt not and or true, yes, on false,

    no, off @, this of in JavaScript === !== ! && || true false this in sem equivalent
  41. Classes, Inheritance, and Super syntactic sugar

  42. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." Classes, Inheritance, and Super syntactic sugar
  43. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Classes, Inheritance, and Super syntactic sugar
  44. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); python = new Animal "Pong" python.move() // Pong moved 3m. python.name // Pong Classes, Inheritance, and Super syntactic sugar
  45. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m."
  46. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." class Snake move: -> alert "Slithering..."
  47. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." class Snake move: -> alert "Slithering..." extends Animal
  48. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." class Snake move: -> alert "Slithering..." extends Animal super 5
  49. Javascript tem classes abertas

  50. String::dasherize = -> this.replace /_/g, "-" Javascript tem classes abertas

  51. String::dasherize = -> this.replace /_/g, "-" Array::last = -> this[this.lenght-1]

    Javascript tem classes abertas
  52. Chained Comparisons Comparações acorrentado Python

  53. cholesterol = 127 healthy = 200 > cholesterol > 60

    Chained Comparisons Comparações acorrentado Python
  54. cholesterol = 127 healthy = 200 > cholesterol > 60

    var cholesterol, healthy; cholesterol = 127; healthy = (200 > cholesterol && cholesterol > 60); Chained Comparisons Comparações acorrentado Python
  55. None
  56. 1 hello: (first_name, last_name...) -> 2 "Hello, #{last_name[last_name.lenght-1]}" 3 4

    hello "Emerson", "Vinicius", "Moreira" operador splat
  57. 1 freshfruit: [' banana', ' loganberry ', 'passion fruit ']

    2 weapons: weapon.replace(/^\s+|\s+$/g, '') for weapon in freshfruit List Comprehensions como em Python, que é uma forma de criar uma lista a partir de outra:
  58. 1 numbers = [0, 1, 2, 3, 4, 5, 6,

    7, 8, 9] 2 numbers[3..6] = [-3, -4, -5, -6] 3 # 0,1,2,-3,-4,-5,-6,7,8,9 Array Slicing
  59. 1 solipsism = true if mind? operator ? returns true

    unless a variable is null or undefined
  60. 1 hi = `function() { 2 return [document.title, "Hello JavaScript"].join(":

    "); 3 }`
  61. Da para usar jQuery?

  62. 1 $(document).ready -> 2 $(".external").live "click", (e)-> 3 self =

    $(this) 4 $("#external").dialog 5 href: self.attr("href") 6 e.preventDefaul()
  63. E como eu testo? Coffeescript gera javascript

  64. por que usar coffeescript? codigo legivel sem ruido aproveita melhor

    algumas coisas do javascript, como a de objetos abertos JavaScript Improved facil de aprender
  65. jashkenas.github.com/coffee-script akitaonrails.com/2011/04/16/a- controversia-coffeescript akitaonrails.com/2010/03/27/ brincando-com-coffee-script ricardo.cc/2011/06/02/10- CoffeeScript-One-Liners-to-Impress- Your-Friends.html map reduce

    Ultimo link tem coisas que não tem nem na documentação alem de um fizzbuzz em uma linha
  66. Obrigado!