1. jQuery
Go With The Hype
And
KillYour Project

2. Overview
• Building Rich Internet Applications
• ChoosingjQuery
• Making a mess of your project
• Questions

3. Rich Internet Applications
• 1995 is history
• Customers want interactive, easy-to-use web applications
• HTML falls short
• HTML5 is not the answer

4. Rich Internet Applications
• Gratuitousexample #1: data entry

5. Rich Internet Applications
• Gratuitousexample #2: data manipulation

6. Rich Internet Applications
• Gratuitousexample #3: data navigation

7. Technical Interlude
The theory is verysimple:
– HTML forstructure
– CSS fordesign
– JavaScriptforinteractivity

8. JavaScript :’-(
• Itsucks:
textMenu.getStyle = function(name){ if(document.getElementById) return document.getElementById(name).style;
elseif(document.all) return document.all[name].style; }
• Use a Framework!

9. JavaScript Frameworks
Cappucino
Dojo Toolkit
Echo
Ext
Foobar.js
FUEL
Glow
Google Closure Library
Joose
jQuery
Jwee Javascript Toolkit
MS AJAX Library
Midori
Mochikit
Mootools
Prototype
Script.aculo.us
SmartClient
Spark
YUI

10. JavaScript Frameworks
Click MUCH MUCH MORE to continue...
Or just make a choice

11. jQuery
• Gooddocumentation – http://api.jquery.com
• Large community
• No-nonsense API
• Open-ended
• jQueryPlugins
• jQuery UI
• Sounds nice?

12. Oneminuteintroduction
• jQueryworks on sets of DOM nodes:
$(“selectorpattern”)
• This set (the “matched set”) canbetraversed:
$(“input[type=„submit‟]”).closest(“form”);
• The contents canbemanipulated:
$(“div.notification”).fadeOut(“slow”);

13. Oneminuteintroduction
• Easy eventhandling:
$(“a.do-not-click”).bind(“click”, function(e) {
alert(“I warnedyou...”);
e.preventDefault();
});
• Easy to extend:
$.fn.coolNewFunction = function() {
$(this).bind(“hover”, function() {
...
});
};

15. Reminder
The theory is verysimple:
– HTML forstructure
– CSS fordesign
– JavaScriptforinteractivity

16. The twobasicproblems
• HTML
– Usedforstructure
– Alsoused to do what CSS can’t do
– Alsoused to implement complex JS widgets
• Classes and IDs
– Usedfor CSS
– Usedfor JS Selectors

17. The art of unmaintainable code

18. Somehorridexamples
$(“span.button”).click(function() {
document.location.href = http://www.important-page.com;
return false;
});
• I should click on a span?
• Important information is onlydisclosedthroughJavaScript?

19. Somehorridexamples
$(“div#outernavdiv a:not(span)”).css(“color”, “#ff77ff”);
• Document structuredeterminesmatched set?
• We’redoing CSS?

20. Somehorridexamples
$(“span.blue-button”).click(function() {
$(this).append($(“<divclass=„omgbbq‟>clicked</div>”))
.fade(“slow”);
});
• Non-semanticclassforselector?
• Where is this HTML coming from?

21. Thinkbeforeyou program
This is notspecific to usingjQuery

22. Someniceexamples
$(“input.datepicker”).datepicker({
language: „nl‟,
showYear: false
});
• Using a semanticclass to improve UX

23. Someniceexamples
$(“table.tabular-data”).datatables();
• Did I mentionsemantic classes?

24. Someniceexamples
$(“input.auto-complete”).each(function() {
$(this).autocomplete({
datasource: $(this).attr(“data-autocomplete-options”)
});
})
• I lovesemantic classes
• Onceagain: progressiveenhancement
• Using HTML(5) customattributes to fine-tunebehavior

25. Someniceexamples
$(“a.show-message”).click(function(evt) {
evt.preventDefault();
var href = $(this).attr(“href”);
$.ajaxGet(href, {
success: function(msg) {
$.template(“show-message”).tmpl(msg).dialog();
}
});
})
• Progressiveenhancement
• Usessemantic data whereavailable
• HTML from external template

26. Wrapping up
• Nothing wrong withjQuery
• Separate styling classes frominteraction classes
• Usesemanticswherepossible
• Use templates

27. More tips
• Useplugins
• Createplugins
• LearnrealJavaScript
– Scoping and closures
– Prototyping and OOP
– Eventbubbling and propagation