Brincando com Coffeescript

Transcript

1. Brincando com Coffeescript Sampa-JS
2. Duke Khaos @dukex github.com/dukex
3. Brincando com Coffeescript Sampa-JS
4. Hates gonna hate
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?
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
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!