Coden, Testen, Scopen, Abstrahieren — JS goes professional

JavaScript als Profi-Sprache: Behaviour Driven Development für sauberen Code

Eric Herrmann

JavaScript ist schon lange keine reine Validierungs- und Gestaltungssprache mehr. Etliche Frameworks und testgetriebene Entwicklung machen JavaScript zu einer konkurrenzfähigen Programmiersprache. CoffeeScript zeigt, dass auch Modularisierung einfach möglich ist. Angular.js überzeugt durch sehr einfache, Design-zentrierte Bedienung und von Haus aus gute Testierbarkeit.

Diesen und weiteren Trends widmete sich der JavaScript Day der JAX 2012, der deutlich machte, dass auch etliche Java-Entwickler sich mittlerweile vom oft belächelten Namensvetter begeistern lassen.

Eröffnet wurde der JavaScript Day von Wolfram Kriesing von Uxebu. In seinem Vortrag zu JavaScript Tools zeigte er, wie testgetriebene Entwicklung (TDD) mit Jasmine aussieht und warum TDD dem Debugging überlegen ist. Vergleichbar mit JUnit arbeitet Jasmine mit Spies und matcht erwartete und tatsächliche Ausgaben. Jenkins kümmert sich dann um Continuous Integration und macht die Testabdeckung sichtbar. Als IDE empfiehlt Kriesing Webstorm, da sich hier Jasmine integrieren lässt und Test Driven Development aus einer Hand möglich ist.

JavaScript wird auf Clientseite ausgeführt, weshalb die Skripte immer zunächst vom Server auf den Anwender übertragen werden müssen. Um hier den Traffic zu minimieren und Flaschenhälse zu vermeiden, gibt es einige Tools, die den Code geschickt komprimieren. Dazu zählen unter anderem Google Closure, Uglify oder der YUI Compressor. 140byt.es zeigt Snippets in Tweet-Größe und veranschaulicht, wie kompakt man mit JavaScipt arbeiten kann.

Tobias Bosch und Stefan Scheidt von Opitz Consulting erklärten, dass man JavaScript vielfältig testen kann und sollte – am besten mit Test Driven Development oder Behaviour Driven Development. Zusätzlich ist die Vielfalt an Browsern zu beachten, die JavaScript sehr unterschiedlich interpretieren können. Mit xUnit-artigen Asserts arbeitet hier beispielsweise der JsTestDriver, der eine gut lesbare Ausgabe unerwarteter Werte macht und Fehlerfindung wirklich erträglich gestalten kann. Eine Alternative wäre Testacular von Vojta Jina.

Einige JavaScript-Funktionen arbeiten asynchron, sind also bei einem Testdurchlauf nicht umgehend sinnvoll testbar. Hier bietet Jasmine die Möglichkeit, über runs() und waitsFor() die asynchronen Bestandteile des getesteten Codes zu berücksichtigen.

Bei den Browser-Tests hat man mit simulierten („headless“) Browsern wie Phantom oder Zombie vollwertige Engines zur Verfügung, die JS und HTML rendern, jedoch bieten sie nicht die gleiche Aussagekraft wie ein echter Testlauf mit Selenium im Browser — auch wenn letzterer etwas komplizierter zu automatisieren ist.

Damit das UI unabhängig vom Server getestet werden kann, und letzterer als Fehlerquelle für Tests ausscheidet, sind isolierte Tests nötig. Diese werden über Tools wie Jasmine UI realisiert.

Um JavaScript für möglichst viele Browser und damit Anwender sicher verwendbar zu machen, hat Douglas Crockford mit JSLint eine Richtlinie zum Erschaffen sicherer JavaScript-Praktiken veröffentlicht. Doch diese sind in der Praxis ein „Pain in the ass“, worüber man sich in JavaScirpt-Kreisen einig sei, wie Vincent Landgraf von inovex sagt. Daher konnte sich CoffeeScript etablieren: eine eigene Sprache, die in JSLint-konformen JavaScript-Code kompiliert wird. Über CoffeeScript lassen sich im Mittel zwischen 25 und 50 Prozent des Code-Schreibens ersparen. Landgraf hat hierzu auch Beispiele gezeigt, in denen etwa verkettete Vergleiche in CoffeeScript ihrem JavaScript-Pendant gegenübergestellt wurden. Schnell wurde deutlich, dass nicht nur der Schreibaufwand vereinfacht wurde, sondern auch das Scoping erheblich übersichtlicher gelingt.

Do you like building Web Apps? I know. it sucks! But I think, I can make it suck less! Vojta Jina

Vojta Jina von Google hat mit seinem AngularJS ein sehr durchdachtes Projekt vorgestellt, das das Abstraktions-Niveau zum Bau von DOM-Elementen so weit anhebt, dass man fast schon im Klartext eingibt, was die App tun soll. Dies demonstrierte er an einer dynamischen To-Do-Liste, die auch online verfügbar ist. Die Scope-Logik lässt sich der Angular-Dokumentation entnehmen.

Durch die strikte Trennung von View und Controller soll Angular besonders gut testierbar sein. Auch Data Binding oder Dependency Injection wurden in Angular bedacht. Jina sagte dazu „Many developers say that you don’t need Dependency Injection in JavaScript. But I say that this is bullshit! Dependency Injection is awesome!“, wofür er reichlich Beifall erhielt.

Unterm Strich hat sich gezeigt, dass JavaScript die Sprache ist, will man Web Apps dynamisch gestalten. Und durch zahlreiche Test-Möglichkeiten, Hilfsmitteln zur Abstraktion sowie einer großen, engagierten Community wird sichergestellt, dass sauberes, nachhaltiges Engineering möglich bleibt.

Geschrieben von
Eric Herrmann
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.