In der Zwischenzeit finde ich es aber unglaublich interessant die Feinheiten bzw. die Unterschiede der verschiedenen Programmiersprachen zu erkennen und zu lernen. Der Vorteil liegt auf der Hand. Wenn man weiss, wie sich aktuelle Sprachen unterscheiden, sollte es einem auch in der Zukunft nicht schwer fallen, neue Sprachen und Konzepte zu lernen, weil man weiss, worauf man achten muss.

Momentan mag ich die drei Sprachen Java, PHP und Javascript am meisten und darum habe ich inzwischen als ausgewiesener FizzBuzz Fan das Coding Kata in allen 3 Sprachen gelöst. Ihr könnt übrigens die gelösten Katas auf meinem Github Account herunterladen.

Mit diesem Post möchte ich erreichen, dass man erkennt wie ähnlich Java und PHP inzwischen sind und wie sich Javascript von diesen 2 Sprachen deutlich unterscheidet.

Die Klasse FizzBuzz

Die FizzBuzz Klasse offenbart praktisch noch keine Unterschiede zwischen den 3 Sprachen.

Die Klasse FizzBuzzSequence

Auch in dieser Klasse unterscheiden sich Java und PHP nur unwesentlich. Dadurch das Java Typensicher ist und man auch die Array Grösse schon bei der Initialisierung kennen muss, gibt es minimal mehr zu schreiben, als bei PHP. Die Funktion implode gibt es meines Wissens in Java nicht, darum musste ich einen Helper dafür programmieren -> Dies ist meiner Meinung nach übrigens eine der grossen Stärken von PHP – sie bietet sehr viele einfache Helper Funktionen, die ich in anderen Sprachen vermisse.
Wenn man jetzt die PHP und die Java Klasse mit dem Javascript Example vergleicht, werden die Unterschiede schon deutlich. Und spätestens hier muss man erkennen, dass die Konzepte rund um Javascript sich deutlich von denen von PHP und Java unterscheiden. Das ist sicherlich auch einer der Gründe, warum Javascript einen so schlechten Ruf geniesst. Bei einfachen Beispielen, sieht der Syntax sehr ähnlich aus. Man kann schnell zum Schluss kommen, dass man die Sprache nicht noch extra lernen muss, sonder eigentlich schon fast alles im Griff hat. Wenn man sich aber tiefergreifend mit der Sprache beschäftigt, sieht man, dass es sehr grosse Unterschiede gibt.

Unit Testing mit JUnit / PHPUnit

Als letztes möchte ich das Unittesting zwischen Java und PHP vergleichen (für Javascript habe ich kein Example gemacht). Auch hier zeigen sich deutlich die Ähnlichkeiten. Einerseits ist der Syntax sehr ähnlich und zweitens lehnen sich sowohl JUnit als auch PHPUnit an den xUnit Standard. Wenn man also Unittesting erst einmal im Griff hat, ist der Wechsel zwischen Java / PHP absolut kein Problem.

Vorteile/Chancen

• Es ist wirklich cool mit Behaviour Driven Development zu coden (bis jetzt habe ich ja nur TDD gemacht). Insgesamt fühle ich mich mit dem Syntax wohler und habe das Gefühl, die Anforderungen besser formulieren zu können. Ich habe BDD mit Specifications umgesetzt (es gibt ja auch die Variante mit Stories). Welche der 2 Notationen nun besser ist, kann ich momentan noch nicht sagen.
• BDD macht Spass.
• Alle Vorteile, die man mit TDD hat, hat man auch bei BDD – man hört ja auch immer wieder, dass BDD das verbesserte TDD ist.
• Code Katas sind definitiv lehrreich. Man kann mit den Übungen seine Fähigkeiten verbessern. Wenn man eine Kata gelöst hat, kann man sie nochmals lösen, einfach mit einem anderen Fokus (z.B. Speed, BDD üben, Code möglichst kurz, Code ohne IDE schreiben usw.)

Gefahren/Stolpersteine

• Speed tut dem Hirn nicht gut – ich habe Fehler gemacht, die normalerweise nicht passieren. Diese habe ich im Video nachdokumentiert.
• Bei BDD/TDD verlässt man sich teilweise zu fest auf das rot/grün. Wenn es grün ist, ist alles gut!!! (Das es nicht so sein muss, sieht man ja im Video)
• BDD/TDD ersetzt nicht die Planungsphase. Es macht Sinn, zuerst die Architektur zu planen, bevor man mit coden beginnt (in einem so einfachen Beispiel wie FizzBuzz können z.B. einfach die “it” Blöcke, sprich die Requirements vorformuliert werden)

Darum habe ich die allseits beliebte FizzBuzz Kata in Javascript mit dem Jasmine BDD Framework umgesetzt. Wer die Regeln von FizzBuzz nicht kennt, kann sie hier nachlesen.

Meine Ziele waren folgende:

• Javascript Syntax intuitiver niederschreiben können
• Testgetrieben entwickeln
• Das ganze sollte auch noch ein annehmbares Tempo haben
• Netbeans Shortcuts anwenden (Maus nicht verwenden)

Als erstes setzen wir eine Ausgangslage auf:

function TheGreat() {}

TheGreat.imGreater = function () {
    return "imGreater";
}

TheGreat.imAlsoGreater = function () {
    this.a = 11;
    this.b = 12;
    this.c = function(){return true}
    return "imAlsoGreater";
}
TheGreat.imTheGreatest = {
    d: 11,
    e: 12,
    f: function(){return true}
}

Beispiel 1 – imGreater

//type object - an empty object
var imGreaterObject = new TheGreat.imGreater;
console.log(imGreaterObject);

//type function
var imGreaterFunction = TheGreat.imGreater;
console.log(imGreaterFunction);

//type string - "imGreater"
var imGreaterFunctionExecuted = TheGreat.imGreater();
console.log(imGreaterFunctionExecuted);

Fall 1 – Erzeugen Objekt: Es wird ein leeres Objekt erzeugt, return wird ignoriert.
Fall 2 – Zuweisen Funktion: In der Variable imGreater ist eine Funktion gespeichert. Darum wird bei Fall 2 einfach der Inhalt der Variable, in diesem Falle also die Funktion der neuen Variable imGreaterFunction zugewiesen.
Fall 3 – Im letzten Fall wird imGreater ausgeführt und dem Ergebnis zugewiesen. Dies kann mit () bei der Zuweisung erreicht werden. So kann ich die Funktion, wie sonst auch, aufrufen. Es ist also imGreaterFunctionExecuted der String imGreater zugewiesen worden.

Beispiel 2 imAlsoGreater

//type object - with members a,b,c - return is irrelevant
var imAlsoGreaterObject = new TheGreat.imAlsoGreater;
console.log(imAlsoGreaterObject);

//type function
var imAlsoGreaterFunction = TheGreat.imAlsoGreater;
console.log(imAlsoGreaterFunction);

//type string - "imAlsoGreater"
var imAlsoGreaterFuctionExecuted = TheGreat.imAlsoGreater();
console.log(imAlsoGreaterFuctionExecuted);

Eigentlich wieder dasselbe wie in Beispiel 1. Der einzige Unterschied ist, dass in Fall 1 das Objekt jetzt nicht mehr leer ist, sondern Membervariablen und -Funktionen enthält.

Beispiel 3 – imTheGreatest

//TheGreat.imTheGreatest is an object literal and therefore always an instanced object

//error - an object can not be reinstanced
//var imTheGreatestObject = new TheGreat.imTheGreatest;

//type object - with members d,e,f
var imTheGreatest = TheGreat.imTheGreatest;
console.log(imTheGreatest);

//error - an object can not executed as a function
//var imTheGreatestFunctionExecuted = TheGreat.imTheGreatest()

Das letzte Beispiel verwendet ein object literal, also ein bereits instanziertes Objekt.

Fall 1 – Erzeugen Objekt: Javascript erzeugt hier einen Fehler, weil das Objekt ja schon bereits instanziert ist. Diesen Fall kann man nicht anwenden.
Fall 2 – Zuweisen Objekt: Da in der Variable TheGreat.imTheGreatest ein instanziertes Objekt abgelegt ist, wird bei einer Zuweisung dementsprechend auch ein Objekt der neuen Variablen imTheGreatest abgelegt.
Fall 3 – Hier wird versucht, ein Objekt als Funktion auszuführen. Dies ist nicht möglich und es wird ein Fehler ausgelöst.

Fazit

Ich hoffe euch damit gezeigt zu haben, dass je nachdem wie man eine Variable aufruft, sich verschiedene Ergebnisse daraus ergeben. Dies muss man bei der Arbeit mit Javascript zuerst verstehen.

So, jetzt bin ich vorerst ausgeschossen. Bin ja eigentlich selber noch ziemlich neu in Javascript. Gibt es Themen, die euch noch interessieren würden? Ich bin gerade noch eine Javascript Fizzbuzz Kata am vorbereiten, welche ich euch bei Gelegenheit präsentieren kann.

Object literals

Als erstes ein Sourcecode Beispiel eines Code literals:

var meinObjekt = {
    a: 3,
    b: 4,
    c: function(){
        return meinObjekt.a*meinObjekt.b;
    }
}

Wie man hier schön sieht, unterscheidet sich das Object literal gegenüber einer normalen Funktion, dass es nicht eine Variable oder eine Funktion einer Variablen zuweist, sondern dass es direkt mittels { } derklariert wird.

Mit { } wird direkt ein Objekt meinObjekt erzeugt und es können wieder beliebige “Klassenmembers” erzeugt werden (hier Variable a, b und Funktion c() ).

Das spezielle an Object literals ist, dass alle Members public sind und wie in Javascript üblich, können problemlos zur Laufzeit noch neue Members hinzugefügt werden.

meinObjekt.d = function(){
    return "all right";
}

Mit dem obigen Stück Code habe ich ganz einfach zur Laufzeit der Membervariable d vom Objekt meinObjekt eine neue Funktion zugewiesen.

Naja, nachdem ich Code literals geschnallt habe, wurde mir jQuery doch schon um einiges Verständlicher

Namespaces

var namespace = {
    caching: {},
    orm: {
        mapping: {},
        save: {},
        load: function(){ return "Hello World" }
    }
}

Will man sich nun eigene Pakete (Namespaces) generieren und nicht den globalen Namespace mit Variablen, Funktionen und Objekten verseuchen (was ja in Javascript gerne gemacht wird), kann man sich die Object literals zu nutze machen und sich so beliebig tief verschachtelte Namespaces erzeugen. Im Beispiel habe ich nun ein Paket namespace mit den Subpackages caching und orm erzeugt. orm wiederum hat 3 weitere Subpackages…

Ich kann jetzt in meinem definierten namespace z.B. die Funktion load aufrufen. Unten seht ihr 2 Aufrufmöglichkeiten, wisst ihr was der Unterschied ist? Falls nein, wird der nächste Artikel sicher interessant, da werde ich auf das Thema Funktions- bzw. Objektaufrufe eingehen und genauer beschreiben, was mich am Anfang verunsichert hat.

namespace.orm.load;
namespace.orm.mapping.load();