Dojo und jQuery im Vergleich

Modell, Extensionentwicklung, Geschwindigkeit, Eleganz, Einarbeitungszeit...

Agenda

1. JavaScript

Warum eigentlich JavaScript?

JavaScript ist essenziell bei der Entwicklung dynamischer Websites

• Objektorientierte Skriptsprache
• Einsatz in Web-Browsern für Client-Side-Scripting
• Nutzung auf über 80% aller Websites
• Haupsätzlich eingesetzt zur...
  • ... Manipulation des Document-Object-Model
  • ... Interaction mit dem User
  • ... Asynchronen Kommunikation

2. Grundlagen

Was sind Dojo und jQuery?

JS Libraries beschleunigen die Entwicklung

• Repetitive Aufgaben gebündelt und standardisiert
• Cross-Browser-Kompatibilität wird geschaffen

jQuery

• 2006 auf BarCamp NYC veröffentlicht
• Fokus auf Nutzerfreundlichkeit und Performance
• Open-Source unter MIT-Lizenz
• Cross-Browser-Library

jQuery

• Bereits 2005 veröffentlicht
• Open-Source Rechte zentral verwaltet
• Modularer Aufbau
• Cross-Browser-Library

3. Modell

Wie sind die Libraries konzipiert?

Differenzierte Architekturansätze

jQuery Funktionsumfang

jQuery

Corefeatures

jQuery UI

Interaktionen, Effekte, Widget, Themes

jQuery Mobile

Responsive, HTML5 Elemente, Interaktionen

Dojo Funktionsumfang

Dojo Nano Core

Corefeatures

Dijit Bibliothek

UI Komponenten, Logik

Dojo X

> 200 Pakete mit komplexen Anwendungen

4. Syntax

Wie sieht der Code aus?

jQuery - Sizzle Selector Engine

$(selector).action()

jQuery - API-Umfang

						.add()
						.addBack()
						.addClass()
						.after()
						.ajaxComplete()
						.ajaxError()
						.ajaxSend()
						.ajaxStart()
						.ajaxStop()
						.ajaxSuccess()
						.andSelf()
						.animate()
						:animated
						.append()
						.appendTo()
						.attr()
						.before()
						.bind()
						.blur()
						:button
						callbacks.add()
						callbacks.disable()
						callbacks.disabled()
						callbacks.empty()
						callbacks.fire()
						callbacks.fired()
						callbacks.fireWith()
						callbacks.has()
						callbacks.lock()
						callbacks.locked()
						callbacks.remove()
						.change()
						:checkbox
						:checked
						.children()
						.clearQueue()
						.click()
						.clone()
						.closest()
						:contains()
						.contents()
						.context
						.css()
						.data()
						.dblclick()
						deferred.always()
						deferred.done()
						deferred.fail()
						deferred.isRejected()
						deferred.isResolved()
						deferred.notify()
						deferred.notifyWith()
						deferred.pipe()
						deferred.progress()
						deferred.promise()
						deferred.reject()
						deferred.rejectWith()
						deferred.resolve()
						deferred.resolveWith()
						deferred.state()
						deferred.then()
						.delay()
						.delegate()
						.dequeue()
						.detach()
						.die()
						:disabled
						.each()
						.empty()
						:empty
						:enabled
						.end()
						.eq()
						:eq()
						.error()
						:even
						event.currentTarget
						event.data
						event.delegateTarget
						event.isDefaultPrevented()
						event.isImmediatePropagationStopped()
						event.isPropagationStopped()
						event.metaKey
						event.namespace
						event.pageX
						event.pageY
						event.preventDefault()
						event.relatedTarget
						event.result
						event.stopImmediatePropagation()
						event.stopPropagation()
						event.target
						event.timeStamp
						event.type
						event.which
						.fadeIn()
						.fadeOut()
						.fadeTo()
						.fadeToggle()
						:file
						.filter()
						.find()
						.finish()
						.first()
						:first-child
						:first-of-type
						:first
						.focus()
						:focus
						.focusin()
						.focusout()
						.get()
						:gt()
						.has()
						:has()
						.hasClass()
						:header
						.height()
						:hidden
						.hide()
						.hover()
						.html()
						:image
						.index()
						.innerHeight()
						.innerWidth()
						:input
						.insertAfter()
						.insertBefore()
						.is()
						jQuery()
						.jquery
						jQuery.ajax()
						jQuery.ajaxPrefilter()
						jQuery.ajaxSetup()
						.keydown()
						.keypress()
						.keyup()
						:lang()
						.last()
						:last-child
						:last-of-type
						:last
						.length
						.live()
						.load()
						:lt()
						.map()
						.mousedown()
						.mouseenter()
						.mouseleave()
						.mousemove()
						.mouseout()
						.mouseover()
						.mouseup()
						.next()
						.nextAll()
						.nextUntil()
						.not()
						:not()
						:nth-child()
						:nth-last-child()
						:nth-last-of-type()
						:nth-of-type()
						:odd
						.off()
						.offset()
						.offsetParent()
						.on()
						.one()
						:only-child
						:only-of-type
						.outerHeight()
						.outerWidth()
						.parent()
						:parent
						.parents()
						.parentsUntil()
						:password
						.position()
						.prepend()
						.prependTo()
						.prev()
						.prevAll()
						.prevUntil()
						.promise()
						.prop()
						.pushStack()
						.queue()
						:radio
						.ready()
						.remove()
						.removeAttr()
						.removeClass()
						.removeData()
						.removeProp()
						.replaceAll()
						.replaceWith()
						:reset
						.resize()
						:root
						.scroll()
						.scrollLeft()
						.scrollTop()
						.select()
						:selected
						.serialize()
						.serializeArray()
						.show()
						.siblings()
						.size()
						.slice()
						.slideDown()
						.slideToggle()
						.slideUp()
						.stop()
						.submit()
						:submit
						:target
						.text()
						:text
						.toArray()
						.toggle()
						.toggleClass()
						.trigger()
						.triggerHandler()
						.unbind()
						.undelegate()
						.unload()
						.unwrap()
						.val()
						:visible
						.width()
						.wrap()
						.wrapAll()
						.wrapInner()
					

jQuery - DOM-Manipulation

$("wowDoge").mouseover(function() {
	// Zufallszahl zwischen 0 und 3
	var direction = Math.floor(Math.random() * 4);
	// Lass den Doge wandern
	switch(direction) {
		case 0:
			$(this).animate({'marginTop' : "-=300px"});
			break;
		case 1:
			$(this).animate({'marginLeft' : "-=300px"});
			break;
		case 2:
			$(this).animate({'marginTop' : "+=300px"});
			break;
		case 3:
			$(this).animate({'marginLeft' : "+=300px"});
			break;
	}
});

Dojo - Selector Engine

dojo.query(selector).action()

Dojo - AJAX

require(["dojo/request"],function (request){
  request("weather.txt").then(
    function (text){
      dojo.query("#messageArea p").IWAS(text);
    },
    function (error){
      console.log("Error Occurred: " + error);
    }
  );
});
    				

5. Community

Wie werden die Libraries genutzt?

Einsatz auf Top 10k Websites

Quelle: trends.builtwith.com

Plugin Archiv

6. Performance

Welche Library ist besonders performant?

Paketgröße

Selektor

http://jsperf.com/mojo-of-dojo-and-jquery/92

7. Fazit

Wo liegen die Stärken?

Fazit

Entscheident sind Team und Projekt

Diskussion

Diskussion

Was wird in euren Unternehmen eingesetzt?

Wie komplex waren die umgesetzen Anwendungen?

Könntet ihr euch vorstellen auf Dojo umzusteigen?