CoffeeScript

CoffeeScript c'est quoi?

CoffeeScript est un petit langage qui compile du Javascript. Il vous permet d'écrire du javascript d'une manière plus efficace.

La règle d'or de CoffeeScript est "C'est juste du javascript". Le code compilé est du javascript, vous pouvez utiliser des librairies javascript existant dans vos projets CoffeeScript et vice-versa

CoffeeScript ne remplace pas le javascript, il n'est qu'un générateur de code javascript. Votre navigateur n'a besoin d'aucun plugin supplémentaire et vous pouvez utiliser vos librairies préférées comme javascript sans aucun problème! Il est donc aussi rapide que du simple javascript, voire plus rapide dans certains cas -car optimisé-.

Installer coffee-script

sudo npm install -g coffee-script

Compiler vos scripts CoffeeScript

Pour compiler vos fichier *.coffee, vous pouvez lancer la commande suivante:

coffee --compile --output lib/ src/

Mais si vous êtes une grosse feignasse comme moi, vous pouvez passer par Grunt qui le fera pour vous en temps réel

Apprendre CoffeScript

Vous pouvez apprendre ce langage en quelques heures (minutes) sa syntaxe est extrèmement simple

Initialiser une variable

# CoffeeScript
firstname = "Olivier"
lastname = "ENGEL"

# Javascript
firstname = "Olivier";
lastname = "ENGEL";

Structure conditionnelles

# CoffeeScript
is_superhero = true if lastname == "ENGEL"

if firstname == "Olivier" and lastname == "ENGEL"
	console.log "Hey"
else
	console.log "Shit"

firstname = if firstname then "Zorro" else "Batman"

# Javascript
if (lastname === "ENGEL") {
	is_superhero = true;
}
if (firstname === "Olivier" && lastname === "ENGEL") {
	console.log("Hey");
} else {
	console.log("Shit");
}

firstname = firstname ? "Zorro" : "Batman";

Les fonctions

# CoffeeScript
square = (x) -> x * x
cube   = (x) -> square(x) * x

# Javascript
square = function(x) {
    return x * x;
};

cube = function(x) {
    return square(x) * x;
};

Array et Object

# CoffeeScript
list = ["Masque", "Epée", "Cape"]

obj =
    masque : true
    epee   : false
    cape   : false

obj2 = { masque : true, epee : false }

# Javascript
  list = ["Masque", "Epée", "Cape"];

  obj = {
    masque: true,
    epee: false,
    cape: false
  };

  obj2 = {
    masque: true,
    epee: false
  };

array slicing et array splicing

# CoffeeScript
a = [0,5,10,15,20,25,30,35,40,45,50]
console.log a[0..5]   # 0,5,10,15,20,25
console.log a[0...5]  # 0,5,10,15,20
console.log a[3...-2] # 15,20,25,30,35,40
console.log a[-2..]   # 45,50
console.log a[..]     # copie!
a[1..3] = [99,99,99] 
console.log a         # 0,99,99,99,20,25,30,35,40,45,50

# Javascript
a = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
console.log(a.slice(0, 6));
console.log(a.slice(0, 5));
console.log(a.slice(3, -2));
console.log(a.slice(-2));
console.log(a.slice(0));
[].splice.apply(a, [1, 3].concat(ref = [99, 99, 99])), ref;
console.log(a);

Les classes

# CoffeeScript
class Person
	constructor: (options) ->
		{@name, @age, @height} = options

	getName : () ->
		@name

	setName : (name = "Jean-Claude") ->
		@name = name

person = new Person name : "Olivier"
person.setName 'Zorro'

# Javascript
Person = (function() {
function Person(options) {
  this.name = options.name, this.age = options.age, this.height = options.height;
}

Person.prototype.getName = function() {
  return this.name;
};

Person.prototype.setName = function(name) {
  if (name == null) {
    name = "Jean-Claude";
  }
  return this.name = name;
};

return Person;

})();

person = new Person({
name: "Olivier"
});

person.setName('Zorro');

Liste en compréhension

# CoffeeScript
rslt = (console.log i for i in obj if i isnt "cape")

# Javascript
rslt = ((function() {
var j, len, results;
if (i !== "cape") {
  results = [];
  for (j = 0, len = obj.length; j < len; j++) {
    i = obj[j];
    results.push(console.log(i));
  }
  return results;
}
})());

Operateurs et Alias

CoffeeScript	JavaScript
`is`	`===`
`isnt`	`!==`
`not`	`!`
`and`	`&&`
`or`	`\|\|`
`true`, `yes`, `on`	`true`
`false`, `no`, `off`	`false`
`@`, `this`	`this`
`of`	`in`
`in`	no JS equivalent
`a ** b`	`Math.pow(a, b)`
`a // b`	`Math.floor(a / b)`
`a %% b`	`(a % b + b) % b`

CoffeeScript et AngularJS

Si vous aimez travailler avec AngularJS et CoffeeScript voici quelques morceaux de code qui pourront vous aider:

Exemple de Controller:

app = angular.module 'app', []

# Pour symfony
app.config ($interpolateProvider) ->
    $interpolateProvider.startSymbol('||')
    $interpolateProvider.endSymbol('||')

class FrontController

	@$inject: ['$scope'] 
	@products = []

	constructor: (@scope) ->
		@scope.name = 'demo value'
		@scope.login = @login
		@scope.products = @get_products()
		@scope.add_product = @add_product

	login: =>
		console.log "Login..."
		@scope.name = "login..."
		true

	get_products: =>
		products = []
		products.push {name: 'Masque', price : 125.5}
		products.push {name: 'Epee', price: 20.05}
		products

	add_product: =>
		@scope.products.push {name:'Velo', price: 145}
		true

app.controller 'FrontController', FrontController

Convertir un script Javascript en COFFEE

Dans certains cas vous devez utiliser des script js tout fait. Convertir à la main le Javascript en .coffee peut vite devenir long et ennuyeux. Heureusement il existe des outils qui le feront pour vous: js2coffee