jQueryGo With The Hype       And KillYour Project
Overview•   Building Rich Internet Applications•   ChoosingjQuery•   Making a mess of your project•   Questions
Rich Internet Applications•   1995 is history•   Customers want interactive, easy-to-use web applications•   HTML falls sh...
Rich Internet Applications• Gratuitousexample #1: data entry
Rich Internet Applications• Gratuitousexample #2: data manipulation
Rich Internet Applications• Gratuitousexample #3: data navigation
Technical InterludeThe theory is verysimple:   – HTML forstructure   – CSS fordesign   – JavaScriptforinteractivity
JavaScript :’-(• Itsucks:textMenu.getStyle = function(name){ 
if(document.getElementById) return document.getElementById(n...
JavaScript Frameworks                    Cappucino                   Dojo Toolkit                       Echo              ...
JavaScript FrameworksClick MUCH MUCH MORE to continue...                   Or just make a choice
jQuery•   Gooddocumentation – http://api.jquery.com•   Large community•   No-nonsense API•   Open-ended•   jQueryPlugins• ...
Oneminuteintroduction• jQueryworks on sets of DOM nodes:  $(“selectorpattern”)• This set (the “matched set”) canbetraverse...
Oneminuteintroduction• Easy eventhandling:  $(“a.do-not-click”).bind(“click”, function(e) {      alert(“I warnedyou...”); ...
ReminderThe theory is verysimple:   – HTML forstructure   – CSS fordesign   – JavaScriptforinteractivity
The twobasicproblems• HTML   – Usedforstructure   – Alsoused to do what CSS can’t do   – Alsoused to implement complex JS ...
The art of unmaintainable code
Somehorridexamples$(“span.button”).click(function() {document.location.href = http://www.important-page.com;  return false...
Somehorridexamples$(“div#outernavdiv a:not(span)”).css(“color”, “#ff77ff”);• Document structuredeterminesmatched set?• We’...
Somehorridexamples$(“span.blue-button”).click(function() {   $(this).append($(“<divclass=„omgbbq‟>clicked</div>”))        ...
Thinkbeforeyou program     This is notspecific to usingjQuery
Someniceexamples$(“input.datepicker”).datepicker({language: „nl‟,showYear: false});• Using a semanticclass to improve UX
Someniceexamples$(“table.tabular-data”).datatables();• Did I mentionsemantic classes?
Someniceexamples$(“input.auto-complete”).each(function() {  $(this).autocomplete({datasource: $(this).attr(“data-autocompl...
Someniceexamples$(“a.show-message”).click(function(evt) {evt.preventDefault();  var href = $(this).attr(“href”);  $.ajaxGe...
Wrapping up•   Nothing wrong withjQuery•   Separate styling classes frominteraction classes•   Usesemanticswherepossible• ...
More tips• Useplugins• Createplugins• LearnrealJavaScript   – Scoping and closures   – Prototyping and OOP   – Eventbubbli...
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
Upcoming SlideShare
Loading in …5
×

CT presentatie JQuery 7.12.11

280 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
280
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CT presentatie JQuery 7.12.11

  1. 1. jQueryGo With The Hype And KillYour Project
  2. 2. Overview• Building Rich Internet Applications• ChoosingjQuery• Making a mess of your project• Questions
  3. 3. Rich Internet Applications• 1995 is history• Customers want interactive, easy-to-use web applications• HTML falls short• HTML5 is not the answer
  4. 4. Rich Internet Applications• Gratuitousexample #1: data entry
  5. 5. Rich Internet Applications• Gratuitousexample #2: data manipulation
  6. 6. Rich Internet Applications• Gratuitousexample #3: data navigation
  7. 7. Technical InterludeThe theory is verysimple: – HTML forstructure – CSS fordesign – JavaScriptforinteractivity
  8. 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. 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. 10. JavaScript FrameworksClick MUCH MUCH MORE to continue... Or just make a choice
  11. 11. jQuery• Gooddocumentation – http://api.jquery.com• Large community• No-nonsense API• Open-ended• jQueryPlugins• jQuery UI• Sounds nice?
  12. 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. 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() { ... }); };
  14. 14. ReminderThe theory is verysimple: – HTML forstructure – CSS fordesign – JavaScriptforinteractivity
  15. 15. 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
  16. 16. The art of unmaintainable code
  17. 17. 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?
  18. 18. Somehorridexamples$(“div#outernavdiv a:not(span)”).css(“color”, “#ff77ff”);• Document structuredeterminesmatched set?• We’redoing CSS?
  19. 19. Somehorridexamples$(“span.blue-button”).click(function() { $(this).append($(“<divclass=„omgbbq‟>clicked</div>”)) .fade(“slow”);});• Non-semanticclassforselector?• Where is this HTML coming from?
  20. 20. Thinkbeforeyou program This is notspecific to usingjQuery
  21. 21. Someniceexamples$(“input.datepicker”).datepicker({language: „nl‟,showYear: false});• Using a semanticclass to improve UX
  22. 22. Someniceexamples$(“table.tabular-data”).datatables();• Did I mentionsemantic classes?
  23. 23. 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
  24. 24. 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
  25. 25. Wrapping up• Nothing wrong withjQuery• Separate styling classes frominteraction classes• Usesemanticswherepossible• Use templates
  26. 26. More tips• Useplugins• Createplugins• LearnrealJavaScript – Scoping and closures – Prototyping and OOP – Eventbubbling and propagation

×