Schlagwort-Archive: JQuery

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.

Ein Diplom an der Codecademy

Nachdem ich mich über Oliver Zeigermanns Buch „JavaScript für Java-Entwickler“ technologisch dem Browser angenährt hatte, wollte ich das erlernte natürlich vertiefen. Neben den theoretischen Grundlagen fehlt mir vor allem die Praxis. Bei der Suche nach einigen Tutorials bin ich auf die Codecademy gestoßen.

Codecademy_logo

Auf der Plattform kann man die Kurse:

  • HTML & CSS
  • jQuery
  • JavaScript
  • PHP
  • Python
  • und Ruby

besuchen. Learning by Doing lautet hier die Devise. Pro Technologie gibt es einen Satz aufeinanderfolgender Übungen. Je nach Vorkenntnissen kann der Einstieg selbst gewählt werden. Ich entscheide mich bei Null anzufangen und starte mit der ersten Übung aus dem Kurs JavaScript. Der Aufbau der Turorials besteht aus einer sehr einfachen Aufgabenstellung, die in einem Online Editor gelöst werden will. Erlerntes wird in mehren Schritten vertieft und muss immer wieder angewendet werden.

codecadamyCourse

Der Einstieg ist simpel: Variable, Kommentare, Schleifen Verzweigungen, Arrays…  Alles in allem müssen keine großen Hürden übersprungen werden. Langweilig wird es aber trotzdem nicht, weil es vom Verständnis bis zur Lösung nur weniger Minuten und einiger Zeilen Code bedarf. Darüber hinaus wird man mit unzähligen Badges belohnt: Für die erste Übung, den ersten abgeschlossenen Kurs, 10 Übungen pro Tag und so weiter. Ich muss gestehen, dass ich durchaus auf das Belohnungsschema anspringe.

Bald betrete ich mit den Übungen so etwas wie Neuland und übe die JavaScript Objektnotation, anonyme Funktionen, Prototypen und die Varianten der Objekterzeugung und Manipulation. Für den Abschluss mein JavaScript Codecademy Zertifikat benötige ich einen Tag. Ich bin zufrieden und schließe auch noch die HTML & CSS und die jQuery Klasse ab. Nachdem ich die Grundlagen erarbeitet und geübt habe, widme ich mich den Web-Project angeboten. Dort werden in einigen etwas komplexeren Aufgaben JavaScript und HTML zusammengeführt.

codeCademyBadges

Meine Badges füllen inzwischen den ganzen Monitor und so langsam habe ich den Eindruck dass ich für tieferes Wissen und kniffligere Aufgaben bereit bin. Wenn ich möchte kann ich meine Eigenen Tutorials auf der Plattform anbieten oder mich in einer der vielen Gruppen mit anderen Entwicklern zu fortgeschrittenen Themen austauschen.

Ich habe den Eindruck, dass ich mich mit meinen Kenntnisse gerne ich der echten virtuellen Welt austoben möchte. Anregungen kann man sich auch hier bei der Codecademy holen. So gibt es weitere Turorials für APIs von Diensten wie z.B. Youtube oder Soundcloud.

Die Codecademy war für mich ein super Einstieg in die Praxis von JavaScript und JQuery. Ich habe den Eindruck mir die Grundlagen beider Technologien praktisch angeeignet zu haben. Vor allem aber hat es Spaß gemacht, so dass ich den Besuch der Kurse zur Nachahmung empfehlen kann.

OpenMRS Codejam bei ThoughtWorks

Es gibt wohl viele Möglichkeiten die Welt ein Bisschen besser zu machen, indem man ein wenig seiner freien Zeit und seines Know Hows einbringt. Als Softwareentwickler fällt das im Allgemeinen recht leicht, da man sich an einem von unzähligen gemeinnützigen Open Source Projekten beteiligen kann. Ich habe sowohl Zeit als auch Muse interessante und hilfreiche Projekte zu unterstützen. Der Zeitaufwand für das Projektsetup, die Einrichtung der Entwicklungsinstanz und die Einarbeitung in die fachlichen Themen der Anwendung empfinde ich aber als eine große Hürde.

OpenMRS-logo

Diese Hürde nimmt die Firma Thoughtworks bei ihren Codejams. Thoughtworks unterstützt die Open Source Plattform OpenMRS. Die Software dient zur Erfassung medizinischer Daten und erleichtert die Verwaltung von Krankenakten und somit die Diagnostik und Behandlung in Gebieten mit einer niedrigen medizinischen Infrastruktur. OpenMRS ist seit Jahren in vielen Ländern der Welt im Einsatz. Da es kostenlos ist und niedrige Anforderungen an die benötigte Hard- und Software stellt, wird es auch in vielen Entwicklungs- und Krisenländern verwendet. Die Codejams finden alle paar Monate z.B. in der Hamburger Niederlassung von Thoughtworks statt. Ich besuchte die Veranstaltung am 11.Januar 2013.

Die Einladung ließ viel Interpretationspielraum für den Inhalt des Termins. Die Angabe, dass jeder ohne Vorkenntnisse vorbeischnuppern kann, empfand ich aber als sehr sympathisch. Um 10:00 Uhr gings dann also los. Außer mir nahmen noch fünf andere Gäste und ebenso viele Mitarbeiter von ThoughtWorks an dem Termin teil. Nach einer kurzen Vorstellungsrunde bekamen wir eine kleine Einführung in das System, dessen Verwendung, der Projektorganisation und der technischen Architektur. Die Web-Anwendung setzt auf dem gängigen Technologiestack, bestehend aus SpringMVC und Hibernate auf. In der Präsentationsschicht werden JSPs verwendet deren HTML-Output mit JQuery abgerundet wird.

OpenMRS Technologieübersicht

Nach der Präsentation teilten wir uns zum Pair-Programming auf. Jeder Newbie suchte sich dazu einen alten Hasen von ThoughtWorks. Die meisten Besucher klonten sich das OpenMRS Repository von GitHub und versuchten eine Entwicklungsumgeb zum Laufen zu bringen. Ich arbeitete mit Marvin an dessen Maschine zusammen und konnte somit gleich mit der Entwicklung beginnen. Marvin ist Student und ist über ein OpenMRS-Codejam auf ThoughtWorks aufmerksam geworden. In den kommenden Wochen geht seine Bewerbung für eine Festanstellung in die heiße Phase. Ich drücke die Daumen.

Im OpenMRS-Ticket-System gibt es einige Aufgaben für Einsteiger. Bei den meisten handelt es sich um kleinere Bugs, Übersetzungen, Dokumentation oder Verbesserungen der Codequalität. Wir schnappten und einen einfachen JavaScript-Bug und konnten ihn recht schnell lösen. Also suchten wir uns ein etwas komplexeres Problem. Wir fanden einen Bug, der seine Wurzeln in der Applikationslogik hatte und verbrachten den Rest des Tages damit ihn zu finden und zu lösen. Bevor unsere Änderungen in das Produkt einfließen, müssen noch OpenMRS-Core-Entwickler den Pull-Request akzeptieren.

tw-logo

Der Codejam war das erste Event auf dem ich mit anderen Entwicklern, freiwillig und auch völlig unvorbereitet an einem Projekt arbeitete. Durch die Einführung bei ThoughtWorks und die Mischung aus uns Neulingen und Entwicklern, die die Software kannten, gelang es doch einigermaßen schnell die ersten Tickets zu bearbeiten. Neben der technischen Unterstützung schaffte ThoughtWorks eine angenehme und produktive Umgebung und stellte Getränke und natürlich Pizza.

Der nächste Codejam findet am 15.März in Hamburg statt. Ich bin dabei.