Schlagwort-Archive: Eclipse

JSHint und JSLint – JavaScript Codequality

Bei meinen ersten eigenen JavaScript Gehversuchen mit der Skillmatrix muss ich feststellen wie sehr sich das Entwickeln von JavaScript und Java unterscheidet. Die starre Typisierung und Java ermöglicht ein recht komfortables Refactoring, das somit toolgetützter Teil des Entwicklungsprozesses werden kann. Bei JavaScript scheint mir das schon ein wenig schwerer. In Eclipse kann das Ausmaß dieser Schwierigkeiten an dem Unterschied der Einträge im Refactoring-Contextmenü des JavaScript Editors gemessen werden.

jslint

Bei der Suche nach der Lösung dieses Problems stößt man innerhalb kürzester Zeit auf JSLint oder, wenn es etwas stylisher aussehen darf, auf den Doppelgänger JSHint. Hierbei handelt es sich weniger um eine IDE oder ein Refactoring-Tool, sondern um eine Art Stylecheck für JavaScript-Quellcode. JSLint testet die etablierten Codeconventions. Im einfachsten Fall kann man sein Skript einfach via Copy und Paste in das Online-Formular kopieren und auf unterschiedlichste Fehler prüfen lassen. Die Spannbreite reicht von vergessenen Leerzeichen und Kommas über Variablen, die nicht verwendet werden oder sich im Falschen Scope befinden bis hin zu missverständlichen Verzweigungen oder unerwünschten Notationen.

jshint

Somit hilft JSLint nicht direkt beim Entwickeln des Codes, meckert aber wenn das Ergebnis nicht ganz optimal ist. Schön wäre es, wenn diese Prüfung regelmäßig schon während der Entwicklung gemacht wird. Geht das? Klar geht das. Bei der Suche nach dem passenden Eclipse-Plugin wird man bei jshint-eclipse fündig. Wie erwartet wird man sofort nach der Installation in der gewohnten Strenge auf mögliche Probleme in seinem Script hingewiesen. Die Art der Prüfungen kann man über das Menü (Windows > Preferences > JSHint > Configuration) entsprechend er JSHint Options leicht anpassen.

An dieser Stelle möchte ich gestehen, dass die Codebeispiele aus der Skillmatrix bereits mehrere JSLint-Durchläufe hinter sich haben. Wie viele Punkte JSLint gefunden hat, bleibt aber mein Geheimnis.

Ich bin mir trotzdem noch nicht ganz sicher ob ich bei der Entwicklung von JavaScript bei Eclipse bleibe oder auf einen Texteditor umsteige. Deshalb probiere ich von Anfang an auch leichtgewichtigere Alternativen wie Sublime aus. Eine Anleitung zur Integration von JSHint in Sublime findet man im Blog von Exratione.

Die Refactoring Tools von Eclipse aus der Java-Welt vermisse ich immer noch. Ich kann mir vorstellen, dass diese Sehnsucht verstärkt wird, wenn sich die Skripte über mehrer Dateien und Verzeichnisse erstrecken. Trotzdem beruhigt JSLint bzw. JSHint, da so Codequalitäts-Standards gesichert werden können, die über einfache Syntaxchecks hinausgehen. Hier hilft wahrscheinlich eine Art Continious Integration Produkt auf JavaScript-Ebene. Aber das ist ein Thema für einen anderen Post.

Mit jQuery und JavaScript zur Skillmatrix

Es wird Zeit für mein erstes kleines JavaScript-Projekt. Die theoretischen Grundlagen sind gelegt. Bei Codecademy habe ich ausführlichst geübt. Ich muss also nur noch loslegen.

Für meine Website http://freelance.matthias-strolz.de, die ich zur Bewerbung als Java/J2EE Freelancer benutze, möchte ich meine Fertigkeiten und Kenntnisse neben meinen Projekten auch in einem kleinen Diagramm darstellen. Ich will das mal als Skillmatrix bezeichnen.

Skillmatrix Screenshot

Die unterschiedlichen Fertigkeiten (Skills) werden in einem einfachen JSON File angelegt.

"skillGroups" : [
 {
  "id" : "programmingLanguages",
  "title" : "Programmierung",
  "skillBlocks" : [
   {
    "title" : "Programmiersprachen",
    "skills" : [
     {
      "title" : "Java"
     },
     {
      "title" : "Groovy"
     },
     {
      "title" : "JavaScript"
     },
...

Per JavaScript sollen jetzt die Informationen aus dem JSON ausgelesen und auf meiner Homepage angezeigt werden. Für das Laden des JSON und die DOM Manipulation verwende ich jQuery. Für die meisten Funktionen meines Skripts kann ich auf Basisfunktionen von jQuery zurückgreifen. Zum Abholen der Daten genügen folgende Zeilen:

$.getJSON("../json/skills.json", function (data) {
   var parent = $("#col3_content"), skillGroupIds = [];
   $.each(data.skillGroups, function (key, skillGroup) {
     processSkillGroup(skillGroup, parent);
     skillGroupIds.push(skillGroup.id);
   });
   fadeInSkillGroups(skillGroupIds, 0);
});

In der Funktion processSkillGroup werden die Skill-Gruppen und Blöcke und die Skills selbst ausgelesen in HTML gepackt und in den div mit der id col3_content gehängt. Anschließend sorgt die Methode fadeInSkillGroups dafür, dass die einzelnen Gruppen nach und nach auf der Seite eingeblendet werden. Für das Auge soll ja auch was dabei sein.

Die Umwandlung von JSON in HTML erfolgt durch die Erzeugung von Strings mit HTML-Tags, die dann über jQuery in einen bestimmten div gehängt werden.

function processSkillGroup(skillGroup, parent) {
  parent.append('<div id="' + skillGroup.id + '" style="display:none;"><h2>' + skillGroup.title + '</h2></div>');

   $.each(skillGroup.skillBlocks, function (key, skillBlock) {
     processSkillBlock(skillBlock, $('#' + skillGroup.id));
   });
 }

Bei der Kombination von JavaScript Quellcode und HTML Tags muss ich dann zum ersten mal schlucken. Da kommen Erinnerung an die dunkle Epoche der Servlet Programmierung hoch. Vielleicht gibt es ja eine JavaScript Templating Sprache, denke ich mir und nehme mir vor auf die Suche zu gehen.

Wenn die ganzen Divs erzeugt und im DOM angekommen sind sollen sie nacheinander eingeblendet werden. Über einen rekursiven Aufruf der jQuery-Funktion fadeIn ist das ein Kinderspiel.

function fadeInSkillGroups(skillGroupIds, index) {
  if (index + 1 < skillGroupIds.length) {
    $('#' + skillGroupIds[index]).fadeIn('fast', function () {
      fadeInSkillGroups(skillGroupIds, index + 1);
    });
  } else {
    $('#' + skillGroupIds[index]).fadeIn('fast');
  }
}

Mit ungefähr 40 Zeilen JavaScript-Code ist es also Möglich mit ein paar visuellen Effekten JSON in HTML zu verwandeln. Das empfinde ich schonmal als angenehme Erkenntnis. Weniger angenehm ist der Tool-Support bei der Entwicklung mit Eclipse. Code-Completion sind im eingebauten JavaScript-Editor Fehlanzeige wie ein anständiger Syntaxcheck. Refactorings sind ebenfalls deutlich unkomfortabler als bei der Java bzw. J2EE Entwicklung. Es klappt schon recht schnell und unkompliziert ansprechende Ergebnisse mit JavaScript zu erzielen. Aufgrund des mangelnden Toolings insbesondere bei Eclipse mache ich mir ein wenig Sorgen um die Aufrechterhaltung der Code-Qualität. Aber sicher gibt es hierfür Lösungen, mit denen ich mich in meinem kommenden Blogbeitrag beschäftigen kann.

Setting Up OpenMRS in Eclipse Kepler

Nach meinen OpenMRS Codejam bei ThoughtWorks möchte ich eine lokale Entwicklungsumgebung bei mir aufsetzen. Bei den Mitarbeitern von ThoughtWorks ist IntelliJ die IDE der Wahl. Ich habe bisher hauptsächlich mit Eclipse gearbeitet und möchte das weiterhin tun. Da die Projekt-Organisation via Maven gesteuert wird, sehe ich keine größeren Hindernisse, die einen Versuch ausschlössen. Außerdem gibt es eine offizielle Anleitung für die Einrichtung von OpenMRS unter Eclipse.

Die Softwarevoraussetzungen erfülle ich. Ich habe Ubuntu mit einem JDK 6. Git und MySQL habe ich auch schon installiert. Ich benutze Eclipse Kepler in der J2EE Variante. Hinzugefügt habe ich Plugins eGit, m2e, sowie die m2e Connectoren für Git und wtp. Bevor ich zu Eclipse komme, brauche ich erst mal den Quellcode auf dem OpenMRS-Git-Repository auf GitHub. Einen Klon bekomme ich per Git auf dem Terminal über:

git clone https://github.com/openmrs/openmrs-core.git

Anschließend richte ich mir einen neuen Workspace namens openmrs ein. Dazu lege ich einfach ein neues Verzeichnis an, das ich beim nächsten Start von Eclipse als Workspace auswähle.

mkdir openmrsmkdir openmrs

Nach dem Start von Eclipse importiere ich die Projekte aus meinem Klon des Git-Repositorys. Dazu wähle ich im Menü:

> File > Import > Maven > Existing Maven Projects into Workspace

Als Quellverzeichnis für den Import wähle ich das Verzeichnis in dem der oben erwähnten Klon liegt. Bei mir ist das:

~/git/openmrs-core

Ich importiere alle Projekte, die mir der Assistent nach Auswahl der Quelle anbietet.

Import Existing Maven Projects openMRS

Import Existing Maven Projects openMRS

Nach Klick auf Finish beginnt der Import und eine Menge Mavenkram passiert im Hintergrund. Gleichzeitig werde ich aufgefordert ein neues Plugin zu installieren:

"m2e connector for build-helper-maven-plugin"

Ich folge den Anweisungen und starte Eclipse wie empfohlen neu, nachdem das Plugin installiert wurde und der Import der Projekte abgeschlossen ist. Wie erhofft konnten alle Projekte angelegt werden:

  • openmrs
  • openmrs-api
  • openmrs-release-test
  • openmrs-test
  • openmrs-tools
  • openmrs-web
  • openmrs-webapp

Allerdings werden noch einige Probleme und mehrere Tausend Warnings angezeigt. Die Fehler kann ich beheben indem ich die tools.jar in die BuildPath Einträge des Projekts openmrs-tools hinzufüge. Dort liegen die benötigten Klassen der Packages com.sun.tools… und com.sun.javadoc… für das ShouldTaglet.

import com.sun.tools.doclets.Taglet;
import com.sun.javadoc.*;
import java.util.Map;

/**
 * Taglet for @should annotations.
 */
public class ShouldTaglet implements Taglet {

Bei den Warnings handelt es sich um Unschönheiten im Quellcode. Sie sind wohl der verteilten Projektstruktur und den wenig strengen Code-Guidelines geschuldet. Ich möchte das Projekt erstmal zum Fliegen kriegen und werde mich um die Probleme später kümmern.

Ich konfiguriere einen Maven-Build, indem ich mit der rechten Maustaste auf das Top-Projekt openmrs und dort auf:

Run As > 2 Maven Build ...

klicke. Als goals tippe ich „clean install“ ein und lege los. Es dauert zwar ein paar Minuten, dann läuft der Build aber erfolgreich durch. Jetzt wird’s ernst. Ich starte einen zweiten Build, diesmal auf dem Projekt webapp mit dem goal jetty:run .

Die Webapp wird gestartet. Ich erreiche sie unter:

http://localhost:8080/openmrs/index.htm

und werde zum Installations-Assistenten weitergeleitet. Ich entscheide mich für die simple Installation. Hier muss ich nur einen MySQL Benutzer angeben, der die Datenbank und die Tabellen anlegt. Auch das mache ich natürlich gerne, der Rest läuft von selbst. Nach der Installation lande ich auf dem Login Screen und nach der Eingabe von admin / Admin123 bin ich am Ziel:

openMRSWelcomeScreen