Sessions at jQuery Conference: SF 2011 on Saturday 16th April

The state of the jQuery project in 2011. Covers details regarding jQuery core, jQuery mobile, and the project as a whole.

jQuery Mobile Team Design and Dev leads Todd Parker and Scott Jehl will discuss the challenges and philosophy of the jQuery Mobile Framework, and how to use it to create websites and apps that provide a cohesive, touch-optimized experience in the latest mobile browsers while maintaining universal accessibility in older and under-featured browsers, and for users of assistive technology. Todd and Scott will also bring us up to speed with recent developments in the jQuery Mobile framework and its roadmap for future releases and features.

The combination of CSS and jQuery allows for powerful DOM selection and traversal. By employing sizzlin' CSS selectors, and adding some more, jQuery allows us to target elements in a document based not only on parent, child, and sibling relationships, but on attributes, values, states, and relations the target elements do or do not have. You don't even need to have access to the site's HTML because there is no need to add classes and id's. When you know and understand the power of selectors, you can pinpoint any element on the page. Bonus is, this helps you with both jQuery and CSS. In this workshop we'll cover all the selectors, basic to advanced with emphasis on the advanced, including selectors unique to jQuery and those new to CSS3. It's double-duty: one workshop, two skillz..

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level themeable widgets. We'll discuss basic usage of these effects, interactions, and widgets and get a feel for the similarities across the API. We'll touch on what makes the API pattern powerful and how you can use it to create and test your own abstractions using the UI widget factory.

Before Firebug existed it was hard to know what the browser was doing with your web page. Firebug (and more recent tools like dynaTrace Ajax Edition, Speed Tracer, Web Inspector, and HttpWatch) let us see how HTTP, JavaScript, CSS, the DOM, and rendering take up time as the user waits for the page to load. This visibility into browser performance has generated many web performance best practices as captured in tools like YSlow and Page Speed. The performance evolution that took place on the desktop (tools and research resulting in best practices) is starting in mobile. Right now we’re at step 1: gaining visibility into what’s happening in the mobile browser. Without this visibility, mobile web developers are flying blind. In this session Steve Souders shows how to analyze mobile performance across all the popular devices. He demonstrates analysis tools, services for accessing devices remotely, and quirks he’s discovered that show mobile performance is full of surprises.

This talk would be a hands on introduction to jQuery Mobile. I'd discuss how to begin working with the framework, it's way of doing things, and how to build common UI items.

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.

(Or How I became Crockford's Sworn Enemy)

JavaScript is a very powerful and flexible language that allows you to write very elegant programs. However, it has some parts of it that are easily breakable and no matter what you are writing, new jQuery plugin or nice interface for your web application, it is very important to not to ship broken code. Fortunately, there are tools that were designed to catch potential problems in your code and report about them before the deployment of your code.

This talk is about integrating such tools into your daily development workflow. It will give you basic idea of problems that JavaScript has and approaches you can take to prevent those problems. It will also cover JSHint — a community-driven code quality tool — and how we use it at Disqus to make sure that we don't ship broken code to 400m+ visitors.

Come celebrate the official release of the jQuery.Popcorn plugin! Learn how to create interactive, immersive HTML5 Video experiences by bringing the power of Popcorn.js and Popcorn Plugins to your jQuery applications. Popcorn.js, developed by Rick Waldron of Bocoup on behalf of the Mozilla Foundation, is a JavaScript platform for delivering content synchronized to the playback of HTML5 Video. http://popcornjs.org/

Aloha editor was created on January 18th 2010, with the goal to revolutionize the WYSIWYG editor industry. We’ve built a strong community and have reached great success. Being the only true HTML5 ContentEditable solution allowing us to provide inline editing has put us far ahead the competition. Though adoption has been slow. The marriage with ExtJS is the main criticism fueling the slow adoption.

In February we held our Aloha Editor DevCon in Vienna and were blessed with the opportunity to work with Richard D. Worth, Scott Gonzalez and Jörn Zaefferer from the jQuery UI team. The Aloha Editor spirit is all about making the web exciting and having fun doing it. Through intense discussions and over several days we were persuaded enough to make the move to jQuery UI.

Development is now underway and this talk will cover the switch to jQuery UI, the affairs, the ups and downs, the heartbreaks and how it all happened. We’ll cover the essential networking and recruiting of the right people, the abstraction of the UI framework, and working with jQuery UI to create widgets. It’s more than just two frameworks working together intimately, it’s a love affair fueled with passion.

So to learn the why, the how, the what, and the what ifs of one of the biggest intimate encounters of frameworks in the wysiwyg world, then this is the talk.

"How do I build larger applications using jQuery?" It's a question that starts to creep into the minds of virtually every jQuery developer after building one or two non-trivial web applications. There are many good answers to this question, and even some talks at this conference that describe ways to use code organization and other techniques to help scale applications.

Perhaps he most important structural issue--one that virtually every one of these solutions tackles in one way or another--is the fact that many jQuery applications use the DOM to store facts instead of simply visual display. This means that changing visual display often has all sorts of implicit dependencies on other parts of the page, and not clean structural way to describe these dependencies.

In this talk, Yehuda will talk about how this problem manifests itself in real applications, and what techniques you can use to mitigate the problem. He learned many of these techniques by working on SproutCore, so he will use SproutCore's system as a reference where appropriate.

About four nested callback functions later, you realize that something needs to change. You wanted this site's code to be organized, maintainable, testable and DRY right? Wouldn't it be nice if your callbacks could run when any function was complete, even asynchronous ones? And how about if you could chain that callback, for example, to the $.ajax() call you just made? Or build your own and decide when to fire any bound callbacks? Meet $.Deferred, the feature that satisfies all of these needs. Think of it like callbacks on steroids. Plus, it's already used by $.ajax() for asynchronous awesomeness. We'll cover the basics of creating and using Deferreds and bring those principles into application architecture. You'll learn great ways to integrate Deferreds into your site's code and reap some sweet benefits. In short, you'll learn how to separate components of your application amongst synchronous and asynchronous behaviors. Saving time and reducing headaches: included.

The front-end and back-end of your application inevitably progress at different speeds. In order for each layer to develop independently it is optimal if the front-end piece can work regardless of the back-end, which is where the Mockjax plugin comes in. Mockjax can intercept and simulate ajax requests made with jQuery with minimal effort and impact to your code. Another tool that works well with Mockjax is mockJSON which provides a random data templating feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you.

As you are developing, Mockjax can also be used to help Unit Test your front-end code. You can setup a static mock responses to your requests and then Unit Test your Ajax success and fail event handlers.