Earlier this month, Associate Software Engineer Mike Behnke and I attended the 2011 jQuery conference in Boston. We joined 600 other jQuery/JavaScript enthusiasts for the largest jQuery conference to date. It was a great weekend filled with all things jQuery, meeting members of their team, and generally mingling with other software engineers who share a passion for front-end development.
The prevalent themes throughout most of the sessions were website optimization and mobile development. The two themes complemented each other, with elements of each overlapping from session to session. The importance of optimizing code, regardless of platform, was emphasized, along with examples of some specific ways to do that.
Some of the bullet points from the first keynote of the conference, given by jQuery creator John Resig, include:
- jQuery is used on more major websites than Flash – 52% vs. 48%.
- There is a new plugins site planned, which should enable faster development and better plugin discoverability.
- There are no major or breaking changes planned for jQuery, even as it approaches the 2.0 milestone.
The second keynote focused on jQuery UI, and was given by Richard D. Worth. The major milestones mentioned were:
- A new themeroller with Kuler integration for jQuery Mobile was announced, along with a download builder. Both are “coming soon,” but no specific date was announced.
- The goal of the jQuery mobile and UI teams is to eventually merge into one product that can be used for both mobile and desktop work.
Now, onto the sessions we found particularly noteworthy:
jQuery, You & I: Lookin’ Good Together (slides)
Getting involved with jQuery was encouraged, with an entertaining look at this from Adam Sontag and Rick Waldron. Beyond just writing code and fixing bugs, they mentioned a need for people to help with bug triaging, website design and writing documentation.
Another important takeaway from this session–one that we’re hoping to implement more fully at Enlighten (now Perficient Digital)–is the use of coding style guides. It doesn’t matter if your organization prefers single or double quotes, tabs or spaces, curly braces or line breaks, basically it boils down to “Consistency Rules.” In addition to being consistent, comment liberally, use spaces and lines breaks, and be as verbose as you need to be when coding – that is what file minifiers are for.
For a great example of a real-life coding style guide, check out the jQuery Style Guide.
Scaling Performance of Large Applications, Even on Mobile Device
This session given by Gregory Moeck devoted to application optimization was excellent. Some helpful take-aways include:
- Start by using best practices:
- Minify files, combine files into one, cache when you can, and optimize images
- Remove code you’re not using
- Minimize / simplify page redrawing
- Minimize / simplify elements in the DOM
- Minimize DOM updates
- Implement incremental rendering (render only those items shown on screen)
- Always put your application in front of non-developers when testing
If you’re using AJAX:
- Minimize calls
- Minimize the amount of data returned
- Retrieve only the information you need
Contextual jQuery in Practice (slides)
Doug Neiner gave an excellent presentation about Contextual jQuery, discussing things like:
- Minimizing event attachment on document ready
- Context-centrix DOM traversing and filtering
- Using delegated events
- Detecting probable user behavior
- “Just-in-time” code initialization based on user actions
Chrome Dev Tools (slides)
Paul Irish gave an impromptu talk on using the Chrome developer tools, and demonstrated some tips and tricks to help decrease front-end development time (some of which apply to Firebug as well). These include:
- View your CSS and JavaScript file version history (Chrome only)
- De-minify your JavaScript files (Chrome only)
- Use the developer tools to check your application’s performance and memory usage
- Access your psuedo-class styles
- Set breakpoints directly in the console like “Break on DOM Node modification”
Extending Your jQuery Application with AmplifyJS (slides)
This talk given by Elijah Manor covered the new and exciting plugin AmplifyJS. It has a number of excellent features (that we are looking forward to trying) such as:
- Publish / subscribe
- Cross-browser compatible local storage
- AJAX request tools (which includes the ability to mock-up a webservice)
jQuery Plug-In Authoring (presentation)
Ben Alman gave a handy talk on jQuery Plug-In Authoring, giving some background on IIFE (Immediately Invoked Function Expressions, also known as self-executing anonymous function), the core pattern for most jQuery plugins. He also dove into:
- How to make sure your plugins work as users expect
- How the plugin should iterate over elements
- How to create chainable and .end()-able plugins
- How to set default options
- What you shouldn’t make into a jQuery plugin
A writeup of the jQuery conference this year wouldn’t be complete without a mention of the Dramatic Bug Readings. It was a fun way to unwind and have some laughs towards the end of the weekend and it sounds like it may become a tradition at future events.
The slides for many of the sessions are now online. Go check ‘em out!
