My Little Black Book

Presenter: John Resig
Twitter: @jeresig
Site: ejohn.org
Lead Developer and creator of jQuery, and a JavaScript Evangelist at Mozilla

photo credit: drewm

Second day of workshops at Webstock 2010 was first time i had a look at jQuery, i have had a play with script.aculo.us and mootools in the past, so jumped at the thought of a workshop with a creator of such a frame work, as they make JavaScript sooo much more bearable, especially for someone with a Java background.

My respect only grew for John as he did a 3 hr live demo of jQuery  and jQuery UI, with only one minor hiccup which he fixed within minutes….. a true JavaScript ninja.

In essence jQuery it looked as simple as this:

• Find object
• Do something with the set

Couple of bits that got me interested:

• Lots of people agree jQuery is awesome, its used by Microsoft, Google, Mozilla, IBM, Amazon, HP, Intel, Ruby on Rails, WordPress, Django
• Selectors uses CSS like syntax
• Good looking, easy to read documentation that has recently been reviewed
• Fails gracefully, if you layer jQuery over and already functioning website
• Big community and plugins(use with care)

My rough notes on the presentation on the points that stood out to me, for the full presentation see the link at the bottom of the page.

Finding things

• CSS Selectors with some special selectors like :first :hidden etc
• jQuery Methods
• Both are methods used for traversing the DOM
• Can be chained together 
  

  $("div").hide().css("color","blue");

• Chained Traversal ( pretty cool )

  $("button")
    .parent().css("border", "3px solid red")
    .siblings().css("border", "3px solid green");

Doing Things

• Manipulation
• Event handling(normally user actions)
• Live Events for current and future elements(ajax)
• Effects .animate ( pretty nice )
• Helpers to load xml,  json or html with ajax

Plugins

• Strong Community
• Recomended ones were
  • jQuery UI
  • Validation
  • Ajax Form
  • jqGrid
  • jQuery Tools
• Themeroller – mechanism to style jQuery UI

Tips

• Write in HTML first then layer jQuery over the top
• Apply your jQuery to a fully functional site, this way if JavaScript fails your site is still fully functional
• “return false” Disables the default old behavior
• With server-side code, add conditional to check it the “ajax” header is present, if so strip off header and footer code and only display id=content, to reduce server traffic
• Look at using jquery off CDN minimised and gziped optimized – on Google’s CDN, if its good enough

As a round up I would definitely consider using jQuery on my next project, as with all frameworks im sure there will be some limitations as this kind of ease of use doesn’t come without trade-offs.

The full presentation can be found here http://ejohn.org/apps/workshop/intro/