Boris Smus

interaction engineering

jQuery conference 2011

A few weekends ago I went to the jQuery Conference held at the MS campus in Mountain View. And I took notes!

Overall trends about the jQuery community:

  • People are writing more complex apps on top of jQuery and there is a widely understood need for MVC frameworks, such as Backbone.js, Knockout.js and JavaScript MVC.

  • Feature detection is important!

    • Polyfill - replicates standard feature with a compatible API
    • Shim - provides its own API for a future feature
  • Serious need for templating systems. Boris Moore showed a very performant demo of jQuery Templates. Many other templating systems exist as well, like one built into underscore.js and mustache.js.

  • Many new mobile performance tools: blaze.io -- a tool that gives a general overview of a site's performance, pcapperf -- a web performance analyzer that uses tcpdump output from mobile device activity, and jDrop -- a service that lets you capture large amounts of data on your mobile device and then analyze it on the desktop web browser.

  • People are rallying around JSHint, a fork of Crockford's JSLint project, but with more configurable JavaScript sanitation rules.

  • Haters gotta hate. Everybody seems to get a kick out of hating Douglas Crockford. Give the nice opinionated man a break and go write some JavaScript.

I went to a bunch of talks, and I took the most notes for during this talk:

State of jQuery

John Resig talked about a bunch of changes to the project structure, largely irrelevant to jQuery library consumers. He also covered some of many jQuery 1.6 improvements:

  • Rewrite of attr() and val(). For example, attr('val', false) removes the attribute
  • Separate prop() from attr(). Indeed!
  • $('input:focus') gets focused input box across platforms
  • Significant performance boosts:
    • attr() performance ~85% faster, val() ~150% faster, data() ~115% faster
  • Integration with requestAnimationFrame for animations
  • $.map(Object, function) now works (as it does for Arrays)

Pro tip: jQuery automatically parses serialized JSON if it's included as the value of a HTML5 data attribute. Example: <header data-array="[0,1,2]"> then $('header').data('array')[1] == 1

State of jQuery Mobile

Mobile matters. 5.3 billion mobile subscriptions (cf. global population of 6.8 billion), 10 billion web-enabled mobile devices.

John Resig also touched on jQuery Mobile, and then Scott Jehl and Todd Parker went into a lot more detail.

  • Navigation model now uses the history API for hash-less URLs.
  • jQM minified and packed is ~18kb!
  • Nice gallery of goodness at jQuery Mobile Gallery
  • Media queries
    • Useful as a browser support cutoff heuristic.
    • CSS classes added based on media queries, facilitating simpler styles
    • Uses Respond.js, a polyfill for browsers that don't support media queries
  • Philosophy: easily brandable cross-device experience
  • All builtin views are ARIA-enabled

Pro tip: mouse events in some mobile browsers are on a 300ms delay to allow the browser to interpret user's gestures. jQuery Mobile includes a fix for this!

Prototyping Tools in jQuery

Super useful and informative set of tools!

MockJAX is a library that simulates a server.

  • Intercepts and simulates AJAX calls
    • Define a URL structure and a response structure
  • Can define responses as a function.
  • Can simulate error responses.
  • Useful for unit testing as well!

MockJSON: create fake JSON on demand

  • A way to generate random-ish JSON
  • For example, {'age|0-99'} outputs {'age': randint_between_0_and_99}

Amplify: abstraction layer for all data

  • Abstracts away shifting server-side APIs
  • amplify.request.define can define a data store.

For example:

amplify.request.define("list", "ajax", {
  url: "/todo/",
  dataType: "json",
  type: "GET"
});