Video of My jQuery San Diego 2014 Conference Talk

The great team behind the jQuery San Diego 2014 conference has posted videos from the conference. You can see the video of my talk — Promises, Promises: Unlocking the Power of jQuery's Deferreds — up on YouTube!

Review: Learning jQuery Deferreds

I've been lucky to have been asked to speak twice about promises and deferreds in jQuery at two conferences in the past year (NCDevCon and jQuery San Diego). Just before I was to give my talk at jQuery San Diego, the authors of Learning jQuery Deferreds, Terry Jones and Nicholas Tollervey, got in touch with me to see if I'd like a copy of their book. The book had been published just before the conference, so the timing was great.

Don't let the smallish number of pages fool you: the book is a powerhouse at getting to the heart of using promises and deferreds in all of your JavaScript (and jQuery in particular) work.

The authors start off with a fairly quick look at what a promise is and what a deferred is, and then spend the majority of the book demonstrating how to effectively and properly use deferreds in action. What I loved about the book is that the majority of the content of the book is examples: real, sometimes complex, examples that can be applied to your everyday work in building JavaScript applications. Even better, they provide challenges for each example so that you can take what you've learned and build upon it in a structured way. While they don't provide full solutions for every challenge, there are hints and guides in an appendix to help you on your way.

I also truly appreciated the fact that when an example was given, the authors didn't build off an example from two chapters ago and didn't require you to remember a bunch of previous examples in order to understand the code being demonstrated. It's one of my pet peeves with many software development books that the authors show code in chapter 3 and then expect you to remember the logic and implementation details of that code when referenced in another example in chapter 17. Thankfully, all of the author's examples are concise, relevant, and self-contained.

As I mentioned, I've spoken about promises and deferreds before, but Terry and Nicholas have a depth of practice using deferreds that vastly outstrips my own. Even if you're not using jQuery in your Web application building, the book is an awesome guide to mastering deferreds in JavaScript.

The O'Reilly team has been generous enough to offer a promo code for the book. If you use the code AUTHD on oreilly.com, you'll get 40% off the print book and 50% off the ebook!

Slides from my jQuery San Diego Talk on Promises and a Book Discount Code!

I want to offer my deepest gratitude to the entire jQuery San Diego team for inviting me to speak at such an awesome conference. There are a lot of incredibly smart people speaking and attending the conference, which made my impostor syndrome quite acute, but I was very proud to have been given an opportunity to present.

Attached to this post are the slides from my talk "Promises, Promises: Unlocking the Power of jQuery's Deferreds." The code from the presentation is available in this GitHub repository.

I was also contacted just before the talk by Nicholas Tollervey and Terry Jones, the authors of a new book from O'Reilly about promises and deferreds in jQuery. The reviews thus far are quite good, and I'm reading the book now and so far I think it's a concise, clear, and very well-written piece on the topic.

The O'Reilly team has been generous enough to offer a promo code for the book. If you use the code AUTHD on oreilly.com, you'll get 40% off the print book and 50% off the ebook!

I'm Speaking at jQuery San Diego!

I'm really excited that I have been asked to speak at this year's main US jQuery conference in San Diego. This is the first time I've been asked to speak at a non-education, non-ColdFusion related technology conference, so I feel like it's a big step forward for me. I'll be speaking at a conference with some pretty awesome JavaScript hackers, and hope that I can meet the expectations of the audience with all those smart people around!

My presentation is titled "Promises, Promises: Unlocking the Power of jQuery's Deferreds." It's an updated (and shorter!) version of a talk that I gave at NCDevCon 2013. jQuery Conference sessions only run 30 minutes, so I've got to cut out a good amount of material, and I want to update it to look at implementations of promises in current, ES6-compliant JavaScript engines.

Here's the description of the session. I can't wait!

Managing the order in which asynchronous callbacks in JavaScript occur can be a nasty business. Without a lot of overhead and management, you're never quite sure that a certain callback has succeeded or failed. One technique for handling this problem that has gained a lot of traction in the past year is to use deferreds and promises. In fact, if you're making jquery.ajax() calls, you're already using deferreds and promises. In this session, we'll look at how deferreds and promises bring order to the chaos of multiple asynchronous JavaScript calls -- often known as "callback hell." We'll look at how you can leverage promises when making network requests, loading content on the fly, caching resources, performing serial transactions, and building a publish/subscribe model for browser or server-based applications.

NCDevCon 2013 Is in Less Than Two Weeks, and I'm Speaking There Twice!

NCDevCon has to be one of the best bargains around when it comes to technology conferences. Not only does the conference have a great lineup of very good, very knowledgeable speakers on all things Web — JavaScript, mobile, design, devOps and workflow — it's also super cheap. This year it's $200 for the weekend conference. It's also located in Raleigh, NC, which is a very affordable travel destination and near to one of my favorite BBQ places in the US: Allen & Sons.

I'll be presenting twice at the conference this year. It's a little overwhelming trying to get two new presentations done, but I'll certainly do my best!

The first topic is "Promises, Promises: Unlocking the Power of jQuery's Deferreds." This session focuses on one of the most annoying problems with asynchronous JavaScript: managing the order in which asynchronous callbacks in JavaScript occur. Promises are a recent approach to this problem and have a lot of power that can be leveraged throughout JavaScript applications. I'll give an in-depth look at how promises work in jQuery, but also look at how they work in Node.js as well.

The second topic is "Better (and Cheaper!) Content Storage With Amazon S3, Cloudfront, And ColdFusion." This session focuses on handling ever-increasing storage needs for your websites and your clients by leveraging Amazon's pretty awesome S3 and CloudFront services. While the code in this session is ColdFusion code, you can take advantage of the power and flexibility of S3 and CloudFront using almost any server-side language. If S3 serves as photo storage for Instagram and CloudFront serves as the content delivery network for Amazon itself, then they'll both definitely work for your needs!

I look forward to a lot of great sessions at the conference. If you're there, feel free to say hi!

Populating a Hidden ID Field When Using the jQuery UI Autosuggest Widget

I've used Prototype for a very long time as the JavaScript framework for many of our Web applicaitons, but we've recently been moving towards using jQuery as it has a much more vibrant developer ecosystem. In a recent project, I wanted to provide customers with the ability to type someone's name into a text field, and use the jQuery UI autosuggst widget to return search results rather than having customers search through a list of 30,000+ customer names. The jQuery UI documentation made it easy to get the autosuggest widget set up. What I needed to do, however, was figure out how to pass the customerID value for the selected customer from the autosuggest widget to my form because when the form was submitted, I wanted to work with the customerID value rather than a string composed of a first name and last name.

The service that is called by the jQuery autosuggest widget returns a simple JSON object which contains an array of "rows" with a first name, last name, and customer ID value. The key was adding the customerID value to the autosuggest widget in the success event handler that's part of the autosuggest widget setup:

$j("input#customerName").autocomplete({
      minLength: 2,
      source: function( request, response ) {
         $j.ajax({
            url: "myService.cfc",
            cache: false,
            dataType: "json",
            data: {
               searchString: request.term
            },
            success: function( data ) {
               response( $j.map( data, function( item ) {
                  return {
                     label: item.lastName + ", " + item.firstName,
                     value: item.lastName + ", " + item.firstName,
                     customerID: item.customerID
                  }
               }));
            }
         });
      },

The autosuggest success event handler takes the JSON returned by my service and loops through it, returning a JavaScript object which contains three values: the label that's displayed in the autosuggest widget, the value for the text input when something is selected, and — this isn't in the core jQuery UI docs — I added the customerID value so that I can use it later. This all gets passed to the autosuggest widget so that when a particular name is chosen, the correct value is displayed in the text field and the correct customerID is also utilized.

One quick side note: the autosuggest control uses the value "term" as the name of the field it's going to pass to the URL defined in the setup. If your service or server-side handler expects a variable named something other than "term," you have to make this change in the data object in the autosuggest setup. In my example, my service expects a string with the name "searchString." So in the data object in the setup, I'm telling the autosuggest control to pass the "term" value to my service with the name "searchString," instead of "term."

When an item is selected from the possible choices in the autosuggest widget, the "select" event is called. That's where you can grab the customerID of the person who was selected. It's really simple to do this:

select: function( event, ui ) {
   $j("#customerID").val(ui.item.customerID);
   console.log("CustomerID " + ui.item.customerID + " was selected.");
}

The ui.item object contains all of the data that you mapped out in the success event handler of the autosuggest control. I'm simply grabbing the ui.item.customerID value and assigning that to a hidden form field in the form called customerID. When the form is submitted, the customerID value is used for processing, rather than the string value of the selected person's name in the text input.

I wasn't able to find this particular (and, I think, common) use case in the jQuery UI docs, so hopefully it will be of help to someone!

BlogCFC was created by Raymond Camden.

Creative Commons License
The content on http://www.iterateme.com/ is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.