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
Slide 8
Slide 8 text
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.
Slide 9
Slide 9 text
Python
Em CoffeeScript também usamos o conceito de blocos delimitados por identação (significant
whitespace)
Slide 10
Slide 10 text
Python
Em CoffeeScript também usamos o conceito de blocos delimitados por identação (significant
whitespace)
Slide 11
Slide 11 text
def say_hello()
return “Hello World”
Python
Em CoffeeScript também usamos o conceito de blocos delimitados por identação (significant
whitespace)
Slide 12
Slide 12 text
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)
Slide 13
Slide 13 text
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)
Slide 14
Slide 14 text
Ruby
Assim como em Ruby, o resultado da última expressão executada é retornada
automaticamente, eliminando a necessidade de usar return.
Slide 15
Slide 15 text
Ruby
Assim como em Ruby, o resultado da última expressão executada é retornada
automaticamente, eliminando a necessidade de usar return.
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
Coffeescript!
Slide 20
Slide 20 text
FizzBuzz
Slide 21
Slide 21 text
FizzBuzz
Slide 22
Slide 22 text
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 }
Slide 23
Slide 23 text
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 )
Slide 24
Slide 24 text
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]
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
Estético ou não?
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
number = -42 if opposite
//if (opposite) number = -42;
Slide 37
Slide 37 text
number = -42 if opposite
//if (opposite) number = -42;
date = if friday then sue else jill
// date = friday ? sue : jill;
Slide 38
Slide 38 text
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);
Slide 39
Slide 39 text
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);
// }
Slide 40
Slide 40 text
CoffeeScript
is
isnt
not
and
or
true, yes, on
false, no, off
@, this
of
in
JavaScript
===
!==
!
&&
||
true
false
this
in
sem equivalent
Slide 41
Slide 41 text
Classes, Inheritance, and Super
syntactic sugar
Slide 42
Slide 42 text
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
Classes, Inheritance, and Super
syntactic sugar
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
Slide 46
Slide 46 text
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake
move: ->
alert "Slithering..."
Slide 47
Slide 47 text
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake
move: ->
alert "Slithering..."
extends Animal
Slide 48
Slide 48 text
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake
move: ->
alert "Slithering..."
extends Animal
super 5
Slide 49
Slide 49 text
Javascript tem classes abertas
Slide 50
Slide 50 text
String::dasherize = ->
this.replace /_/g, "-"
Javascript tem classes abertas
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:
por que usar coffeescript?
codigo legivel
sem ruido
aproveita melhor algumas coisas do javascript, como a de objetos abertos
JavaScript Improved
facil de aprender
Slide 65
Slide 65 text
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