CoffeeScript: JavaScript done right

 
09 maart 2012

Bij Sogyo voeren we regelmatig een C# versus Java-debat. Elke programmeertaal heeft namelijk z’n lovers en haters. Maar er bestaat er één waar niemand echt volledig fan van is: JavaScript. Robert Cailliau, samen met Tim Berners-Lee de grondlegger van het World Wide Web, zei ooit over JavaScript:

“I know only one programming language worse than C and that is JavaScript. (…) I was convinced that we needed to build-in a programming language, but the developers, Tim first, were very much opposed. It had to remain completely declarative. Maybe, but the net result is that the programming-vacuum filled itself with the most horrible kluge in the history of computing: JavaScript.”

Nu is het helemaal niet erg om een afkeer te hebben van een programmeertaal die je niet vaak gebruikt. Maar dat is bij JavaScript nu juist het probleem: het wordt tegenwoordig meer gebruikt dan ooit. De rijke applicaties die we overal op het internet tegenkomen, zijn in grote mate afhankelijk van JavaScript. En wanneer je zo’n taal veel gebruikt, kun je ook veel winst behalen door de taal te vereenvoudigen. CoffeeScript is daar een goed voorbeeld van: het probeert het dynamische karakter van JavaScript te combineren met een flinke laag syntactische suiker. In dit artikel geef ik een korte introductie van CoffeeScript en geef ik aan in welke situaties het je leven als webontwikkelaar een stukje makkelijker kan maken.

Wat is CoffeeScript?

CoffeeScript is een scripttaal die compileert naar JavaScript. De taal streeft ernaar dezelfde functionaliteit als JavaScript te leveren door minder regels code te gebruiken. De syntax van CoffeeScript is daarom zo kort mogelijk. Daarmee probeert het één van de grootste nadelen van JavaScript – bloated code – weg te werken. Naast de kortere syntax claimt de maker van CoffeeScript ook dat het minstens even snel is in de uitvoering als JavaScript. Bovendien voegt CoffeeScript ook nog functionaliteit toe die met enkel JavaScript niet mogelijk is, zoals bijvoorbeeld pattern matching.

Compilatieproces

CoffeeScript-code compileert één-op-één naar een JavaScript-equivalent. Om deze reden kun je vanuit CoffeeScript probleemloos verwijzen naar externe JavaScript-bestanden of -library’s. De CoffeeScript-compiler maakt ook nog gebruik van JavaScript Lint, waarmee het allerlei veelgemaakte JavaScript-fouten corrigeert. En als klap op de vuurpijl genereert de compiler JavaScript-code met whitespace en inspringing, om ervoor te zorgen dat de gecompileerde code goed leesbaar is. Deze resulterende JavaScript-code kan vervolgens worden uitgevoerd in een browser.

Overzicht van veelvoorkomende syntax-optimalisaties

In CoffeeScript zijn verschillende syntax-optimalisaties ten opzichte van JavaScript doorgevoerd. Van een aantal veelvoorkomende constructies geef ik hieronder een voorbeeld.

Variabelen

Het gebruik van variabelen in CoffeeScript is eenvoudig: verzin een goede naam en geef er een waarde aan.

(links zie je het CoffeeScript-bronbestand, rechts het resultaat van de compilatie)

CoffeeScript

JavaScript (gecompileerd)

number = 42
opposite = true
var number, opposite;
number = 42;
opposite = true;

Wat opvalt is dat de afsluitende puntkomma in CoffeeScript niet nodig is.

Functies

Het definiëren van een functie in CoffeeScript gaat als volgt:

CoffeeScript

JavaScript (gecompileerd)

square = (x) -> x * x
var square;
square = function(x) {
   return x * x;
};

De gehele functie past in CoffeeScript op dezelfde regel. Toegegeven, in JavaScript zou dat ook wel kunnen, maar die JavaScript-regel zou dan toch wel een stuk langer zijn. Dit komt onder andere doordat CoffeeScript geen function-keyword nodig heeft. Ook het return-keyword is in CoffeeScript niet verplicht, aangezien het resultaat van de laatste regel in een functie standaard wordt geretourneerd.

Conditioneren

Het evalueren van boolean expressies zou er in CoffeeScript als volgt uit kunnen zien:

CoffeeScript

JavaScript (gecompileerd)

mood = greatlyImproved if singing

if happy and knowsIt
  clapsHands()
  chaChaCha()
else
  showIt()
var date, mood;

if (singing) mood = greatlyImproved;

if (happy && knowsIt) {
  clapsHands();
  chaChaCha();
} else {
  showIt();
}

Voor if/else-constructies zijn in het geheel geen haakjes of accolades nodig. Voor het bepalen van de scope van blokexpressies zoals dat het geval is bij functies of if/else-constructies, gebruikt CoffeeScript de inspringing, oftewel significant whitespace. Wel even opletten dat je je IDE of andere favorite editor instelt op het invoegen van spaties in plaats van tabs, anders gaat het niet werken.

Itereren

Tot slot nog twee voorbeelden van het gebruik van iteraties:

CoffeeScript

JavaScript (gecompileerd)

# Eat lunch.
eat food for food in ['toast', 'cheese', 'wine']
var food, _i, _len, _ref;

_ref = ['toast', 'cheese', 'wine'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  food = _ref[_i];
  eat(food);
}
# Fine five course dining.
courses = ['greens', 'caviar', 'truffles', 'roast', 'cake']
menu i + 1, dish for dish, i in courses
var courses, dish, i, _len2;
courses = ['greens', 'caviar', 'truffles', 'roast', 'cake'];

for (i = 0, _len2 = courses.length; i < _len2; i++) {
  dish = courses[i];
  menu(i + 1, dish);
}

CoffeeScript heeft nog veel meer handige constructies, maar dat is een dusdanig hoog aantal dat ik heb besloten alleen de meestgebruikte in dit artikel te bespreken. Voor meer informatie verwijs ik graag naar de website van CoffeeScript: die is namelijk erg volledig en bevat uitgebreide documentatie over de verschillende mogelijkheden. Je kunt je eigen CoffeeScripts zelfs online uitproberen!

Hoe gebruik ik CoffeeScript?

Installatie

De command-line compiler van CoffeeScript gebruikt Node.js, een libary die je in staat stelt om JavaScript server-side te draaien. Deze library moet je dus eerst installeren. Daarna kun je via de Node Package Manager CoffeeScript downloaden.

Voer de volgende stappen uit om dit voor elkaar te krijgen:

  • Download de meest recente versie van Node.js.
  • Open een commandoprompt en voer het volgende commando uit:
  • npm
  • Bekijk of dit commando bekend is. Is dit het geval, ga dan verder bij stap 5.
  • Navigeer in de commandoprompt naar de locatie waar je Node.js hebt geïnstalleerd.
  • Voer het volgende commando uit:
  • npm install -g coffee-script
  • Je ziet nu de volgende uitvoer:
  • C:\Users\sogyo>npm install -g coffee-scriptnpm http GET https://registry.npmjs.org/coffee-script
  • npm http 200 https://registry.npmjs.org/coffee-script
  • npm http GET https://registry.npmjs.org/coffee-script/-/coffee-script-1.2.0.tgz
  • npm http 200 https://registry.npmjs.org/coffee-script/-/coffee-script-1.2.0.tgz

CoffeeScript is nu geïnstalleerd!

Om het helemaal af te maken, kun je CoffeeScript-syntax highlighting instellen in je favoriete editor. De ontwerper van CoffeeScript – Jeremy Ashkenas – houdt een lijst bij met ondersteunde editors en de benodigde plugins.

Compileren

Wanneer je CoffeeScript gebruikt, sla je je werk op in bestanden met de extensie “.coffee”. Via de command-line kun je deze bestanden compileren naar “.js”-bestanden. Onderstaand commando compileert het bestand “voorbeeld.coffee” naar “voorbeeld.js”:

coffee -c voorbeeld.coffee

Met de “-w”-optie kun je dit compilatieproces ook op de achtergrond actief laten zijn. De compilatie wordt dan steeds uitgevoerd wanneer je je .coffee-bestand opslaat:

coffee -cw voorbeeld.coffee

Je kunt dit compilatieproces ook voor alle “.coffee”-bestanden in dezelfde map laten draaien:

coffee -cw *.coffee

Wanneer gebruik ik CoffeeScript?

Het lijkt een open deur, maar ik trap ‘m toch maar even in: gebruik CoffeeScript wanneer je veel webontwikkelwerk aan de client-kant te wachten staat. Juist in zulke situaties kan de hoge efficiëntie van CoffeeScript tijd schelen. Volgens dit interview met de ontwerper van de taal kan het gebruik van CoffeeScript resulteren in 33% minder coderegels. Wanneer je een groot client-side onderdeel bouwt, kan dat flink wat ontwikkeltijd schelen.

Mijn ervaringen met CoffeeScript

Ik ben niet bepaald een JavaScript-fan (net als belasting betalen is het soms een noodzakelijk kwaad), maar door CoffeeScript kijk ik er wel een stuk positiever tegenaan. CoffeeScript ‘voelt fijn aan’: het ontwikkelen gaat lekker snel en je hoeft maar weinig tijd te besteden aan futiliteiten. Vooral bij het definiëren van functies en het werken met iteraties komt de efficiëntie van de taal goed uit de verf. Daarom zou ik iedere webontwikkelaar willen aansporen om CoffeeScript eens te proberen!

Meer informatie


Werken met ?
Kijk dan bij onze mogelijkheden voor zowel starters als ervaren engineers.


Categorieën: Development, Overige talen en platformen, Open Source

Tags: ,


Reactie

  • Johan Hoek schreef:

    Nice blog + presentatie Hanno:)

    Ik liep vandaag tegen iets interessants aan namelijk CoffeeSharp
    De CoffeeScript compiler voor windows als plugin voor vs2010.
    Zowel een HttpHandler voor compilen of toe te voegen als pre- of postbuild commando voor vs2010.
    Zie onderstaande link voor meer details:
    http://tomlokhorst.github.com/CoffeeSharp

    Geplaatst op 13 maart 2012 om 15:48 Permalink