Coffee script

C'EST QUOI ?Une "surcouche" javascriptLangage jeune (déc 2009)

Une syntaxe inspiré de Python, Ruby et Haskell

POURQUOI L'UTILISER ?Rendre le code plus lisible (donc plus maintenable)

Rapidité de développementEviter les nombreuses erreurs possible en JS

EN PRATIQUE1.  Ecrire son code2.  Compiler en Javascript

3.  Inclure son fichier js

coffee --compile file.coffee

coffee --watch --compile file.coffee

VARIABLES

DÉFINIR UNE VARIABLE

bla = "une variable"

var bla;

bla = "une variable";

matrix = [ 1, 0, 1 0, 1, 0 1, 0, 1]

map = a: 1 b: 2 c: 3

var map, matrix;

matrix = [1, 0, 1, 0, 1, 0, 1, 0, 1];

map = { a: 1, b: 2, c: 3};

TESTER UNE VARIABLE

if bla?

if (typeof bla !== "undefined" && bla !== null)

AFFECTER PLUSIEURS VARIABLES

Output

[var1, var2..., var3] = [1, 2, 3, 4, 5]

var var1, var2, var3, _i, _ref, __slice = [].slice;

_ref = [1, 2, 3, 4, 5], var1 = _ref[0], var2 = 3 <= _ref.length ? __slice.call(_ref, 1, _i = _ref.length - 1) : (_i = 1, []), var3 = _ref[_i++];

var1 => 1var2 => [2, 3, 4]var3 => 5

CONDITIONS

MOT CLÉ

if / unless is / isnt 

if var1 is var2 console.log var1

console.log var1 unless var1 isnt var2

if (var1 === var2) { console.log(var1);}

CONDITIONS MULTIPLES

Les "classiques" && et || sont remplacés par 'and' et 'or'

if a and b or c

if (a && b || c)

if 200 < a < 300

if (200 < a && a < 300)

CONDITIONS TERNAIRES

if var1 is var2 then console.log "=" else console.log "!="

var3 = if var1 is var2 then 3 else 4

var var3;

if (var1 === var2) { console.log("=");} else { console.log("!=");}

var3 = var1 === var2 ? 3 : 4;

BOUCLES

COLLECTIONLe mot clé in pour itérer sur les éléments d'une collection

for obj in collection console.log obj

console.log obj for obj in collection

var obj, _i, _len;

for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; console.log(obj);}

FILTRESLe mot clé when pour mettre une condition à notre boucle

for obj in collection when obj isnt anotherObj console.log "object: #{obj}"

var obj, _i, _len;

for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; if (obj !== anotherObj) { console.log("object: " + obj); }}

WHILE

i = 0while i < 10 i++

i = 0until i >= 10 i++

var i;

i = 0;

while (i < 10) { i++;}

i = 0;

while (!(i >= 10)) { i++;}

FONCTIONS

FONCTIONS ANONYMES

() -> console.log "fonction anonyme"

(function() { return console.log("fonction anonyme");});

$.ajax url: "/" success: (data, textStatus, jqXHR) -> console.log data

FONCTIONS

sum = (collection=[]) -> res = 0 res += elem for elem in collection res

var sum;

sum = function(collection) { var elem, res, _i, _len; if (collection == null) { collection = []; } res = 0; for (_i = 0, _len = collection.length; _i < _len; _i++) { elem = collection[_i]; res += elem; } return res;};

PORTÉ DES VARIABLES

a = -> var1 = 12 b = -> var2 = 23 var1 = 13 return

var a;

a = function() { var b, var1; var1 = 12; return b = function() { var var2; var2 = 23; var1 = 13; };};

CLASSES

DÉFINIR UNE CLASSE

class Ball constructor: (@x=0, @y=0) ->

move: (@x, @y) ->

var Ball;Ball = (function() {

function Ball(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0; }

Ball.prototype.move = function(x, y) { this.x = x; this.y = y; };

return Ball;})();

HÉRITAGE

class Object constructor: (@x=0, @y=0) -> move: (@x, @y) ->

class Ball extends Object constructor: (@x, @y, @radius) -> super @x, @y

explode: -> # do stuff

ball = new Ball()ball.move 10, 10ball.explode()

PROBLÈMES

WRAP

Tous les fichiers compilés sont englobés dans une fonction anonyme (par fichier)

SOLUTION

Compiler avec l'option

Rendre accessible les variables dans window

Joindre les fichiers

--no-wrap

window.Ball = class Ball ...

window.Ball = Ball

--join

CONTEXT

Quand une fonction est appelée par un context différent

SOLUTION

A la mano :'(

$("#ball").click -> @explode() # erreur car @ remplacé par "this" (le DOM cliqué) $(this).remove() # ok

$("#ball").click => @explode() # ok $(this).remove() # erreur car this est l'object Ball

_this = @ $("#ball").click -> _this.explode() $(this).remove()

PAS DE MACROS :(

#> DEBUG = yes#> SWAP = (var1, var2) ->#> tmp = var1#> var1 = var2#> var2 = tmp

a = 2b = 3SWAP a, b#> if DEBUG is yes console.log a, b#> else $("output").html "a: #{a}, b: #{b}"

# Avec DEBUG is yesa = 2;b = 3;tmp = a;a = b;b = tmp;console.log(a, b);

# Avec DEBUG is noa = 2;b = 3;tmp = a;a = b;b = tmp;$("output").html("a: " + a + ", b:" + b);

EQUIVALENT À COFFEESCRIPTTypeScript (Microsoft)Sweetjs (Mozilla)Dart (Google)  

LIENS UTILEShttp://js2coffee.org/http://coffeescript.org/https://github.com/jashkenas/coffee­script

ANTHONY ESTEBE

“DÉVELOPPEUR WEB FREELANCE

twitter: @antho1404skype: antho1404github: antho1404

site: ”

http://anthonyestebe.com