smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Einführung in CoffeeScript

29. April 2012
Stephan
CoffeeScript

Entwickler aus der Ruby- oder Python-Welt, die das erste mal auf JavaScript treffen, finden die Syntax von JavaScript und den darauf basierenden Code aufgrund der vielen Semikolons und Klammern nicht immer sehr „ansehnlich“ und übersichtlich.

Wer trotzdem nicht auf JavaScript verzichten will und/oder kann, aber trotzdem eine klar-strukturierte Syntax, die wiederum zu übersichtlichem als auch schlankem Code führt, verwenden möchte, für den ist eventuell CoffeeScript eine sinnvolle Alternative.

Deshalb möchte ich euch in diesem Artikel eine kleine Einführung in CoffeeScript geben.

Was ist CoffeeScript und wie funktioniert es?

Die Programmiersprache CoffeeScript wurde von Jeremy Ashkenas entwickelt und 2009 veröffentlicht. Laut dem Entwickler vereint CoffeScript all die guten Aspekte von JavaScript und stellt sie in einer „ansehnlichen“ bzw. leserfreundlichen Syntax bereit:

Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.“ (Jeremy Ashkenas)

Es gibt auch eine goldene CoffeeScript-Regel und die lautet:

It’s just JavaScript“ (Jeremy Ashkenas)

Der eigentliche CoffeeScript-Code den wir schreiben, wird nämlich in reines JavaScript kompiliert. Dabei läuft der Prozess generell so:

  • Code in einer *.coffee-Datei schreiben
  • CoffeeScript in JavaScript kompilieren
  • erzeugte JavaScript-Datei in Webseite einbinden

Die Vorteile sollen neben der Syntax auch darin liegen, dass der durch den CoffeeScript-Compiler erzeugte JavaScript-Code dazu tendiert eine bessere Performance aufzuweisen, als das handgeschriebene Pendant.

Des Weiteren ist hervorzuheben, dass wir unseren JavaScript-Code nicht mehr per Hand an neue Versionen anpassen müssen. Hier reicht es den CoffeeScript-Compiler zu aktualisieren und den CoffeeScript-Code einfach erneut zu kompilieren.

CoffeeScript – ein erster Einblick

Wie sieht CoffeeScript nun im Vergleich zu JavaScript aus? Im Folgenden haben wir ein kleines Beispiel bei dem alle Zahlen einer Liste gerundet und in einer neuen Liste abgespeichert werden sollen. Als erstes schauen wir uns den dazugehörigen JavaScript-Code an:

function roundNumber(number)
{
    return Math.round(number);
}

var numbers = [1.1, 2.2, 3.6, 4.9, 5.0];
var roundedNumbers = [];

for(var i = 0; i < numbers.length; i++)
{
    roundedNumbers.push(roundNumber(numbers[i]));
}

Im Vergleich dazu nun der CoffeeScript-Code:

roundNumber = (number) -> Math.round number
numbers = [1.1, 2.2, 3.6, 4.9, 5.0]
roundedNumbers = (roundNumber number for number in numbers)

Der CoffeeScript-Code ist im Vergleich zum äquivalenten JavaScript-Code viel kürzer und schneller zu überblicken. Ein Vorteil dabei ist auch, dass der Code sich leichter lesen lässt und das Ändern von Code im Allgemeinen nicht ganz so fehleranfällig ist.

Installation

Die folgende Installationsanweisung bezieht sich auf die Installation von CoffeeScript bzw. dem CoffeeScript-Compiler unter Windows.

Damit wir unseren CoffeeScript-Code in JavaScript-Code kompilieren können, benötigen wir als erstes einmal Node.js. Für Windows gibt es einen Windows-Installer den wir uns herunterladen und sogleich installieren.

Anschließend müssen wir uns mittels dem Node Package Manager (NPM), welcher bei der Installation von Node.js mitinstalliert wurde, das CoffeeScript-Paket laden und installieren. Dazu öffnen wir unsere Windows-Konsole (Start -> Ausführen -> „cmd“) und tippen Folgendes ein:

npm install -g coffee-script

Danach sollte der CoffeeScript-Compiler erfolgreich auf unserem System installiert sein, was wir durch folgende Eingabe in unserer Konsole überprüfen können:

coffee -e "console.log number for number in [1..3]"

Als Ausgabe sollte wir „1 2 3“ erhalten.

Grundlegende Syntax

Nun wollen wir uns einige grundlegende Syntax-Beispiele von CoffeeScript anschauen und den Unterschied zu JavaScript verdeutlichen.

Variable
In JavaScript definieren wir (globale) Variablen mit

var number = 2;

In CoffeeScript können wir uns das var sparen, weil es dort nicht benötigt und vorgesehen ist:

number = 2

Außerdem brauchen wir keine Semikolons setzen.

Funktionen
Als erstes betrachten wir eine normale JavaScript-Funktion:

function add(x, y)
{
    return x + y;
}

In CoffeeScript sehe es wie folgt aus:

add = (x, y) ->
    x + y

Es fällt auf, dass wir weder Semikolon noch geschweifte Klammern benötigen. Weiterhin muss kein zusätzliches return geschrieben werden, weil CoffeeScript angelehnt an Ruby immer den Wert der letzten Zeile in einer Funktion als Rückgabewert zurückgibt.

Undefined? Null?
Manchmal ist es wichtig zu prüfen, ob eine Variable gesetzt ist oder nicht. In JavaScript würden wir das wohl generell so lösen:

if (typeof mathObject !== "undefined" && mathObject !== null) 
{
  alert('MathObject ist gesetzt');
}

Angelehnt an Ruby haben wir in CoffeeScript eine kürzere Lösung:

alert 'MathObject ist gesetzt' if mathObject?

In CoffeeScript prüfen wir einfach mittels ?, ob eine Variable gesetzt ist oder nicht.

Wer mehr über CoffeeScript und dessen Syntax erfahren will, wird auf der Website von CoffeeScript fündig.

Hello CoffeeScript World!

Zum Abschluss wollen wir ein kleines „Hello World“-Beispiel in CoffeeScript implementieren. Dazu erstellen wir uns einfach die Datei helloWorld.coffee und fügen folgenden Code ein:

jQuery ->
    sayHelloWorld()

sayHelloWorld = ->
    alert 'Hello CoffeeScript World!'

Die jQuery-Zeile steht in diesem Fall für $(document).ready() {}.

Jetzt öffnen wir unsere Konsole in dem Verzeichnis, wo wir die helloWorld.coffee-Datei abgelegt haben und kompilieren den CoffeeScript-Code in JavaScript-Code:

coffee -c helloWorld.coffee

Dadurch haben wir eine JavaScript-Datei namens helloWorld.js erzeugt. Jetzt können wir die Datei einfach in unsere HTML-Webseite einbinden:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello CoffeeScript World</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body>
</body>
</html>

Diese Datei können wir in unserem Webbrowser aufrufen und sollten dann mit „Hello CoffeeScript World!“ begrüßt werden.

Für einen tieferen Einblick in CoffeeScript kann ich euch mein Tutorial „Todo-App mit backbone.js & CoffeeScript erstellen“ empfehlen.

Fazit

CoffeeScript ist eine gute Alternative für all die, die sich mit der Syntax von JavaScript noch nie wirklich anfreunden konnten. Wer sich mit Ruby oder Python auskennt, wird denke ich einen leichten Einstieg in CoffeeScript haben und es auch gerne einsetzen.

Da CoffeeScript letztendlich nichts weiter als JavaScript ist, lässt sich zwar über den Sinn und Unsinn von CoffeeScript streiten, aber so ist das ja immer bei Programmiersprachen – die einen lieben und die anderen hassen sie.

Wie findet ihr CoffeeScript? Habt ihr es schon verwendet oder würdet es mal gerne ausprobieren?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!