Node.js mit Eclipse einrichten

Ich möchte einen Server für Fehlermeldungen erstellen. Dieser soll sehr dynamisch sein und deshalb werde ich Node.js und MongoDB oder eine andere NoSQL-Datenbank verwenden. Hier möchte ich festhalten, welche Schritte ich unternommen habe, um den Server zu entwickeln. Zunächst die Einrichtung von Node.js auf der Entwicklermaschine (Windows). Node.js von nodejs.org herunterladen. Ausführen. Fertig! Das war einfach.

Jetzt zur IDE. Ich möchte Eclipse benutzen, da dies, wenn auch manchmal etwas unhandlich, mir bis jetzt gute Dienste geleistet hat. Ich lade also die Eclipse Java Version von eclipse.org runter. Entpacken und den Workspace einstellen.

Als nächstes lade ich die Javascript Development Tools für Eclipse runter. Unter Help -> Install New Software kann man diese, wenn man „All available Sites“ auswählt, als Unterpunkt von Programming Languages finden. Anhaken und durchklicken. Fertig!

Nun noch schnell ein Javascript-Projekt mit den Standardoptionen erstellen. Dazu noch eine Javascript Source File im Projekt erstellen und folgendes eintragen:

console.log("Hello World!");

Jetzt möchte ich dies Debuggen. Dazu brauche ich den Eclipse Debugger für Googles V8 von http://code.google.com/p/chromedevtools/
I
n Eclipse wird einfach wieder Help -> Install new Software aufgerufen und als Site  http://chromedevtools.googlecode.com/svn/update/dev/ hinzugefügt.
Ausgewählt habe ich die Punkte „Chromium JavaScript Remote Debugger“ und „Chromium JavaScript Debugger Bridge to JSDT“ für die Javascript Development Tools.

Einen Link zur Einrichtung ist dieser: https://github.com/joyent/node/wiki/Using-Eclipse-as-Node-Applications-Debugger

Viel Spaß damit. Ich probiere den Inhalt des Links jetzt selbst aus.

Advertisements

Eine weitere Falle in Javascript!

Da will man in Ruhe eine kleine for-Schleife programmieren, und die will einfach nicht laufen…

var i;
for(i=0; i < data.lenght; i++){
    cooleAnweisungen(data[i]);
}

Nur wurde diese Schleife nie betreten, egal, wieviele Elemente das data-Array hat.

Woran lag es!? Ich habe length falsch geschrieben. Schwer zu sehen, durch Betriebsblindheit. Aber trotzdem finde ich, dass JavaScript ein komisches Verhalten zeigt.

Wäre data undefined, dann würde ein Fehler ausgelöst, da aber lenght undefined ist, passiert nichts. Schlimmer noch! Es gibt keinen Fehler und undefined ist nicht größer als i, was im ersten moment 0 ist. Dadurch wird die Schleife nie betreten, es wird aber auch kein Fehler gemeldet.

Also, immer gut auf das geschriebene in JavaScript achten!

CSS Generierung mit Stylus

Um eine große, komprimierte CSS-Datei zu bekommen und diese trotzdem noch wartbar zu halten, begab ich mich auf die Suche nach einem Tool für Node und Express. Dabei stieß ich auf Stylus.

Es ist einfaches CSS, nur ohne Klammern und Semikolons. Und man kann Javascript benutzen. Es wird auf der Serverseite beim Start des Servers in eine CSS-Datei compiliert und kann dabei auch direkt komprimiert werden.

Die @import Anweisung aus CSS wird verwendet, um dem Browser mitzuteilen, dass er an dieser Stelle eine weitere CSS-Datei nachladen soll. Stylus kennt diese Anweisung und wenn die Angegebene Datei auf „.css“ endet, dann wird die Anweisung auch als solche im Fertigen CSS stehen. Ist allerdings eine „.styl“-Datei angegeben, dann wird diese vor dem Compilieren eingefügt. Hierdurch kann eine Masterdatei mit Imports erstellt werden und das CSS in einzelne Dateien aufgeteilt werden.

Stylus compiliert aus solch einer Zusammenstellung eine große CSS-Datei. So ist das CSS (Stylus) wartbar, durch die einzelnen Dateien und es entsteht nur eine Datei, welche der Browser einmal lädt und dann cachen kann.

Ein kleiner Bonus:
Durch die Möglichkeit Variablen zu benutzen, durch einfache Anweisungen wie MainColor = #123456 kann nun eine „.styl“-Datei erstellt werden, welche alle Farben mit Namen definiert. Zum Beispiel Color1, Color2, … und Complement1, Complement2, … Diese wird mit der Import-Anweisung eingefügt und stellt so den anderen Styl-Dateien die Variablen zur Verfügung. Wenn sich nun die Farbpalette der Seite ändert, muss nur die Datei Colors.styl verändert werden.

Standardwerte in Jade-Templates

Folgendes Problem:
Ich habe ein Jade-Layout und ein Jade-Template. Ich möchte den Titel-Tag beim Rendern der Seite bestimmen. Das Layout-Template sah so aus (Funktioniert nicht!):

!!! strict
html
  head
    title #{title}
  body
    #kopfzeile Guten Tag!
    #inhalt!= body

Dies funktionierte auch, wenn man es wie folgt aus Express aufrief:

res.render('template.jade', {title: "Mein Titel"});

Nun wollte ich an manchen Stellen das Attribut einfach nicht verwenden und bekam eine Fehlermeldung.
title is not defined
Ich hab mich dann im Git-Repository umgesehen und diesen Eintrag gefunden.
Die Lösung ist, statt direkt auf die Eigenschaft zuzugreifen das locals-Objekt zu benutzen:

!!! strict
html
  head
    title= (locals.title || "Standardtitel")
  body
    #kopfzeile Guten Tag!
    #inhalt!= body

Dies kann nun so aufgerufen werden:

res.render('template.jade');

Oder mit gesetztem Titel:

res.render('template.jade', {locals:{title:"Mein Titel"}});

jQuery und der kleine Fallstrick

Ich arbeite seit kurzem mit jQuery und finde es sehr gut! Eine gute Javascript-Bibliothek, die einem sehr Viel Arbeit abnimmt.
Aber ich habe auch schon den ersten Fallstrick entdeckt.
Wenn ich ein DOM-Element mit der ID „sortMe“ habe und dieses mit $(„sortMe“) suche und dann Methoden darauf ausführe, funktioniert dies nicht! Es gibt aber auch keinen Fehler, oder ähnliches. Es klappt einfach nicht.
Hat mich etwas Zeit gekostet, herauszufinden, dass ich keinen Klotz davor gemacht habe. Richtig muss es heißen $(„#sortMe“)
Aber jetzt bin ich schlauer! Den Klotz nicht vergessen und nach einem Plugin suchen, dass hier zumindest während der Entwicklung Fehler auswirft!

Aptana Studio 3 zeigt (Pseudo-)Fehler bei statischen Dateien in Node.js

Ich nutze nun Aptana Studio 3 um unter Ubuntu für Node.js zu programmieren. Es gefällt mir gut, da es Autovervollständigung unterstützt. Nun hatte ich einen kleinen Test geschrieben, um statische Dateien, wie Bilder, mit Express verfügbar zu machen und musste feststellen, dass Aptana diesen als Falsch anmeckerte, obwohl er läuft.
Es geht um die folgende Zeile:

app.use(express.static(__dirname + '/public'));

Das Problem ist das Wort static. Dies gehört zu den reservierten Wörtern in Javascript und wurde trotzdem von den Entwicklern genutzt. Da mich das Anmeckern des Fehlers nervte, habe ich die Array-Schreibweise angewendet:

app.use(express['static'](__dirname + '/public'));

Nun meckert er nicht mehr und es funktioniert.

Ich lerne Javascript neu!

Ich habe ein sehr kleines, aber interessantes Buch in der Bibliothek entdeckt: „JavaScript: The Good Parts“ von Douglas Crockford. Das Buch versucht den Aufbau von JavaScript zu vermitteln, indem es nur die guten Dinge von Javascript aufzeigt und die schlechten lediglich im Anhang erwähnt. Ein interessanter Ansatz, aber es ist trotzdem etwas trocken zu lesen. Die vorgestellten Methoden sind allerdings sehr nützlich. Die Beispiele könnten etwas mehr „CleanCode“ vertragen, da manche Variablen-/Funktionsnamen sprechender sein könnten. Ich denke ich werde etwas Erfahrung sammeln und mich dann an einem Artikel zu CleanCode in JavaScript versuchen.