A Taste of CoffeeScript (Parte 1)

Ammettiamolo, JavaScript non ha sempre avuto la migliore reputazione tra gli sviluppatori, e dal momento della fondazione di CoffeeScript nel 2009 questo piccolo linguaggio ha preso d'assalto il mondo degli sviluppatori JavaScript; principalmente perché supera ciò che alcuni potrebbero dire è l'aspetto peggiore di JavaScript: la sintassi del suo codice.

Anche se questo è un nuovo linguaggio, lo raccoglierete molto velocemente principalmente perché è un JavaScript riformulato; è essenzialmente JavaScript più bello, più semplice.

Durante la scrittura di CoffeeScript non dimenticare che stai scrivendo un codice che prima di essere distribuito verrà compilato in JavaScript seguendo le best practice e superando il test JSLint, quindi è una cosa in meno di cui ti devi preoccupare. L'output sarà ancora JavaScript valido che il browser non avrà problemi nella lettura. CoffeeScript è quello che JavaScript è SASS per CSS: un modo per scrivere codice più semplice e più produttivo.

Installazione e utilizzo

CoffeeScript è un'utilità node.js quindi per installarlo è necessario avere node.js installato e il gestore di pacchetti nodo. Supponendo che tu abbia installato questi due pacchetti tutto quello che devi fare è andare al tuo terminale e installare CoffeeScript con il gestore pacchetti usando il codice:

npm install -g coffee-script

Solo con questo hai installato CoffeeScript sul tuo computer. Per compilare un file .coffee in un file JavaScript devi digitare:

coffee --compile script.coffee

Questo compilerà il file script.coffee in script.js nella stessa directory ma lo farà solo quando si esegue il comando, se si desidera che compili in ogni modifica apportata nel file caffè è necessario aggiungere il -watch prima la compilazione:

coffee --watch --compile script.coffee

Con questo aggiunto il tuo JavaScript verrà compilato ogni volta che apporti una modifica al tuo file .coffee.

variabili

Quando scriviamo una variabile JavaScript dobbiamo anteporre la parola chiave var, con CoffeeScript quella parola chiave è scomparsa e puoi semplicemente digitare la variabile e assegnarla a qualcosa. Un'altra cosa da tenere a mente è che CoffeeScript utilizza molti metodi di indentazione per evitare punti e virgola e che il linguaggio per capire che l'istruzione della variabile è completa è sufficiente spostarsi su una nuova riga:

age = 21country = "Portugal"

In JavaScript dovresti digitare qualcosa come:

var age = 21;var country = "Portugal";

È un piccolo esempio, ma puoi iniziare a vedere quanto è potente CoffeeScript quando si tratta di semplificare il codice.

Operatori logici e comparativi

Ricorda tutto il tempo trascorso a memorizzare gli operatori JavaScript? Ricordati di chiedersi perché hai dovuto usare === invece di usare solo è? Anche CoffeeScript si prende cura di questo. Offre alcuni alias davvero belli per gli operatori:

Operatori di confronto

• === ora può essere scambiato semplicemente è;
• ! == è ugualmente trasformato in isnt più leggibile .

Operatori logici

• Invece di usare && puoi usare e;
• come per || d'ora in poi puoi digitare o;
• il piccolo punto esclamativo che indicava un non è commutato per la cosa più logica: no.

Se affermazioni

Un'altra cosa di cui CoffeeScript si sbarazza sono le parentesi graffe. Utilizza il metodo di indentazione per dichiarare quando ci si trova all'interno di un'istruzione, se le istruzioni funzionano come JavaScript ma non sono necessarie le parentesi graffe o le parentesi; basta indentare il codice che desideri eseguire quando l'affermazione è vera:

if work > 24 and sleep < 8vacations()elsework()

verrà compilato in JavaScript come:

if (work > 24 && sleep < 8) {vacations();} else {work();}

Spero che tu stia iniziando a vedere i benefici di CoffeeScript solo con queste semplici dimostrazioni di quanto possa rendere pulito il tuo codice, e un codice più pulito significa un codice più gestibile.

Andare in loop attraverso gli array

Andare in loop attraverso gli array è una delle cose che devi fare in ogni app JavaScript che scrivi e la sintassi per il loro looping in JavaScript non è la più semplice o la più pulita, penso che questo sia il posto dove CoffeeScript brilla davvero. Per fare un ciclo attraverso un array usiamo un ciclo for..in, in questo modo:

tasks = ['Design','Code','Groceries']for task in tasksalert task

Tutto ciò che questo codice farà è leggere tutte le cose nell'array e poi allertare poi uno per uno, solo per rendere le cose ancora più semplici puoi anche scrivere il per ... in loop su una riga, in questo modo:

tasks = ['Design','Code','Groceries']alert task for task in tasks

È semplicemente molto più leggibile e mantenibile rispetto al vaniglia JavaScript, parlando del quale il codice prodotto da CoffeeScript per queste due righe sarebbe:

var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}

Mentre i loop

Anche se i loop sono molto utili durante la costruzione della tua app JavaScript e CoffeeScript non riesce a semplificare la lettura e la scrittura, ad esempio:

while sleep < 8sleep()

Oppure puoi scrivere tutto su una riga se preferisci:

while sleep < 8 then sleep()

O:

sleep() until sleep > 8

In puro JavaScript ciò si tradurrebbe in:

//thenwhile (sleep < 8) {sleep();}

O:

//untilwhile (!(sleep > 8)) {sleep();}

funzioni

Le funzioni sono anche un'altra parte vitale di qualsiasi linguaggio di programmazione e anche se le funzioni in JavaScript non sono così complicate come alcune altre parti, CoffeeScript lo semplifica al massimo, una semplice funzione che prende il nome di qualcuno e avvisa che può essere scritta in questo modo :

sayHi = (name) ->return "Hello " + namealert sayHi('Sara')

Tutto ciò che fai è nominare la funzione, in questo caso le funzioni sono chiamate sayHi, e quindi dopo il segno di uguale devi specificare i parametri. Qui il nome è il parametro singolo, dopo aver definito la base della nostra funzione, dobbiamo digitare -> seguito nella riga successiva da ciò che vogliamo che la funzione faccia in modo che CoffeeScript sappia che siamo all'interno della funzione. In questo caso tutto ciò che voglio è restituire "Ciao" e poi il nome della persona e infine uso un semplice avviso per chiamare la funzione con il nome. Possiamo anche scrivere questo in una riga eliminando l'inserimento e il rientro semplicemente scrivendo ciò che la funzione farà dopo il ->:

sayHi = (name) -> return "Hello " + name

Questo piccolo frammento di codice verrà compilato nel seguente codice JavaScript:

var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

Ovviamente questa è stata una funzione molto semplice ma, come puoi vedere, ci ha salvato 3 righe di codice e ovviamente in JavaScript potremmo semplicemente nominare la variabile, in quanto dichiariamo la funzione in questo modo:

var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

Gli esempi che ho dato qui sono ciò che compila CoffeeScript e anche se nella maggior parte dei casi ci sono modi più semplici per scrivere qualcosa, tutto il codice JavaScript compilato è valido e semantico.

Conclusione

Questo è solo l'inizio di ciò che CoffeeScript può darti, quando le cose iniziano a diventare più complesse questo piccolo linguaggio ti darà un sacco di leverage rispetto a JavaScript, meno codice che devi scrivere, più codice leggibile dall'uomo e più manutenibile , in modo che tu possa tornare a un sito web un anno dopo e sapere cosa sta succedendo in quel JavaScript.

Restate sintonizzati per la seconda parte di questa serie in cui vi mostrerò come combinare CoffeeScript con jQuery e LocalStorage per creare una semplice applicazione per la lista dei contatti.

Hai usato CoffeeScript per semplificare JavaScript? Quali parti di CoffeeScript preferisci usare Javascript? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine del caffè via Shutterstock.

• ← A Taste of CoffeeScript (Parte 2)
• Impara a contare con i CSS →