Was kann man sich unter DOJO vorstellen?

Wie der Name bereits impliziert handelt es sich beim DOJO Toolkit um eine Programmierbibliothek für die clientseitige Sprache JavaScript. Derartige Frameworks sind in den letzten Jahren durch den enormen Fortschritt sowie die gestiegenen Anforderungen für Applikationen im Internet populär geworden. Sie bieten Entwicklern zum Einen eine solide Basis für den Umgang mit dem Document Object Model (DOM) und dienen zum Anderen auch zur Abstraktion von asynchronen Datentransfers - besser bekannt als AJAX.

DOJO im Vergleich zu anderen Frameworks

Viele werden sich an dieser Stelle denken, dass es bereits einige gute JavaScript-Bibliotheken gibt - wie z.B. jQuery. Auch mit diesen Framworks lassen sich die zwei genannten Hauptaspekte der Verwendung (DOM und AJAX) bewerkstelligen. Allerdings reichen die Möglichkeiten auch nicht viel weiter, wenn man von den unzähligen Plugins absieht, die es mittlerweile für jQuery gibt. Das Hauptproblem stellt dabei aber die unterschiedliche Lizenzierung dieser Erweiterungen dar, da diese meist von Drittanbietern bereitgestellt werden und lediglich von der jQuery-Community über die Plattform verlinkt werden und zumeist auch mit einem separaten <script> eingefügt werden müssen. Im Gegensatz dazu laufen alle Erweiterungen (Packages) von DOJO über eine einzige Distribution und können mit dem in der Core integrierten Modullader ganz bequem zur Laufzeit geladen werden, nachdem diese bspw. über das Google-CDN eingebunden wurde. Ein einfaches Beispiel zum Laden von Modulen könnte so aussehen:

google.load("dojo", "1.6.1");

dojo.require("dojo.dnd.Source");
dojo.require("dojo.dnd.Moveable");

function init(){
    var source = new dojo.dnd.Source("domElementId");
    var moveable = new dojo.dnd.Moveable("domElementId");
}

dojo.addOnLoad(init);

Die Basics der DOJO-API

Wie bereits angesprochen erfüllen die meisten JavaScript-Toolkits zwei Hauptaufgaben, auf die ich nur ganz kurz eingehen möchte, da sich diese bei DOJO nicht wesentlich von anderen Frameworks unterscheiden:

DOM-Manipulationen und Effekte

Der oft benötigte Zugriff auf das DOM zur Laufzeit sowie die Verwendung von Standard-Effekten zur Modernisierung von Webapplikationen ist auch bei DOJO ohne zusätzliche Module möglich.

So würde sich bspw. das Hinzufügen einer CSS-Klasse zu einem HTML-Element wie folgt gestalten:

dojo.query("#domElementId").addClass("active");

Um ein Element mit dem populären "Fade-Effekt" einzublenden, wird folgender Code benötigt:

dojo.fadeIn({ node:"domElementId", duration:500 }).play();

Einfache Programmsteuerung mit Deferreds

Genauso einfach wie die DOM-Manipulation bietet sich der Umgang mit AJAX dar, wobei hier unter mehreren Varianten sogenannte "Deferreds" zu bevorzugen sind, da diese eine bessere Kontrolle von asynchronen und synchronen Prozessen gewährleisten - sowohl in serieller ("chaining") als auch paralleler ("deferred list") Hinsicht.

Das Laden einer JSON-Datei über AJAX mit "Deferreds" würde folgendes Skript ermöglichen:

var deferred = dojo.xhrGet({
    url: "data.json",
    handleAs: "json"
});

deferred.then(
    function(data) { /* your code on successful loading  */ },
    function(error){ /* your code on error while loading */ } 
);

Konsistente Applikations-Layouts mit dijit-Widgets

Für die meisten Software-Entwickler steht die grafische Gestaltung der Applikation oftmals im Hintergrund. Aber auch hier leistet das Open-Source-Framework Abhilfe, in dem es einen eigenen Namensraum ("Namespace") für alle nur erdenklichen UI-Elemente wie z.B. Buttons, Formularelemente, Tabbers, Overlays etc. bereitstellt. Bis dato gibt es die Layoutpalette in vier sehr ansprechenden Stilrichtungen, die natürlich allesamt anpassbar sind. Somit braucht man sich als Entwickler (fast) keine Gedanken mehr um die visuelle Aufarbeitung der Anwendung machen und kann sich voll und ganz auf den Code fokussieren, ohne dabei auf ein ansprechendes Design verzichten zu müssen.

Benötigt man bspw. einen Button zum Versand eines Formulars hilft dieser Schnipsel:

dojo.require("dijit.form.Button");

var button = new dijit.form.Button({
    id:"myButton",
    label:"Absenden",
    onClick:function(e){ /* onclick handler */ }
    // further options here
}, "domElementId");

Datenmanagement am Client leicht gemacht

Die Kernelemente einer jeden Applikation stellen die handzuhabenden Datensätze und dessen Management durch den Benutzer dar. Hier kann man einerseits auf die im vorigen Absatz angesprochenen dijit-Formularelemente, anderseits auf eigens für die Verwaltung von großen Datenmengen vorgesehenen Modulen - wie z.B. dem DataGrid - zurückgreifen. Diese DOJO-Module arbeiten mit sogenannten "Stores" - angelehnt an die HTML5 object store API sowie dem Representational State Transfer (REST) - und beinhalten als Daten schlichte JavaScript-Objekte, welche wahrscheinlich besser als JavaScript Object Notation (JSON) bekannt sind. Durch das REST-Paradigma stellen diese infolge auch alle diesbezüglichen Methoden wie bspw. get() oder put() zur Verfügung und vereinfachen dadurch den Umgang mit Daten immens.

Zum besseren Verständnis sollte der nachstehende Beispielcode "Licht ins Dunkel" bringen:

dojo.require("dojo.store.Memory");

var json = [
    {id:1, name:"Bob", salary:2500},
    {id:2, name:"Alice", salary:1800},
    {id:3, name:"Carol", salary:2200}
];

var store = new dojo.store.Memory({data:json});

// save name property of data with id 3
var query = store.get(3).name;

// delete data with id 2
store.remove(2); 

// add new data to store
store.put({id:4,name:"Dave",salary:2600});

Solider Grundstein für objektorientierte MVC-Architekturen

Da die Entwickler von DOJO erfahrene Programmierer sind und selbst sehr auf modernste Techniken und Standards achten, womit auch eine strikte Trennung von Datenmodell (M), Datenpräsentation (V) sowie Geschäftslogik (C) einhergeht, bildet das Framework die ideale Basis für eine zeitgemäße Webapplikation. Je nachdem wie verstrickt bzw. abhängig die eigenen Module von DOJO sind, bietet sich zum Einen die in der Core enthaltene Philosophie mit dojo.declarezum Erzeugen eigener Klassen und zum Anderen das traditionelle Prototyping an.

Weitere Informationen

Natürlich habe ich im Rahmen dieses Beitrags nur die Eckpfeiler des Funktionsumfangs von DOJO erwähnen können. Wer mehr Informationen zum Toolkit haben möchte, sollte am besten die offizielle Webseite www.dojotoolkit.org besuchen oder sich das folgende Einführungsvideo zu Gemüte führen:

Geposted in Entwicklung am 2. September 2011 um 18:47