jQuery Refactoring how we think about client-side scripting Andrew Roazen Cline Library Technology Services February 8, 2011

What is jQuery? A library providing a superset of JavaScript An extensible, pluggable platform A way of more intuitively programming the Web

Foundations of jQuery JavaScript (Brendan Eich, 1995) – Inspired by HyperCard’s interactivity and Java’s object-oriented features – Designed as “Java Lite” with a minimum of bloat and a shallow learning curve for Java/C programmers – Quickly cloned by MS: extended, embraced… but not extinguished

Foundations of jQuery Problems with JavaScript – Incompatibility: No vendor consensus on implementation of object/event referencing, object positioning or even event capturing – CSS still a draft concept – Target audience largely not Java/C programmers – Massive reinvention of wheel to perform simple tasks

Foundations of jQuery Cross-browser libraries (early 2000s) – Simple wrapper functions which replace incompatible native object referencing/event capturing functionality – The beginnings of effects libraries built on these wrapper functions (script.aculo.us, MooTools) – Libraries became larger and more complex but not proportionately mature – A tendency to focus on user experience rather than the broader underlying issue behind it: a low level language meant to solve a platform-specific task

Foundations of jQuery CSS behaviors (IE-only, early 2000s) – Introduced the ability to attach function-based behaviors to classes rather than named objects – Benefits of prototyping without the overhead – Not part of any recognized standard – No adoption outside IE

Enter jQuery jQuery (John Resig, 2006) – Inspired by: IE’s CSS behaviors CSS selector syntax XLST (Xpath) selector syntax

Enter jQuery jQuery (John Resig, 2006) – Selectors: object abstraction by Xpath-like queries describing/combining class, ID, tag, node relationship, attribute values, etc. – Code written as chainable methods applied to selector queries, making code compact and intent more concrete – Utility functions for the most common interactive content development tasks: Xpath-flavored DOM node traversal / manipulation Event handling, from simple capturing to complex delegation/queuing Form control /control status selectors Basic CSS effects/animation AJAX / JSON / XML.data() method for storing/querying arbitrary data structures in an element

Enter jQuery jQuery (John Resig, 2006) – Unobtrusive JavaScript: script never appears inside, separating content and controller – Nonbloated: Base library only 29K minified/gzipped, 207k uncompressed Extensive plugins libraries as simple or complex as your needs jQuery UI for the more sophisticated widgets / effects – MIT/GPL2 license Bundled into a growing number of sites and commercial/open source products CDN hosted by Google, Microsoft as well as jquery.com itself

Enter jQuery jQuery (John Resig, 2006) – Mature: consistently fine tuned for speed and stability (leveraging native platform strengths where possible) resisting explosive or trendy feature creep stewarded by a large enough user/developer base to make it unlikely to become abandonware – Aggressively cross-browser compatible, standards compliant and adaptive to trends in web technologies

Example JavaScript: function newswap (target) { for (var i in this) { myobj = document.getElementById(this[i]); if (i != 'swapit') {myobj.style.display = 'none';} } document.getElementById (this[target]).style.display = 'block'; } Array.prototype.swapit = newswap; jQuery: $("select.swaptext").change (function() { var annot =$(this).closest('form').find('.note'); $(annot).find('div').hide(); $('#'+$(annot).attr('id')+$(this).val()).show(); });