#267 CoffeeScript Basics

CoffeeScript è un linguaggio che viene compilato in Javascript. Poichè è stato incluso in Rails 3.1 molti sviluppatori gli daranno un occhiata per la prima volta. In questo episodio tradurremo del pre-esistente codice Javascript in Coffeescript, poichè questo è un ottimo metodo per impararlo. Il codice in questione è quello che abbiamo scritto durante l'episodio 261 [guarda, leggi] per la validazione dei numeri di carta di credito.

Se non hai mai usato CoffeeScript il sito ufficiale è un ottimo posto da dove cominciare. Lì potrai trovare alcuni esempi di codice CoffeeScript con l'equivalente Javascript che verrà generato. Il sito ha anche una pagina nella quale puoi programmare e compilare. Il codice Javascript compilato può essere eseguito nel browser e tutto questo avviene lato client senza nessuna chiamata AJAX al server.

Il codice che convertiremo è usato nella pagina sottostante e viene attivato dall'evento blur appena l'utente finisce di inserire il numero di carta di credito. Il numero inserito viene sottoposto a una validazione modulo 10 ed un messaggio di errore viene visualizzato vicino al campo di input in caso di errore.

Il relativo codice Javascript viene mostrato di seguito.

var CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, "");
  },
  
  validNumber: function(number) {
    var total = 0;
    number = this.cleanNumber(number);
    for (var i=number.length-1; i >= 0; i--) {
      var n = +number[i];
      if ((i+number.length) % 2 == 0) {
        n = n*2 > 9 ? n*2 - 9 : n*2;
      }
      total += n;
    };
    return total % 10 == 0;
  }
};

$(function() {
  $("#order_credit_card_number").blur(function() {
    if (CreditCard.validNumber(this.value)) {
      $("#credit_card_number_error").text("");
    } else {
      $("#credit_card_number_error").text("Invalid credit card number.");
    }
  });
});

La versione di Rails in questione è la 3.1 Release Candidate 1, ed è stata appena annunciata. Per aggiornare basta eseguire gem install rails --pre.

Primi cambiamenti

Per avere un file Coffeescript bisogna aggiungere l'estensione .coffee al nome del file. Possiamo ancora usare normale file JavaScript in Rails 3.1 mantenendo l'estensione .js. CoffeeScript è completamente opzionale.

Cominceremo commentando il codice in Javascript in modo tale da implementare a poco a poco la relativa versione in Coffeescript. La prima funzione da tradurre è cleanNumber la quale pulisce l'input da eventuali spazi o cancelletti.

var CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, "");
  }
}

L'equivalenete Coffeescript è questo:

CreditCard =
  cleanNumber: (number) ->
    number.replace /[- ]/g, ""

Con Coffeescript possiamo scrivere molto meno codice. Tabs vengono usati per definire il livello del blocco al posto delle parentesi tradizionali. Questo significa che avremo bisogno di utilizzare gli spazi in maniera consistente.

Possiamo anche rimuovere qualunque var così come non avremo bisogno di usare return alla fine della funzione. Il valore finale di una funzione viene ritornato automaticamente, esattamente come in Ruby. Anche i punti e virgola non sono necessari e possono essere rimossi.

Qualunque chiamata di funzione non ha bisogno nemmeno che i parametri vengano messi fra parentesi. L'eccezione si ha quando la funzione viene chiamata senza parametri, le parentesi sono in questo caso necessarie a Coffeescript per capire che si tratta di una chiamata di funzione.

Dobbiamo infine cambiare il modo in cui una funzione viene dichiarata. La parola chiave function deve essere sostituita da -> dopo gli argomenti della funzione. Un pò di pratica è necessaria per abituarsi a questo tipo di dichiarazioni.

Possiamo adesso compilare il codice e vedere cosa viene generato. Il risultato è molto simile all'originale.

var CreditCard;
CreditCard = {
  cleanNumber: function(number) {
    return number.replace(/[- ]/g, "");
  }
};

Passiamo adesso all funzione validNumber .

validNumber: function(number) {
  var total = 0;
  number = this.cleanNumber(number);
  for (var i=number.length-1; i >= 0; i--) {
    var n = +number[i];
    if ((i+number.length) % 2 == 0) {
      n = n*2 > 9 ? n*2 - 9 : n*2;
    }
    total += n;
  };
  return total % 10 == 0;
}

Utilizzando lo stesso procedimento di prima otterremo il seguente codice Coffeescript.

validNumber: (number) ->
  total = 0
  number = @cleanNumber(number)
  for i in [(number.length-1)..0]
    n = +number[i]
    if (i+number.length) % 2 == 0
      n = if n*2 > 9 then n*2 - 9 else n*2
    total += n
  total % 10 == 0

Abbiamo rimosso tutte le parentesi e i punti e virgola. Anche le parole chiavi var e return sono scomparse, ed al posto di function abbiamo adesso ->. Ma non è tutto.

Ogni occorrenza della parola chiave this è stata sostituita con @ quindi this.cleanNumber diventa @number. Possiamo rimuovere le parentesi esterne dal blocco if poichè non sono necessarie. Anche l'operatore ternario è cambiato e possiamo sostituirlo con if then else.

Il resto del codice sembra essere ok; dobbiamo solo cambiare il ciclo for. CoffeeScript gestice le iterazioni in maniera differente rispetto a JavaScript.Possiamo iterare sugli elementi di un array in questa maniera:

for number in [1,2,3]
 alert number

Il codice Javascript generato è il seguente:

var number, _i, _len, _ref;
_ref = [1, 2, 3];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  number = _ref[_i];
  alert(number);
}

Potremmo generare lo stesso codice così.

alert number for number in [1,2,3]

Possiamo sostituire l'array con un range se trattiamo sequenze di numeri.

for number in [1..3]
 alert number

Questo semplifica il codice generato:

var number;
for (number = 1; number <= 3; number++) {
  alert(number);
}

Se vogliamo decrementare invece che incrementare basta invertire l'input.

for number in [3..1]
 alert number

Questo è molto simile a quello che il ciclo for fa nella nostra funzione.

Possiamo adesso passare all'ultimo pezzo di codice.

$(function() {
  $("#order_credit_card_number").blur(function() {
    if (CreditCard.validNumber(this.value)) {
      $("#credit_card_number_error").text("");
    } else {
      $("#credit_card_number_error").text("Invalid credit card number.");
    }
  });
});

Questo codice jQuery lega l'esecuzione della validazione all'evento blur, il quale viene lanciato non appena l'utente finisce di riempire il campo per il numero di carta di credito. Per gestire jQuery in CoffeeScript non abbiamo bisogno di nulla di particolare. L' equivalente codice CoffeeScript è questo:

jQuery ->
  $("#order_credit_card_number").blur ->
    if CreditCard.validNumber(@value)
      $("#credit_card_number_error").text("")
    else
      $("#credit_card_number_error").text("Invalid credit card number.")

Come prima abbiamo rimosso parentesi e punti e virgola, sostituito function con -> e referenziato this con @. L'ultima cosa da cambiare è sostituire $ con jQuery. Questo non ha alcun impatto sulla funzionalità ma mette in evidenza il fatto che stiamo usando jQuery.

È giunto il momento di ricaricare il browser e vedere se tutto continua a funzionare come prima.

Funziona. Se inseriamo un numero invalido vedremo un messaggio di errore il quale scompare appena inseriamo un valore valido. Se guaridiamo alla fine del file risultante troveremo il codice Javascript generato.

(function() {
  var CreditCard;
  CreditCard = {
    cleanNumber: function(number) {
      return number.replace(/[- ]/g, "");
    },
    validNumber: function(number) {
      var i, n, total, _ref;
      total = 0;
      number = this.cleanNumber(number);
      for (i = _ref = number.length - 1; _ref <= 0 ? i <= 0 : i >= 0; _ref <= 0 ? i++ : i--) {
        n = +number[i];
        if ((i + number.length) % 2 === 0) {
          n = n * 2 > 9 ? n * 2 - 9 : n * 2;
        }
        total += n;
      }
      return total % 10 === 0;
    }
  };
  jQuery(function() {
    return $("#order_credit_card_number").blur(function() {
      if (CreditCard.validNumber(this.value)) {
        return $("#credit_card_number_error").text("");
      } else {
        return $("#credit_card_number_error").text("Invalid &crarr; 
          credit card number.");
      }
    });
  });
}).call(this);

Debuggare

Ma cosa succede se abbiamo un errore di sintassi in CoffeeScript? Se cambiamo il nostro CoffeeScript in maniera tale che non compili correttamente non riceveremo alcun messaggio dal browser. Ma se invece diamo un'occhiata alla console troveremo l'errore.

Ci sono abbastanza informazioni per capire quale sia l'errore e quale linea abbia causato.

Questo è tutto per questo episodio su CoffeeScript, ci sono molte altre cose da imparare a proposito di questo divertente linguaggio, quindi consigliamo di dare un'occhiata al sito ufficiale.