CoffeeScript

Die Alternative zu JavaScript - eine kompakte Einführung

Andreas Schubert

• Verlag: dpunkt
• Jahr: 2014
• ISBN:
  9783864916007
• Thema: Informatik
• Thema: Programmierung in JavaScript

CoffeeScript ist eine kleine Programmiersprache, die nach JavaScript übersetzt wird und versucht, ungeliebte Eigenschaften von JavaScript durch eine deutlich einfachere Syntax zu umgehen. Sie richtet sich an alle Webentwickler, denen JavaScript zu unhandlich ist oder die bei der Arbeit mit Ruby on Rails die CoffeeScript-Integration nutzen.Dieses Buch gibt Ihnen eine umfassende Einführung in die Sprache CoffeeScript. Anhand zahlreicher Beispiele lernen Sie die elegante Syntaxsowie die Verwendung der Sprache praktisch kennen.Behandelt werden u.a. folgende Themen: • Syntax und Grundlagen• Objektorientierte Programmierung mit CoffeeScript• Testen mit Mocha und Chai• CoffeeScript in Ruby on Rails• Einsatz mit AngularJS und node.jsNach der Lektüre des Buches sind Sie in der Lage, CoffeeScript zur Entwicklung dynamischer Webapplikationen, für Kommandozeilen-Tools oder serverseitige Komponenten einzusetzen.Die Quellcodes zu diesem Buch findet man unter github.com/aschubert/coffeescript-buch

1 Hello CoffeeScript

»Anyway, I know only one programming language worse than C and that is JavaScript.«

Robert Cailliau einer der »Erfinder« des WWW

JavaScript erlebt zurzeit eine Renaissance, denn JavaScript ist überall. Auf nahezu jedem Computer dieser Welt gibt es mindestens einen JavaScript-Interpreter. Selbst Microcontroller wie den Espruino¹ kann man mittlerweile mit JavaScript programmieren. JavaScript treibt das Web 2.0 an. JavaScript wird zur Entwicklung für mobile Endgeräte verwendet. JavaScript ist auf dem Server angekommen. Aber JavaScript ist nicht schön. Und, wie Douglas Crockford schon bemerkte, eine der am häufigsten missverstandenen Programmiersprachen der Welt.

In zehn Tagen Mitte der Neunzigerjahre von Brendan Eich bei Netscape in aller Eile entwickelt, ist JavaScript tatsächlich eine missverstandene Sprache. Angefangen beim Namen, der eine (nicht vorhandene) Nähe zu Java vermuten lässt, über die C-ähnliche Syntax, die vermuten lässt, JavaScript sei eine prozedurale Sprache (dabei ist JavaScript funktionalen Sprachen wie Scheme oder Lisp deutlich näher), bis hin zu den vor allem anfangs äußerst fehlerbehafteten Implementierungen – JavaScript hat es Entwicklern nicht leicht gemacht.

Vieles hat sich seit den Anfängen verbessert, der Sprachstandard wird von den meisten Implementierungen mittlerweile eingehalten. Dennoch gibt es Raum für Verbesserungen – Raum, den CoffeeScript füllen will.

CoffeeScript ist eine relativ junge Sprache², die nach JavaScript kompiliert wird. CoffeeScript hat eine goldene Regel: Es ist einfach JavaScript. Der Code, der vom CoffeeScript-Compiler erzeugt wird, ist valides JavaScript, das die Tests von Douglas Crockfords JavaScript-Lint JSLint erfolgreich absolviert. Er läuft auf jeder JavaScript-Implementierung, und das sehr schnell, meistens sogar schneller, als selbst geschriebener JavaScript-Code ablaufen würde.

Vor einigen Jahren ist ein Hype rund um CoffeeScript entstanden, der sich nicht zuletzt durch einen Tweet von David Heinemeier Hansson erklären lässt, der im April 2011³ äußerte, dass die neue Ruby-on-Rails-Version 3.1 Coffee-Script enthalten würde. Mit der Veröffentlichung am 31. August 2011 kamen auf einmal viele Ruby-on-Rails-Entwickler mit dieser neuen Sprache in Berührung.

Heute, rund fünf Jahre nach seiner Entstehung, ist CoffeeScript in vielen großen Projekten angekommen, zum Teil wegen seiner Integration in Ruby on Rails, aber nicht nur, wie etwa die Online-Shopping-Plattform Shopify zeigt, die Coffee-Script in ihrem Frontend einsetzt.

Doch was macht CoffeeScript so besonders, dass immer mehr Entwickler beginnen, sich mit dieser Sprache zu beschäftigen?

Am einfachsten versteht man das, wenn man sich ein paar Beispiele dazu ansieht.

1.1 Appetithäppchen – oder: die Eleganz von CoffeeScript

Im Folgenden werde ich ein paar Codeschnipsel präsentieren und Ihnen zeigen, welchen JavaScript-Code der Compiler daraus erzeugt. Der erzeugte JavaScript-Code ist im Übrigen JavaScript, das, wie schon erwähnt, alle JavaScript-Lint-Tests positiv durchlaufen wird und so »gut« ist, dass es auf den meisten Plattformen laufen wird, also auch in älteren Browsern.

Doch nun zu den Beispielen. Es wird immer erst der generierte JavaScript-Code gezeigt, im Anschluss das CoffeeScript, aus dem dieser Code entstand.

Bitte lassen Sie sich nicht durch die Beispiele erschrecken, wenn Sie bisher noch nicht mit JavaScript gearbeitet haben. Es geht hier nicht um die Details, es geht darum zu zeigen, wie viel eleganter oder kompakter CoffeeScript im Vergleich zu JavaScript erscheint.

Gibt es dich? – Der Existential-Operator

Wie kann man in JavaScript überprüfen, ob es ein Objekt/eine Variable gibt, sprich, ob sie existiert?

if (typeof weihnachtsmann !== "undefined" && weihnachtsmann !== null) {
console.log("Den Weihnachtsmann gibt es!");
}

Wie man sehen kann, ist es in JavaScript nicht ganz einfach, die Existenz zum Beispiel einer Variablen zu überprüfen, da sowohl der Typ als auch der Inhalt überprüft werden müssen.

Nun zur Lösung in CoffeeScript:

console.log "Den Weihnachtsmann gibt es!" if weihnachtsmann?

Der aus Ruby bekannte »Existential-Operator« ist eine elegante Möglichkeit, die Existenz eines Objekts oder einer Variablen zu überprüfen.

Ebenso kann man an diesem kleinen Beispiel noch zwei weitere CoffeeScript-Eigenschaften erkennen: Sogenannter »Syntactic Noise« wie Klammern kann (meist) weggelassen werden und es gibt die ebenfalls aus modernen Skriptsprachen wie Python oder Ruby bekannte Postfix-Form des if, d. h. am Ende einer Zeile stehend.

Ich will nicht alles – bestimmte Elemente eines Arrays filtern

Wie kann man in JavaScript nur bestimmte Elemente eines Arrays filtern, also für jedes Element überprüfen, ob es ein bestimmtes Kriterium erfüllt, und nur im Ja-Fall dieses Element zurückliefern, um so ggf. ein neues – gefiltertes – Array zu erhalten?

In unserem Beispiel sollen alle Elemente eines mit Strings gefüllten Arrays zurückgegeben werden, die mit einem »S« beginnen. Es gäbe sicher auch noch elegantere Möglichkeiten, in JavaScript über ein Array zu iterieren, allerdings ist die aus CoffeeScript kompilierte Version wirklich auf nahezu jeder JavaScript-Umgebung lauffähig⁴.

var name, names;

names = ["Schubert", "Schneider", "Müller", "Meier"];

names = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = names.length; _i < _len; _i++) {
name = names[_i];
if (name.indexOf("S") === 0) {
_results.push(name);
}
}
return _results;
})();
console.log(names);

Und nun die Variante in CoffeeScript:

names = ["Müller","Hubert","Schneider","Schmidt"]
names = ( name for name in names when name.indexOf("S") is 0 )
console.log names

Dieses Beispiel zeigt sehr schön, wie verständlich und kompakt CoffeeScript im Vergleich zu JavaScript wirkt. Auch ohne dass Sie bisher Kontakt zu CoffeeScript hatten, sollten die drei Zeilen CoffeeScript durchaus verständlich sein: Es werden in einem Array mit Namen nur die Elemente gesucht, die mit einem »S« beginnen.

Der resultierende JavaScript-Code ist mit 14 Zeilen deutlich länger und bei Weitem nicht so verständlich, vor allem für jemanden, der bisher noch kein JavaScript gesehen hat.

Sollten Sie diese kleinen Appetithäppchen ermuntert haben, mehr mit Coffee-Script zu experimentieren, dann soll es im Weiteren erst einmal darum gehen, was man benötigt, um mit CoffeeScript entwickeln zu können.

1.2 Aller Anfang ist leicht

Für das Nachvollziehen der beiden Codebeispiele auf den vorangegangenen Seiten oder die ersten Schritte mit CoffeeScript benötigen Sie nichts weiter als einen Webbrowser mit aktiviertem JavaScript.

Ein Besuch auf der Homepage von CoffeeScript gibt Ihnen neben einem Überblick über die Sprache auch die Möglichkeit, CoffeeScript interaktiv im Browser zu testen. Gehen Sie dazu einfach auf die Seite http://coffeescript.org und klicken Sie dort im Menü am oberen Seitenrand auf »Try CoffeeScript«. Sie gelangen dann auf eine Seite, auf der Sie im linken Teil CoffeeScript eingeben können und sofort und während des Tippens sehen, was für JavaScript-Code daraus generiert wird. Diesen JavaScript-Code können Sie dann durch einen Klick auf den »Run«-Button auch gleich ausführen lassen.

Abb. 1–1 Try CoffeeScript auf der offiziellen Webseite

CoffeeScript direkt in einer HTML-Datei

Die Funktionalität des »Try CoffeeScript« auf der offiziellen Webseite wird durch eine kleine Version des CoffeeScript-Compilers in JavaScript zur Verfügung gestellt, den man auch selbst verwenden kann:

<html>
<head>
<script src="http://coffeescript.org/extras/coffee-script.js"
type="text/javascript"></script>
<head>
<body>
<script type="text/coffeescript">
console.log "Hello CoffeeScript"
</script>
</body>
</html>

Listing 1–1 CoffeeScript direkt in der HTML-Datei

Für erste Schritte oder auch ein Experiment zwischendurch sind dies sehr schöne Möglichkeiten, um mit CoffeeScript zu arbeiten. Für die ernsthafte Entwicklung benötigt man aber natürlich eine lokale Installation von CoffeeScript. Und um diese soll es nun gehen.

1.3 Den Kaffee auf den Tisch – oder: Wie installiere ich CoffeeScript?

CoffeeScript lässt sich am einfachsten über den Package-Manager für Node Packaged Modules (kurz npm) installieren. Er ist Bestandteil von Node.js, einer JavaScript-Plattform für serverseitiges JavaScript, um schnelle und skalierbare Netzwerkanwendungen oder Konsolenanwendungen zu entwi...

Inhaltsverzeichnis

• Cover
• Titel
• Impressum
• Inhaltsverzeichnis
• 1 Hello CoffeeScript
• 2 Hinunter in den Kaninchenbau – CoffeeScript im Detail
• 3 Eine Klasse für sich – Objektorientierung in CoffeeScript
• 4 Mocha und Chai – Testen in CoffeeScript
• 5 Wie auf Schienen – CoffeeScript und Ruby on Rails
• 6 Ganz schön schräg – AngularJS und Ruby on Rails
• 7 CoffeeScript und Node.js
• A Anhang
• Index
• Fußnoten