CoffeeScript:JavaScript mit Durchblick

Obwohl JavaScript eine der am weitesten verbreiteten Skriptsprachen der Welt ist, wird deren Codierung nicht immer als besonders komfortabel empfunden. Das ist sicher ein Hauptgrund für die Entstehung einiger – mittlerweile recht ausgereifter – Frameworks oder Sub-/Supersets für verschiedenste Anwendungsbereiche. Die JavaScript-Syntax scheint nicht selten etwas unübersichtlich und unnötig aufgeblasen. Manch ein Entwickler wünscht sich eine Möglichkeit, mit einer vereinfachten Syntax das gleiche Ergebnis zu erzielen.Um den unangenehmen Ballast der Originalsprache nicht mitzutragen, kommt das Ausweichen auf ein alternatives Framework selbstverständlich dann nicht in Frage, wenn dieses als JavaScript-Superset ausgelegt ist, wie z.B. „TypeScript“ aus dem Hause Microsoft. Gefragt ist eher ein „syntactic sugar“, also eine andere Schreibweise, die leichter von der Hand geht und obendrein der Übersichtlichkeit dient.

CoffeeScript

Ein solcher syntaktischer Zucker wurde von Jeremy Ashkenas im Jahre 2009 mit der Sprache CoffeeScript ins Leben gerufen. CoffeeScript bietet neben einigen zusätzlichen Funktionalitäten eine deutlich simplere Syntax im Vergleich zur Original-Variante in JavaScript. Oft lassen sich dadurch bis zu 30% Codier-Aufwand einsparen. Der CoffeeScript-Code muss jedoch zunächst mit Hilfe eines „Transkompilers“ (oder auch „Transpiler“) in reinen JavaScript-Code umgewandelt („transkompiliert“) werden. Das Ergebnis ist also letztlich reines JavaScript und eventuell sogar im Vergleich zur manuell erstellten Variante etwas performanter, sofern keine Syntax-Fehler in CoffeeScript erfolgt sind. Ruby on Rails bedient sich CoffeeScript offiziell als Präprozessor. Die Syntax in CoffeeScript ist stark durch die Sprachen „Ruby“, „Python“ und „Haskell“ geprägt.

Syntaxbeispiel

<!DOCTYPE HTML>
<html>
  <head>
    <title>Zeit fuer einen Countdown...</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p id="CountdownDisplay">
      Countdown wird initialisiert&hellip;
    </p>
    
    <script src="../test/countdown.js" type="text/javascript"></script>
    <script type="text/javascript">
      document.getElementById("CountdownDisplay").innerHTML = "Countdown beendet."
    </script>
  </body>
</html>

Im HTML Code wird in diesem Beispiel auf die transkompilierte JavaScript-Datei „countdown.js“ verwiesen. Darin enthalten ist eine For-Schleife, durch die die einzelnen Elemente eines Arrays abgefragt und per Popup-Fenster ausgegeben werden. Der CoffeeScript-Code, in dem diese Schleife formuliert wurde, ist relativ übersichtlich und kurz:

countdownCounter = ["5".."1"]
for i in [0...countdownCounter.length]
  alert countdownCounter[i]

Dieser Code wurde anschließend von einem Transpiler in JavaScript-Code umgeschrieben und steht anschließend als reiner JavaScript-Code zur Verfügung:

// Generated by CoffeeScript 1.8.0
(function() {
  var countdownCounter, i, _i, _ref;

  countdownCounter = ["5", "4", "3", "2", "1"];

  for (i = _i = 0, _ref = countdownCounter.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
    alert(countdownCounter[i]);
  }

}).call(this);

Auf Anhieb ist zu sehen, dass der JavaScript-Code deutlich unübersichtlicher ist, als sein CoffeeScript-Pendant. Zugegeben, auch in JavaScript müsste der Code nicht so aufwendig aussehen – für dieses Beispiel würde auch eine einfachere Variante genügen – aber CoffeeScript soll schließlich bei bedeutend größeren Codeblöcken kostbare Zeit sparen und dabei wesentlich angenehmer zu lesen sein.

Erweiterte Funktionalitäten

Die Syntax in CoffeeScript kann durch mehrere Eigenschaften weiter deutlich verkürzt werden:

Optionale Klammern (sofern mindestens ein Parameter übergeben wird)
Automatisierte Variablen-Deklaration
Erleichterter Umgang mit Fehlersituationen durch den Existenzoperator „?“
Wertemengen / Ranges als Vereinfachung beim Anlegen von JavaScript-Arrays
Multiple Möglichkeiten, Schleifen in Form eines Pre- oder Postfix darzustellen (If, Else, Unless)
Funktionen geben immer einen Wert zurück
„@“ kann anstelle von „this“ verwendet werden
Verkettete (Range-)Vergleiche (kleinsterWert<Wert<groessterWert) sind möglich

Im Gegensatz zu den prototypisch erzeugten Objekten in JavaScript können in CoffeeScript zudem echte Klassen generiert werden – inklusive Methoden, Konstruktoren, Vererbung und Klassenerweiterungen, so wie man es auch aus anderen objektorientierten Sprachen kennt.

Weitere Quellen

Die offizielle CoffeeScript-Seite:

Die GitHub-Seite zu CoffeeScript:

Die offizielle CoffeeScript-Wiki:

Schnelleinstieg zu CoffeeScript:

Fachliteratur zu CoffeeScript:

PDF-Dokument zum Thema CoffeeScript:

Kann jeder CoffeeScript nutzen?

Der Compiler, der zur Transkompilierung des Codes notwendig ist, ist selbst in CoffeeScript geschrieben und steht im Netz für Node.js frei zur Verfügung. Insofern steht einer Verwendung grundsätzlich nichts im Weg. Sowohl die entsprechenden Pakete für Node.js als auch für CoffeeScript sind einfach zu installieren. Voraussetzung sind Root-Berechtigungen auf einen eigenen Server. Daher sind alle Host Europe Kunden, die einen Virtual Server oder Root Server in ihrem Produkt-Portfolio haben, grundsätzlich in der Lage, diese einfach zu erlernende Sprache für künftige Projekte zu verwenden. WebServer-Kunden können ausschließlich die auf einer lokalen Entwicklungsumgebung erfolgreich transkompilierten JavaScript-Erzeugnisse per Git-Repository synchronisieren. Bei größeren Projekten wird allerdings der Einsatz eines Virtual Servers empfohlen, da die Kompilierung direkt auf dem Server stattfindet und die Zeit für den Synchronisierungsvorgang eingespart werden kann. Immerhin ist dies eines der Ziele beim Einsatz von CoffeeScript.

Fazit

Für Projekte mit einem großen JavaScript-Anteil lohnt es sich definitiv, über den Einsatz von CoffeeScript nachzudenken. Für kleinere Projekte oder solche, die anteilig eher weniger mit JavaScript zu tun haben, stellt CoffeeScript eher eine geschmackliche Alternative dar, die allerdings durch ihre Übersichtlichkeit und das saubere JavaScript-Output besticht. Haben Sie bereits Erfahrungen mit CoffeeScript oder anderen Sprachen sammeln können, die zunächst transkompiliert werden müssen? Auf welche Herausforderungen sind Sie dabei gestoßen? Welche Erfolge konnten Sie verzeichnen? Empfinden auch Sie CoffeeScript als Eye-Candy oder sehen Sie darin nur eine weitere Sprache? Nutzen Sie für Ihre Projekte weitere nützliche Ressourcen, als die hier aufgeführten? Das Thema „Transkompilierung“ wird teils recht kontrovers diskutiert. Uns würde speziell Ihre Meinung dazu interessieren.

Hat Ihnen dieser Artikel gefallen? Dann bewerten sie den Artikel gerne oder teilen ihn mit Menschen, denen er ebenfalls von Nutzen sein kann – ganz einfach per Twitter oder Facebook oder Google+. Sind Sie an künftigen Neuigkeiten aus dem Hosting-Bereich interessiert? Dann können Sie die Blogbeiträge bequem per RSS-Feed abonnieren, oder Sie versehen unsere Facebook-Seite ebenfalls mit einem Like. Die Abo-Funktionalität auf Facebook versorgt Sie zudem jederzeit mit dem aktuellen Blogbeitrag und vielen weiteren Informationen rund um das Hosting im Allgemeinen aber auch zum Thema Host Europe. Haben Sie Anregungen oder Änderungsvorschläge? Kommentieren Sie unsere Beiträge, wir freuen uns über Ihren Input!

Über
Letzte Artikel

Thomas von Mengden

Ehemaliger Social Media Manager & PR Comms bei Host Europe GmbH

Thomas von Mengden ist ein ehemaliger Autor des Blog & SEO-Teams der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting in Europa.

Letzte Artikel von Thomas von Mengden (Alle anzeigen)