Dojo Library – ein Wegbereiter für moderne Webentwicklung

In meinem Blog-Beitrag möchte ich die Dojo Library vorstellen. Sie hat Anfang der 2000er Jahre maßgeblich zur Entwicklung moderner Webtechnologien beigetragen und Konzepte eingeführt, die heute als Standard gelten. Für alle, die sich für Webentwicklung interessieren, ist es spannend zu wissen, dass viele gängige Techniken und Ansätze ihren Ursprung in Dojo haben. Diese prägenden Ideen und Innovationen möchte ich hier vorstellen.

Was ist Dojo und was kann es?

Dojo ist eine JavaScript-Bibliothek, die zu einer Zeit entwickelt wurde, als es noch keine einheitlichen Standards für die Webentwicklung gab. Sie wurde entworfen, um Webanwendungen einfacher und schneller zu machen. Mit vielen Konzepten und Ideen hilft Dojo, die Herausforderungen der früheren Webentwicklung zu meistern und auch heutige Probleme effizient zu lösen.

Dojo hat viele Ideen eingeführt, die wir heute noch nutzen. Einige davon sind:

• Modulare Programmierung: Code wurde in kleinere Teile aufgeteilt. Das hat die Ladezeiten verbessert und den Code übersichtlicher gemacht.
• Wiederverwendbare Komponenten: Die Dojo Library hat ein System entwickelt, um UI-Komponenten wiederverwenden zu können. Ähnlich wie heute bei Angular, React oder Vue.
• Asynchrone Programmierung: Dojo verfügte schon früh über Werkzeuge, die das Schreiben von asynchronem Code erleichtern. Das bedeutet, dass Aktionen im Hintergrund ausgeführt werden können, ohne dass die Webseite einfriert.
• Cross-Browser-Kompatibilität: Damals, als die Webbrowser (Internet Explorer, Edge, Firefox, Chrome, Safari) noch viel unterschiedlicher waren als heute, hat Dojo den Weg dafür geebnet, dass der Code in jedem Browser gleich aussieht und funktioniert.

Modulare Programmierung in Dojo

Dojo verfügte bereits früh über zentrale Funktionen und Konzepte, die für die Entwicklung wiederverwendbarer Komponenten entscheidend waren. Hier sind die wichtigsten Funktionen und ihre Anwendung in Dojo:

1. Lifecycle Hooks

In Dojo werden Lifecycle Hooks hauptsächlich in Widgets und Dijits (Dojo-Widgets) verwendet, um den Lebenszyklus einer Komponente zu steuern. Die wichtigsten Hooks umfassen:

• constructor(): Initialisiert das Widget vor seiner Erstellung.
• postMixInProperties(): Wird aufgerufen, bevor die Attribute des Widgets mit Standardwerten oder benutzerdefinierten Werten überschrieben werden.
• buildRendering(): Erzeugt den DOM-Baum des Widgets.
• postCreate(): Wird nach der DOM-Verknüpfung des Widgets aufgerufen.
• startup(): Signalisiert, dass das Widget bereit ist und dem DOM hinzugefügt wurde.
• destroy(): Entfernt das Widget aus dem DOM und bereinigt alle Ressourcen.

Diese Lifecycle Hooks ermöglichen eine präzise Steuerung über jede Phase im Leben eines Widgets.

	
		define(["dojo/_base/declare", "dijit/_WidgetBase"], function(declare, _WidgetBase){
		    return declare([_WidgetBase], {
		        constructor: function(){
		            console.log("Widget initialized");
		        },
		        postMixInProperties: function(){
		            console.log("Properties mixed in");
		        },
		        buildRendering: function(){
		            this.inherited(arguments);
		            console.log("DOM elements created");
		        },
		        postCreate: function(){
		            console.log("Widget created and DOM linked");
		        },
		        startup: function(){
		            console.log("Widget started and added to DOM");
		        },
		        destroy: function(){
		            console.log("Widget destroyed and removed from DOM");
		        }
		    });
		});
	

2. Template Strings (HTML-Inline in JavaScript)

In Dojo können Templates direkt im JavaScript-Code eingebettet werden, um die Struktur und das Layout einer Komponente zu definieren. Das ermöglicht es, HTML direkt im JavaScript des Widgets zu definieren.

	
		define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/text!./template.html"],
		  function(declare, _WidgetBase, template){
		    return declare([_WidgetBase], {
		    templateString: template,
		    postCreate: function(){
		        console.log("Template linked to DOM!");
		    }
		    });
		});
	

3. Input/Output-Parameter (Datenbindung)

Dojo ermöglicht die Übergabe von Werten und Eigenschaften an Widgets, typischerweise über MixIn-Properties oder Konstruktorparameter. Auf diese Weise können Entwicklerinnen und Entwickler Parameter von außen setzen und in der Komponente verarbeiten.

	
		define(["dojo/_base/declare", "dijit/_WidgetBase"], function(declare, _WidgetBase){
		    return declare([_WidgetBase], {
		      customProperty: "Default Value",
		      postCreate: function(){
		        console.log("Property Value:", this.customProperty);
		      }
		    });
		});
	

4. Getrennte Dateien für CSS, HTML und JavaScript

Dojo unterstützt die Trennung von CSS, HTML und JavaScript. Häufig werden HTML-Templates als Template Strings direkt in JavaScript-Dateien eingebunden, während CSS in separaten Dateien verwaltet wird. Dies fördert die Wiederverwendbarkeit und Übersichtlichkeit.

• JavaScript (Widget-Logik): Enthält die Geschäftslogik und Steuerung.
• HTML (Template): Kann innerhalb des JavaScript-Codes integriert oder als separate Datei verwendet werden.
• CSS: Wird oft in externen Dateien gehalten und für das Styling des Widgets genutzt.

Wiederverwendbare Komponenten in Dojo

Dojo bietet ein flexibles Widgetsystem auf Basis der Dijit-Bibliothek, das eine Vielzahl von UI-Elementen bereitstellt. Diese Widgets sind wiederverwendbare Komponenten, die individuell angepasst und erweitert werden können.Beispiele für Dojo Widgets:

• dijit.form.Button: Wiederverwendbarer Button mit erweiterten Funktionen.
• dijit.Dialog: Ein modaler Dialog, der vielseitig angepasst werden kann.
• dijit.Tree: Ein interaktiver, hierarchischer Baum für die Navigation.

Asynchrone Programmierung in Dojo

Ein weiteres wichtiges Merkmal von Dojo ist die Unterstützung asynchroner Programmierung. Diese ermöglicht es, Serveranfragen und andere zeitintensive Aufgaben im Hintergrund auszuführen. Mit der dojo/request-API können HTTP-Anfragen einfach und effizient gestellt werden, ohne dass die Benutzeroberfläche blockiert wird.

	
		require(["dojo/request"], function(request){
		    request.get("https://example.com/api/data").then(function(data){
		        console.log("Data received:", data);
		    });
		});  
	

Cross-Browser-Kompatibilität mit Dojo

Zu Beginn des Jahrtausends unterschieden sich die Webbrowser stark in ihrer Unterstützung von HTML, CSS und JavaScript. Webentwicklerinnen und -entwickler mussten daher viel Aufwand betreiben, damit ihre Anwendungen in allen Browsern gleich aussahen und funktionierten. Dojo war eine der ersten Bibliotheken, die dieses Problem anging und plattformübergreifende Kompatibilität bot. Sie enthielt Werkzeuge und Funktionen, die speziell dafür entwickelt wurden, die Unterschiede zwischen Browsern zu erkennen und anzupassen, ohne dass Entwickler für jeden Browser separaten Code schreiben mussten.

Dojo stellte sicher, dass JavaScript-Funktionen überall einheitlich ausgeführt werden konnten, indem browserspezifische Unterschiede intern behandelt wurden. Beispielsweise wurden in Dojo Funktionen entwickelt, die sicherstellen, dass Event-Listener in allen Browsern funktionieren, ohne dass sich Entwickler um Inkompatibilitäten kümmern müssen.

Nehmen wir als Beispiel dojo.connect für das Hinzufügen eines Event-Handlers für einen Button-Click. Früher musste man für verschiedene Browser unterschiedliche Event-Handler-Codes schreiben, da der Internet Explorer eine andere Syntax verwendet als andere Browser.

	
		require(["dojo/dom", "dojo/_base/connect", "dojo/domReady!"], function(dom, connect){
		    var button = dom.byId("myButton");
		    connect.connect(button, "onclick", function(){
		        alert("Button wurde geklickt!");
		    });
		});
	

Hinweis: Mit Dojo 1.7 gibt es ein neues Modul dojo.on für Event-Handling.

Fazit

Dojo war einer der ersten Ansätze, der moderne Konzepte wie Lifecycle Hooks, modulare Programmierung und separate Dateien für CSS und HTML unterstützte. Die wiederverwendbaren Komponenten von Dojo sind auf Anpassbarkeit und Modularität ausgelegt und bieten eine solide Grundlage für Entwickler. Aus diesen Gründen kann man sagen, dass Dojo ein Pionier der modernen Webentwicklung ist und als Vorläufer von Angular, React und Vue angesehen werden kann.

Ihr möchtet gern mehr über spannende Themen aus der adesso-Welt erfahren? Dann werft auch einen Blick in unsere bisher erschienenen Blog-Beiträge.