The Power Vested in JQuery

Facilitated by the Radical Designs Team and Jim Craner, Chicago Technology Cooperative

JQuery is all the Javascript you'll ever need. This powerful open source library can be used to integrate different web platforms into a seamless user experience, and is a de facto Flash replacement for many situations. It offers cross-browser magic, search engine optimization, interaction libraries, dynamic effects, simple UI candy. It enables developers to treat CSS classes in genuine class architecture, effectively turning CSS into an object-oriented language. The facilitation team will elaborate on all of the above, demo some examples, and invite questions and curiosities.

jQuery Notes

• jQuery overview
  • change the document object model
  • Events handler
  • AJAX - remote calls without refreshing the page
  • The fundamental concept
    • Use the bling operator ($), then you select things using css selectors
      • it is just a alias to the jquery() function
    • If you understand css, the dom, or html, you can start right away
• Why jQuery is out ahead of the pack
  • It's a later language
  • First came Prototype, then came Mootools
  • jQuery saw everything that everyone was doing, then rewrote it to do everything but in a better way
  • It's very very clean
  • Developer experience
  • The barrier to entry is very low to people who know CSS
  • It was the first one to push CSS as the core
  • It implements the CSS3 spec
• Basic DOM manipulation
  • Say you want to have one item in a list be styled differently but don't have control of the code
    • $('.list_item:odd').css('background', 'red');
  • The dot operator is chain operator
• Cool stuff
  • Native iteration
• Accessibility
  • In general DOM manipulation does not go well with JS
  • Graceful degredation or Progressive enhancement
    • In your basic HTML framework (pre-javascript), you need everything that people need to get around your site
    • You should attach cool stuff to what you already have, not add what you need
    • Orca is an open source screen reader
    • Lynx is a text-based browser to help check your site
• AJAX
  • $.ajax() command which you can send all sorts of stuff to do, and functions to run
  • $.load() is super simple way
  • As a stylistic decision, I generally have AJAX pass back formatted html, but you can have it send back whatever you want
  • Asynchronous
    • Duck Duck Goose
      • The Goose is like a JSON call, but you can keep going around say duck
    • You have to wait until the response comes back until you can do something with the response (obviously)
  • You can find out how long something on the server is going to take
    • The server know and can tell you how it's going
  • You can make multiple AJAX calls
• Anonymous functions
  • I like them cuz their cool
  • It's also idiomatic in jQuery
• Performance
  • There is a memory limit. The browser just has to deal with it and some browsers do it better than others
  • Everything you're doing with javascript is in the RAM
  • Class-based selection is just slow
  • You can scope any thing in jQuery
    • var foo = #('#content); $('.class', foo);
  • Chrome is a big deal for performance because it's pushing everyone forward
  • Internet explorer is not moving forward
• Use cases
  • Client that wanted rounded corners
    • Just use a plugin
    • $('.selector').corner();
  • Form that would give you a thumbnail
    • Thickbox plugin
  • How to build an effect that doesn't exist already
    • Good plugin architecture
    • jQuery UI has a good animation function that can be extended
  • When you're working in a harsh environment with no control or access to a system
• jQuery model has been used for other languages because it's so good
  • hpricot for Ruby