jQuery auf Koffein

Der Name CoffeeScript geistert schon eine Weile umher. Viele haben bereits in Verbindung mit Node.js damit gearbeitet. Da ich in letzter Zeit weder selbige noch große Lust hatte mir ein Ubuntu oder eine andere Linux Distribution meines Vertrauens zu installieren, habe ich es einfach vorerst ignoriert… Jetzt habe ich vor kurzem Mindscapes Web Workbench entdeckt.

Die Web Workbench ist eine Visual Studio 2010 Erweiterung zur Integration von LESS, SASS und Coffee Script. Und gerade das letzte, ohne die Notwendigkeit Node.js installieren zu müssen. Jetzt doch etwas neugierig habe ich es von Microsoft heruntergeladen, installiert und losgelegt.

Zum ersten Herumspielen musste einfach eine ASP.NET MVC Anwendung herhalten. Die Anwendung blieb soweit unverändert und gleich erstmal eine CoffeeScript Datei hinzufügen. Wie man in der folgenden Abbildung sehen kann, werden nun drei neue Dateitypen angeboten: sass SCSS Style Sheet, Less Style Sheet und CoffeeScript File.

Also letzteres hinzugefügt und es erscheinen in dem Projekt zwei neue Dateien. Eine Datei mit der Endung .coffee und eine mit der Endung .js. Die .coffee Datei ist natürlich die Datei, die das Coffee Script enthalten wird. Die .js Datei enthält den automatisch aus dem Coffee Script erzeugten Javascript Code.

Als einfaches, kurzes Beispiel wollte ich einfach eine Slideshow mit jQuery erstellen und laufen lassen. Meine Index.cshtml habe ich dazu um die für die Slideshow notwendigen Basis-Divs erweitert. Da ich erst einmal nur ein Gefühl dafür bekommen wollte, wurde ein div zu drei…

   1:  <div id="slideShow"> 

   2:      <div> 

   3:          <img src="@Url.Content("~/public/images/SlideShowPicture.png")" width="200" 

   4:              height="200" alt="Ein Park" /> 

   5:          <p> 

   6:              Hier ist ein schönes Sommerbild</p> 

   7:          <p> 

   8:              Dieser Park war ein schöner Spielplatz für alle Kinder. 

   9:          </p> 

  10:      </div> 

  11:      <div> 

  12:          <img src="@Url.Content("~/public/images/SlideShowPicture.png")" width="200" 

  13:              height="200" alt="Ein Park" /> 

  14:          <p> 

  15:              Hier ist ein schönes Sommerbild</p> 

  16:          <p> 

  17:              Dieser Park war ein schöner Spielplatz für alle Kinder. 

  18:          </p> 

  19:      </div> 

  20:      <div> 

  21:          <img src="@Url.Content("~/public/images/SlideShowPicture.png")" width="200" 

  22:              height="200" alt="Ein Park" /> 

  23:          <p> 

  24:              Hier ist ein schönes Sommerbild</p> 

  25:          <p> 

  26:              Dieser Park war ein schöner Spielplatz für alle Kinder. 

  27:          </p> 

  28:      </div> 

  29:  </div> 

Jetzt nur noch das entsprechende Coffee Script für einen einfachen Slideshow Aufruf schreiben. Dabei habe ich mich wirklich nicht überfordert und den folgenden Einzeiler geschrieben.

   1:  $('#slideShow').cycle 

   2:    fx:    'scrollRight',

   3:    delay: -2000 

Meine Neugier trieb mich gleich in die Javascript Datei uns siehe da: es war bereits umgewandelt.

   1:  (function() {

   2:    $('#slideShow').cycle({

   3:      fx: 'scrollRight',

   4:      delay: -2000

   5:    });

   6:  }).call(this);

Nun noch schnell die Javascript Datei in die Webseite eingebunden und schnell F5 gedrückt. Nach einem kurzen Augenblick zeigte sich dann die Standard Webseite – aber um eine von links nach rechts durchschiebende Slideshow reicher…

Was kann man zu so einem Beispiel schon groß sagen? Es funktioniert einwandfrei und erfüllt in diesem Einfachstbeispiel seinen Zweck. Inwiefern komplexere Anwendungen damit entwickelt werden können, wird sich noch zeigen.

Es ist aber definitiv eine interessante Alternative… und ich kann endlich mit Coffee Script arbeiten. Mit Kaffee arbeitet es sich einfach besser .