jQuery Boston 2011

Table of Contents

Overview

Slides

Consolidated set of slides available from

http://t.co/NX9MdTKY

Slides should also be linked from the main session page:

http://t.co/NZUkpR1j

Summaries

Recommendations

$.Deferred

Templates and data binding

Saturday Sessions

jQuery Keynote, John Resig

jQuery 1.7

  • Beta 1 is out
  • Now support HTML5 elements in MSIE6
  • Event Property Hooks
  • .on() and .off() mirror .live() and .delegate()
  • Better support for IE form event bubbling

Project

jQuery is a bit different from other projects in that the non-technical aspects are considered core. One of the key elements is the full process for how people interact with the library:

  • first day
  • month
  • year

Don't let the user give up at any stage of the process and go elsewhere.

Make sure that the community is healthy: questions are answered independent of the medium.

Make sure that the API documentation is current and correct.

Process

Use an open process for communicating changes associated with core, UI, and mobile.

http://jquery.org/updates/

http://docs.jquery.com/Getting_Involved

Features

Plugin system is core. Can't keep growing the library forever.

There is a new plugins site.

Questions

.data(events)

Show the events for an object.

Need to hide internal API.

No sense of the number of sites using particular versions.

Module loading in 1.7.

Uses dynaTrace for the profiling. Optimize to IE first. Performance is tricky since it's browser specific and changes radically with new releases. At the end of the day just do the analysis of the code you have.

MSIE6 support will likely not go away since jQuery needs to support 7 and 8 for the core DOM and event handling. This is in contrast to the support for mobile and UI.

Metro platform from Microsoft suggests the relationship will only be deeper moving forward.

jQuery Mobile Keynote, Todd Parker and Scott Jehl

Mobile web is massive

35 billion devices. The problem isn't limited to just iPhones.

As of July 2011 the core browsers are Opera and Nokia.

Don't leave people out so make sure that the content is accessible even if the rendering is different.

CDN

jquery.mobile.min.js: 10 - 25kb

Navigation

Navigation model, pushState. The hashbang approach has now led to full history control.

Navigation model

Listens at the top of the page with events then loads in content via AJAX, animates to the change, then removes the previous DOM node.

replaceState: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Natural use of the hash for local, in-page, navigation is preserved.

Forms

Forms are Hijax'd to allow for pushState.

Hashed anchors

These are preserved.

Theming

"Don't make your site look like the docs."

data-rel: dialog

This supports hardware-only closing to move back.

API

$.mobile.changePage

This works for window.history.back().

This can also work with an optional secondary parameter to have the configuration of the parameters to GET to a page.

data-prefetch
Events

Has support for virtualized events: bind('vclick', function() {…}).

Roadmap and Features

Attributes and Properties in jQuery, Timmy Willison (@timmywil)

jQuery 1.6 came with a rewrite of the .attr() method and the introduction of the .prop() method. This came with a significant performance benefit and changed the way attributes and properties are treated internally in jQuery. Most of all, it gives the user a chance to finally differentiate between the two. In my talk, I plan to expound on the difference between attributes and properties and the advantages of working with both. I'll focus mainly on a discussion of HTML vs the DOM and how interacting with one can be more beneficial than another in certain use cases.

Changes in 1.6

  • rewrite of .attr()
  • performance improvements

Would initially look for the property then would fall back to the

Example: all of the form names

{code} <form action="/act"> <input name="action"/> </form> {code}

Anti-patterns

The following are cases that

{code} $(window).attr() / only has properties / TODO: {code}

Dealing with checked and value with .attr() vs. .prop()

When the page loads the attribute is set but the property is live on the object.

{code} input = document.querySelector('input') input.checked = false input.getAttribute // Returns true based on load {code}

This also extends the case for .getAttribute('value') where there's also .val() .

Use cases

Could check cases where there is a drift in values. See for example the vlaue for tabIndex.

Summary

There are a small number of problem attributes + properties.

Example: img src the property and attribute stay up to date.

Example: checked values

Example: class vs. className

Example: element creation uses attr()

Questions

A: window.location because it's very existential.

RT @bmcmurray: at #jqcon, "What's your favorite property?" @timmywil: "window.location because it's very existential."

Node.js for frontend developers, Garann Means

Do you write JavaScript? Congratulations, you're probably awesome at Node.js! While thinking about things from a server-side perspective might feel off-putting and unnatural, things like callbacks, storing data in JSON, and implementing actual websites probably do not. We'll go beyond getting Node installed and talk about how to quickly build a working web application, and demonstrate that Node can offer frontend developers more than just a new prototyping tool or way of creating endless chat servers.

Slides

@garannm: If you made it to my #jqcon talk (or didn't) and wanna see the slides and get the links, they're up now: http://t.co/FSOzQdMo

From callbacks to $.Deferred to $.Callbacks, Julian Aubourg (@jaubourg)

If you're into asynchronous programming, you'll love jQuery 1.7! Not only do Deferreds gets progress callbacks, but you also get a brand new constructor, $.Callbacks, that covers pretty much any need you may have when it comes to listing and firing callbacks in your application. Sounds too good to be true? Yet another thingy that's impossible to grasp? Fear not: Julian will walk you through it and make you the first persons in the world to know about $.Callbacks in and out!

1.5: done() and when()

Look at the success attribute of the configuration then make subsidiary requests.

1.6 pipe() (and 1.7)

Just pass the data aroudn.

$.ajax({}).pipe()

{code} // Two callback buckets: resolve and fail var defer = $.Deferred(); deferred.pipe( function() { defer.resolve('resolved') }); defer.resolve('foo'); {code}

1.7 progress(cb) (with notify()

Once the defer is resolved notify() can't update the progress.

.when() handles mutiple progress

Useful if you have multiple progressions you need to track.

defer.isProgressing()

Simply check if the state.

$.Callbacks

This is the building block for $.Deferred (resolve, rejqect, and notify).

{code} var cbs = $.Callbacks(""); cbs.add() cbs.remove() {code}

Parameter: "memory"
Parameter: "once"
Parameter: "stopOnFalse"

Avoiding abstraction

A defer is a callback intended to be called with memory but only once.

Extending Your jQuery Application with AmplifyJS, Elijah Manor

As your front-end application grows it is important to abstract pieces of your implementation to make it easier to extend and less painful to maintain.

AmplifyJS is a JavaScript library that was developed to assist with a common set of problems in front-end development. The three components consist of a publish and subscribe messaging system, a persistent storage component that abstracts various cross-browser concerns, and a request piece that sets out to make data retrieval more maintainable.

This talk will start with a sample application that is brittle and tightly coupled and we will slowly enhance the application by the three AmplifyJS components. In the end we will have an application that is testable, flexible, and loosely coupled.

Notes

"Amplify looks really handy. Gets from any source u want. Elijah did good! #jqcon"

Breakout: phantomjs

@treasonx rocked his phantom.js breakout. love the pacman logo. #wakkawakka #jqcon

JavaScript testing in JavaScript, John Bender

In spite of the fact that projects like jQuery set a good example with strong test suites and tooling, an enormous amount of Javascript is either untested (see Most Popular jQuery Plugin list ) or tested using browser automation. The former results in ritual frustration for developers gluing applications together, and the latter a slow and brittle method for software verification.

In this talk John will cover some simple reasons for testing all your Javascript, even the simplest of plugins, in Javascript and address possible cultural reasons for the lack of said testing. He'll then examine some strategies to move more of your testing into the language itself, and finally cover some of the pitfalls you'll encounter when you do.

Scripts are becoming applications

Wide variety of tools

Jasmine, qunit.

JSTestDriver.

CI is still difficult

Jenkins still can't pull back the results.

Manually maintaining all browser state is painful

Decide the type of testing you're applying: Unit or UAT

Prefer events to setTimeout

Chrome, Paul Irish

$0 allows you to refer to the highlighted element in the DOM inspector

Revision history of your CSS changes

dir(), inspect(), copy()

Pretty Printing minified code

Plugin Authoring Best Practices, Ben Alman

jQuery plugins are everywhere, and the chance that YOU will write one—if you haven't already—are pretty high. It might start with a little bit of functionality that you want to reuse or share with someone else, but before you know it… you've released dozens of jQuery plugins and you're writing articles and giving presentations on jQuery Plugin Authoring Best Practices at conferences…. Ok, maybe that's just me.

Regardless, there are many techniques you should know for writing your own reusable jQuery code, or "jQuery plugin," in a way that makes it feel like a natural extension of jQuery.

In this talk, you'll learn how to create custom selectors, chainable methods that double as getters and setters, and traversal or filtering methods that are .end()-able. You'll learn how to organize your code in IIFEs and namespaces, extend option defaults, and even create a custom package.json for your plugin, so that it can be submitted to the upcoming jQuery plugins index.

Ensuring chainability of modules

Ensuring endability

Working with noConflict

Alman uses non-standard "IFE" (immediate function execution) (sp) rather than SEAF (self-executing anonymous functions).

Ensure global execution context isn't polluted:

{code} (function() { }()) {code}

When writing modules this is $ object

Always return this

html() in 1.4 can consume a function parameter to return currenthtml

Example: A yell plugin that adds '!!!' to all matching notes.

{code}

$.fn.yell = function() { $(this).html(function() { return currenthtml + '!!!'}); return this; {code}

Use null + undefined check as only valid use case for == null

Provide getters and setters

{code} $.fn.href = function(href) { / getter if (href == null) { return this.value… } else { / update the hrefs } } {code}

Creating endable methods

Problem: end() only reverts one step in a traversal

See the example from the slides but it has pushStack() as the supported method.

If using map() the return needs to have content()

Cannot use submethods on collection plugins

this becomes a function rather than the collection.

Example: $.fn.myplugin vs. $.fn.myplugin.mysub

The recommendation is to camelcase to something like myPluginMySub.

$.expr[":"]

Custom selectors.

Consume options object then $.extend

$.fn.myPlugin.defaults

Simplifies the use of the default globally.

Compare the $.ajax.settings object.

Use exports rather than $

Create a standard global exports that should work without $.

Create a package.json to have it included in a future widgets store

JsViews: Next generation jQuery Templates and Data Link, Boris Moore

Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.

jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.

JsRender

JsRender supersedes old jQuery Templates project. No DOM dependence, also no jQuery dependence.

This is just static rendering of HTML against data.

Highly performant: doT vs. JsRender, vs. jQuery Template

Core new design features: syntax, nested views, data linking

Using the mustache template format

This is a general expression-free approach.

$.render(myTemplate, myData);

JsViews

Some general features that are worth considering:

  • incremental rendering: will only modify
  • SEO support on server with

.link()

Live binding of data doesn't require pushing the .html() push first.

.observable()

Listen occurs against the underlying linked data.

Nested templates

Remote debugging with jQuery Mobile, Mike Taylor

With at least 37 A-grade supported environments, debugging your jQuery Mobile application is no easy task. Having been spoiled by Firebug and the developer tools that have followed in its footsteps on desktop browsers, it isn't exactly obvious how to go about this for the Mobile web (e.g., just try to view the rendered source of any page in most mobile browsers). In this talk we'll cover how to cover your bases both in terms of emulators (Android, Blackberry, iOS, Opera Mobile), remote debugging and inspection (Mobile Webkit, Opera Mobile and Mini), and finally online webapps such as Tutti or JSConsole.

History

alert() > Venkman > Firebug

MediaTemple Party

School buses for 300.

Space … 281 Summer Street

Sunday Sessions

jQuery UI Keynote, Richard D. Worth

jQuery Mobile & jQuery UI will eventually merge

Documentation improvements

New mask & timepicker

Process and bug fixing

Breaking Changes + Happy Users = Mythical Software?, Scott González

In this talk, we'll see how jQuery UI is dealing with this problem as the API is being redesigned for all existing components. We'll discuss how jQuery UI is implementing the changes and how the upgrade process won't force users to undergo a massive all-or-nothing upgrade, allowing them to start using new components immediately while easing into the new APIs.

General notes on options

Tracking breaking changes

Remove options since they create bloat

jQuery, You & I: Lookin' Good Together, Rick Waldron and Adam Sontag

jQuery is a completely community-driven project, and we're constantly on the lookout for talented and motivated people to help us push forward. In this talk, we'll go over the many facets of the project where you can find a niche and make a meaningful contribution to the ecosystem. We'll also discuss how writing clean, consistent and readable code is fundamental to promoting collaboration, contribution and distributed development, and explain how the team uses the jQuery Core Style Guide to write code that looks like it was written by a single developer.

Whether you're passionate about servers, design, documentation, testing, helping others, or just writing JavaScript, we're sure to have something for you!

Event Improvements in jQuery 1.7, Dave Methvin

jQuery 1.7 has several improvements to both the event API and plumbing. Highlights include:

A new jQuery.fn.on() method that unifies direct and delegated event handling Special event handlers can process trigger data and detect delegated events Improved performance for delegated events The normal quota of IE 6/7/8 bug fixes

Contextual jQuery in Practice, Doug Neiner

CouchApps with CouchDB & jQuery, Bradley Holt

Scaling Performance of Large Applications, Even On Mobile Devices, Gregory Moeck

CoffeeScript and You - Become a better JavaScript Developer, Mark Bates

Achieving harmony with third-party JavaScript, Anton Kovalyov

Speeding Up the Future: How jQuery Can Help, Yehuda Katz

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7